Navigation Drawer 側邊選單教學 (PartIV)

前提回顧:

Navigation Drawer 側邊選單教學 (PartIII)

這一篇教學要來做結尾了，此範例接著上一篇繼續做下去，會教您如何自定義Toolbar實作ActionBar取代內建的ActionBar

●在styles.xml更改成NoActionBar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

●Layout右鍵新增navigation_actionbox.xml

File name=navigation_actionbox

Root element=android.support.v7.Toolbar

1.設立id:nav_action 高度wrap_content背景顏色@color/colorPrimary

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/nav_action"
    android:background="@color/colorPrimary"
    android:theme="@style/Base.ThemeOverlay.AppCompat.Dark">

</android.support.v7.widget.Toolbar>

2.此時activity_main.xml的Actionbox會不見所以在LinearLayout中加入<include>把剛剛建立自定義的ActionBox加入activity_main.xml中

<include layout="@layout/navigation_actionbox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

另外LinearLayout的orientation改成vertical垂直

3.在自定義的navigation_actionbox.xml更改主題配色

android:theme="@style/Base.ThemeOverlay.AppCompat.Dark">

●MainActivity.java撰寫程式

1.剛剛已經把Toolbar版面用出來了，接著在程式中建立Toolbar變數然後

setSupportActionBar( mToolbar )  Toolbar就能取代原本的ActionBar了

2.另外要讓清單選項觸發動作要實作implements NavigationView.OnNavigationItemSelectedListener 

並不是在onOptionsItemSelected()中去實作

MainActivity.java程式碼

package com.example.andy6804tw.navigationapp;


import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity  extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mToggle;//元件觸發

    private Toolbar mToolboar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mToolboar=(Toolbar)findViewById(R.id.nav_action);
        setSupportActionBar(mToolboar);//Toolbar取代原本的ActionBar

        mDrawerLayout=(DrawerLayout)findViewById(R.id.drawerLayout);
        mToggle=new ActionBarDrawerToggle(this,mDrawerLayout,R.string.open,R.string.close);//必須用字串資源檔
        mDrawerLayout.addDrawerListener(mToggle);//工具欄監聽事件

        mToggle.syncState();
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);//隱藏顯示箭頭返回

        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);//清單觸發監聽事件

    }
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {//實作清單觸發
        int id = item.getItemId();

        if (id == R.id.nav_account) {
            Toast.makeText(this,"account",Toast.LENGTH_SHORT).show();

        }
        else if (id == R.id.nav_settings)
        {
            Toast.makeText(this,"settings",Toast.LENGTH_SHORT).show();

        }
        else if (id == R.id.nav_logout)
        {
            Toast.makeText(this,"logout",Toast.LENGTH_SHORT).show();

        }
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        if(mToggle.onOptionsItemSelected(item)){//當按下左上三條線或顯示工具列
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

}

執行結果