Navigation Drawer 側邊選單教學 (PartII)

前提回顧:

Navigation Drawer 側邊選單教學 (PartI)

上一篇教學教導如何配置DrawerLayout版面和建立item選單，此範例接著上一個來實作左上角工具圖示  ≡ 點下去顯示工具欄位

●首先把activity_main.xml中的最外層的DrawerLayout加入id

android:id="@+id/drawerLayout"

●開始撰寫程式MainActivity.java

1.先在字串資源檔strings.xml建立兩個文字之後 ActionBarDrawerToggle建立物件時會使用到，它主要是function判斷選單滑開關閉若用字串"Open"、"Close"會有問題

<resources>

    <string name="app_name">NavigationApp</string>

    <string name="open">Open</string>

    <string name="close">Close</string>

</resources>

2.在MainActivity.java中建立兩個私有全域變數

在此講解 mToggle.syncState()是隱藏箭頭 ←變成 ≡ 
getSupportActionBar().setDisplayHomeAsUpEnabled( true ) //為圖標決定左上角的圖標是否可以點擊因為Android4.0以後預設值為false

package com.example.andy6804tw.navigationapp;

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

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mToggle;

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

        mDrawerLayout=(DrawerLayout)findViewById(R.id.drawerLayout);
        mToggle=new ActionBarDrawerToggle(this,mDrawerLayout,R.string.open,R.string.close);//必須用字串資源檔
        mDrawerLayout.addDrawerListener(mToggle);//監聽選單按鈕是否被觸擊
        mToggle.syncState();//隱藏顯示箭頭返回

        //讓 ActionBar 中的返回箭號置換成 Drawer 的三條線圖示。並且把這個觸發器指定給 layDrawer 。
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);


    }

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

執行結果

現在程式能簡單的被觸發執行了並且使用者可以用手指向右滑動顯示選單，下一個教學要教各位如何優化版面，加入icon以及header標頭區塊