側滑菜單欄使用DrawerLayout和NavigationView實作

DrawerLayout大家應該都不陌生，在實作側滑菜單的時候回大量用到這個控件。

使用它來實作側滑菜單隻需要布局中設定好 側滑菜單欄以及主要顯示區域就可以

側滑菜單欄可以是一個顯示的布局，用RelativeLayout或者Linnerlayout等布局都可以寫出左側布局想要的效果,今天

要用的主角是NavigationView，實作側滑菜單更加簡單（因為他本身即是一個側滑布局）

從布局中可以看出，一個DrawerLayout裡面包含了兩個布局，一個是首頁面布局也就是Framlayout，另一個是support.design下的控件NavigationView，當布局完成之後可以看到如下的效果，這就是上面代碼的布局效果，可以明顯的看到側滑菜單已經顯示在了左側位置

其中在NavigationView布局中，需要給NavigationView設定app:headerLayout和app:menu

• headerLayout就是給導航欄增加一個頭部Layout。
• menu就是對應菜單項的選擇條目。

在NavigationView中還有一些比較重要的屬性，如下:

• itemBackground — 設定菜單項的背景
• itemIconTint — 設定菜單項的圖示的着色
• itemTextColor — 這隻菜單項目的文本顔色

因為 DrawerLayout本身已經具備了手勢拉動出現和回彈的效果，是以隻需要寫一下左上角按鈕的點選彈出和點選回彈的事件就可以了，然後在寫NavigationView的點選事件全部代碼如下：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //設定ToolBar
    final Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
    mToolbar.setTitleTextColor(Color.WHITE);
    mToolbar.setTitle("我的标題");
    setSupportActionBar(mToolbar);
    //設定抽屜DrawerLayout
    final DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

    ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar,
            R.string.drawer_open, R.string.drawer_close);
    mDrawerToggle.syncState();//初始化狀态
    mDrawerLayout.setDrawerListener(mDrawerToggle);

    //設定導航欄NavigationView的點選事件
    NavigationView mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
    mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(MenuItem menuItem) {
            switch (menuItem.getItemId())
            {
                case R.id.item_one:
                    getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new FragmentOne()).commit();
                    mToolbar.setTitle("标題1");
                    break;
                case R.id.item_two:
                    getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new FragmentTwo()).commit();
                    mToolbar.setTitle("标題2");
                    break;
                case R.id.item_three:
                    getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new FragmentThree()).commit();
                    mToolbar.setTitle("标題3");
                    break;
            }
            menuItem.setChecked(true);//點選了把它設為選中狀态
            mDrawerLayout.closeDrawers();//關閉抽屜
            return true;
        }
    });
}      

headerlayout布局如下：就是一個TextView而已

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="#30469b">
    <TextView
        android:id="@+id/header_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="HeaderLayout"
        android:textColor="#ffffff"
        android:textSize="25sp" />
</RelativeLayout>
      

下面是menu布局：

這樣整個使用DrawerLayout和NavigationView實作側滑菜單就完成了，實作效果如下：

代碼下載下傳位址：http://download.csdn.net/detail/xiaoqiang_0719/9632830