Android 之 Material Design（三）—DrawerLayout+NavigationView+Toolbar（点击icon打开关闭侧滑菜单）

前言

关于Material Design相关的控件，前两篇文章已经介绍了一些常用的控件了，这篇文章主要介绍一下DrawerLayout+NavigationView+Toolbar。这样Material Design的也介绍的差不多了，剩下RecyclerView、cardView、CoordinatorLayout一些控件，以后有机会慢慢再写。

效果图

DrawerLayout

介绍：导航栏从左侧滑入。这是Google应用中常见的模式，并且遵循列表的键盘和指标。通常代表应用程序在屏幕左边缘的主要导航选项。它大部分时间都是隐藏的，但是当用户从屏幕的左边缘滑动手指时会显示，或者在应用的顶层，用户触摸工具栏中的应用程序图标。

NavigationView

介绍：被设计用于应用导航，提供了一种通用的导航方式，体现了设计的一致性。而NavigationView的典型用途就是配合之前v4包的DrawerLayout，作为其中的Drawer部分，即导航菜单的本体部分。NavigationView是一个导航菜单框架，使用menu资源填充数据，使我们可以更简单高效的实现导航菜单。它提供了不错的默认样式、选中项高亮、分组单选、分组子标题、以及可选的Header。

Toolbar

介绍：Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ，Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏，以此来取代之前的 Actionbar 。与 Actionbar 相比， Toolbar 明显要灵活的多。它不像 Actionbar 一样，一定要固定在Activity的顶部，而是可以放到界面的任意位置。除此之外，在设计 Toolbar 的时候，Google也留给了开发者很多可定制修改的余地，这些可定制修改的属性在API文档中都有详细介绍。

使用

一.在build.gradle文件中添加

compile ‘com.android.support:appcompat-v7:X.X.X’
compile ‘com.android.support:design:X.X.X’
compile ‘com.android.support:support-v4:X.X.X’
// X.X.X specify the version

二.style样式

    

    -- 左边的箭头指示-->
    

三.xml布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">android.support.v7.widget.Toolbar>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">FrameLayout>

        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:menu="@menu/buttom_navigation">android.support.design.widget.NavigationView>

    android.support.v4.widget.DrawerLayout>
LinearLayout>

四.menu代码

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="none">
        <item
            android:id="@+id/nav_notification"
            android:title="通知" />
        <item
            android:id="@+id/nav_message"
            android:title="私信" />
    group>
    <group
        android:id="@+id/group_manage"
        android:checkableBehavior="none">
        <item
            android:id="@+id/nav_manage"
            android:title="应用管理" />
    group>
    <group
        android:id="@+id/group_settings"
        android:checkableBehavior="none">
        <item
            android:id="@+id/nav_theme"
            android:title="主题风格" />
        <item
            android:id="@+id/nav_setting"
            android:title="设置" />
        <item
            android:id="@+id/nav_suggestion"
            android:title="意见反馈" />
        <item
            android:id="@+id/nav_about"
            android:title="关于" />
    group>
menu>

五.Activity代码

public class DrawerLayoutActivity extends BaseActivity implements NavigationView.OnNavigationItemSelectedListener {
    @BindView(R.id.drawer_layout)
    DrawerLayout mDrawerLayout;
    @BindView(R.id.toolbar)
    Toolbar mToolbar;
    @BindView(R.id.navigation_view)
    NavigationView mNavigationView;

    private ActionBarDrawerToggle mDrawerToggle;

    @Override
    protected int attachLayoutRes() {
        return R.layout.activtiy_drawer_layout;
    }

    @Override
    protected void initView() {
        //设置toolbar标题文本
        mToolbar.setTitle("首页");
        //设置toolbar
        setSupportActionBar(mToolbar);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            //设置左上角图标是否可点击
            actionBar.setHomeButtonEnabled(true);
            //左上角加上一个返回图标
            actionBar.setDisplayHomeAsUpEnabled(true);
        }
    }

    @Override
    protected void initDate() {
        //创建返回键，并实现打开关/闭监听
        /**
         * drawerLayout左侧菜单（或者右侧）的展开与隐藏可以被DrawerLayout.DrawerListener的实现监听到，
         * 这样你就可以在菜单展开与隐藏发生的时刻做一些你希望做的事情。
         * 如果你的activity有actionbar的话，还是建议你用ActionBarDrawerToggle来监听，ActionBarDrawerToggle实现了DrawerListener，所以他能做DrawerListener可以做的任何事情，
         * 同时他还能将drawerLayout的展开和隐藏与actionbar的app 图标关联起来，当展开与隐藏的时候图标有一定的平移效果，点击图标的时候还能展开或者隐藏菜单。
         * */
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }
        };
        mDrawerToggle.syncState();
        mDrawerLayout.setDrawerListener(mDrawerToggle);
        mNavigationView.setNavigationItemSelectedListener(this);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Pass the event to ActionBarDrawerToggle, if it returns
        // true, then it has handled the app icon touch event
        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        int id = item.getItemId();
        String mString = null;
        switch (id) {
            case R.id.nav_notification:
                mString = "通知";
                break;
            case R.id.nav_message:
                mString = "私信";
                break;
            case R.id.nav_manage:
                mString = "应用管理";
                break;
            case R.id.nav_theme:
                mString = "主题风格";
                break;
            case R.id.nav_setting:
                mString = "设置";
                break;
            case R.id.nav_suggestion:
                mString = "意见反馈";
                break;
            case R.id.nav_about:
                mString = "关于";
                break;
        }
        mToolbar.setTitle(mString);
        mDrawerLayout.closeDrawer(GravityCompat.START);
        return true;
    }
}

总结与注意

• DrawerLayout允许放入两个直接子控件，第一个控件是主屏幕显示的内容，第二个控件是滑动菜单中显示的内容。
• DrawerLayout中android:layout_gravity=”start”属性的意思，表示会根据系统语言进行判断，如果系统语言是从左往右（如汉语、英语），滑动菜单就在左边；如果系统语言是从右往左（如阿拉伯语），滑动菜单就在右边。
• 点击ToolBar icon打开侧滑菜单，需要在onOptionsItemSelected（）中添加如下代码，意思是交给
  ActionBarDrawerToggle去处理app icon的点击事件。由于ActionBarDrawerToggle实现了DrawerListener，所以他能做DrawerListener可以做的任何事情，控制打开和关闭。

// Pass the event to ActionBarDrawerToggle, if it returns
// true, then it has handled the app icon touch event
if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
 }

• 当使用NavigationView时，style中不可以自定义textColorPrimary这个字段，因为我的理解是使用“android：textColorPrimary”需要最小的version为21。所以会报 Error inflating class android.support.design.widget.NavigationView 这个错误。
• 如果想打造一个比较好看的菜单，NavigationView这个可以添加menu和headerLayout来实现市面上比较好看的效果。
• NavigationView.setCheckedItem()将菜单某个item设置为默认选中。