Material Design 控件知识梳理(5) - DrawerLayout && NavigationView

Material Design 控件知识梳理(1) - Android Design Support Library 是什么
Material Design 控件知识梳理(2) - AppBarLayout & CollapsingToolbarLayout
Material Design 控件知识梳理(3) - BottomSheet && BottomSheetDialog && BottomSheetDialogFragment
Material Design 控件知识梳理(4) - FloatingActionButton
Material Design 控件知识梳理(5) - DrawerLayout && NavigationView
Material Design 控件知识梳理(6) - Snackbar
Material Design 控件知识梳理(7) - BottomNavigationBar
Material Design 控件知识梳理(8) - TabLayout
Material Design 控件知识梳理(9) - TextInputLayout

一、概述

今天，我们来介绍两个和侧滑菜单有关的MD控件：

• DrawerLayout：实现侧滑菜单的基础。
• NavigationView：作为侧滑菜单布局的一种实现方式。

二、DrawerLayout

2.1 基本原理

当我们需要使用到侧滑菜单时，可以通过DrawerLayout来实现，DrawerLayout、侧滑菜单布局、普通布局这三者的关系为：

layout_gravity决定了将哪个菜单作为侧滑布局， DrawerLayout会根据是否声明了 layout_gravity属性，把它内部的直接子 View分成两类：

• 对于没有声明layout_gravity的布局，那么它会将它们当作普通布局，并按照FrameLayout的方式来排列它们。
• 对于声明了layout_gravity="start"或者layout_gravity="left"的布局，在普通情况下会将它们隐藏起来，当从屏幕的最左侧往右移动手指时，这个布局会渐渐展现出来，对于DrawerLayout的所有子View来说，只允许有一个子View的该属性为start/left，这就是我们的侧滑布局。
• layout_gravity="end/right"和上面类似，只不过它的调出是从屏幕的右侧向左侧移动。

2.2 简单事例

下面是一个使用DrawerLayout的最简单的例子：

layout_drawer_normal就是侧滑菜单，我们将它的layout_gravity定义为start，按照前面的分析，它应当位于屏幕的左侧：

下面是最终的效果：

2.3 监听DrawerLayout的状态变化

如果我们希望监听DrawerLayout状态的变化，那么可以通过下面这个方法：

    private Toolbar mToolbar;
    private ActionBarDrawerToggle mActionBarDrawerToggle;
    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer_layout_simple);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                Log.d("mDrawerLayout", "onDrawerSlide, slideOffset=" + slideOffset);
            }

            @Override
            public void onDrawerOpened(View drawerView) {
                Log.d("mDrawerLayout", "onDrawerOpened");
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                Log.d("mDrawerLayout", "onDrawerClosed");
            }

            @Override
            public void onDrawerStateChanged(int newState) {
                Log.d("mDrawerLayout", "onDrawerStateChanged, state=" + newState);

            }
        });

    }

其中opened和closed方法都很好理解，就是对应展开和收起，而onDrawerSlide方法中的slideOffset，则对应于DrawerLayout展开的偏移值，全部展开时为1，全部收起时为0，onDrawerStateChanged对应于所处的状态：STATE_IDLE/STATE_DRAGGING/STATE_SETTLING。

三、DrawerLayout和Toolbar结合使用

3.1 Toolbar的NavigationIcon跟随DrawerLayout变化

下面，我们看一下把DrawerLayout和Toolbar相结合，做出下面的效果，让Toolbar的navigationIcon跟随着DrawerLayout变化：

当拖动侧边栏的时候， Toolbar的按钮会跟随着进行状态的变化，我们也可以通过点击 Toolbar的按钮来展开和收起侧边栏，首先看我们的布局

在Activity中，我们需要将Toolbar和DrawerLayout关联起来：

public class DrawerLayoutActivity extends AppCompatActivity {

    private Toolbar mToolbar;
    private ActionBarDrawerToggle mActionBarDrawerToggle;
    private DrawerLayout mDrawerLayout;

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

    private void initView() {
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true); //1.决定显示.
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open, R.string.drawer_close); //2.传入Toolbar可以点击.
        mDrawerLayout.addDrawerListener(mActionBarDrawerToggle); //3.监听变化.
    }

    @Override
    protected void onPostCreate(@Nullable Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        //4.同步状态
        mActionBarDrawerToggle.syncState();
    }
}

这里需要做的有四步工作：

• 将Toolbar作为ActionBar，并调用Toolbar的setDisplayHomeAsUpEnabled，这样最左边的Icon才可以显示。
• 实例化ActionBarDrawerToggle，并传入Toolbar和DrawerLayout。
• 通过DrawerLayout的addDrawerListener方法，让DrawerLayout的状态能够回调到ActionBarDrawerToggle。
• 在onPostCreate中，调用ActionBarDrawerToggle的syncState方法。

3.2 DrawerLayout覆盖Toolbar

在上面的实现方式中，侧滑菜单位于Toolbar的下方，如果我们希望它覆盖Toolbar，那么可以像下面这样布局：

最终的效果为：

3.3 DrawerLayout和Toolbar延伸到状态栏上方

如果我们希望侧滑菜单的区域能够延伸到状态栏，那么可以进行以下三步的修改：

• 第一步：修改Activity的style，让状态栏透明，并修改状态栏的颜色：

• 第二步：给Activity根布局设置android:fitsSystemWindows="true"属性

• 第三步：给侧滑布局设置android:fitsSystemWindows="true"属性

通过以上三步，就可以达到沉浸式状态栏的效果：

四、NavigationView

4.1 Navigation属性

在使用DrawerLayout的时候，我们可以随意定义侧滑菜单的布局，NavigationView其实就是Google推荐的侧滑布局应该有的样子，它的效果类似于下面这样：

我们先来看一个使用 Navigation的简单例子：

上面app各属性对应到下图中就是这样：

可以看到， Navigation分为两个部分：头部和列表。

• 头部是app:headerLayout所指定的布局：

• 列表通过app:menu所指定：

menu当中的每个item就对应于列表当中的一项，而item的icon和title则分别对应列表项的图标和文字，如果希望对item进行分组，那么可以采用group的方式来组织menu：

不同组之间就会被分割线隔开：

如果想要给某个分组添加标题，那么可以采用 subMenu的方式：

4.2 Navigation点击监听

4.2.1 列表点击监听

如果希望处理Navigation中列表的监听，那么可以使用现成的接口，根据item的id来判断是点击的是列表中的哪一项。

mNavigationView = (NavigationView) findViewById(R.id.navigation);
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        Log.d("onSelected", "id=" + item.getItemId());
        return true;
    } 
});

4.2.2 头部点击监听

NavigationView并没有提供头部点击的监听回调，因此，我们只能够通过findViewById的方法找到对应的View，对其设置监听，下面是整个headerLayout在NavigationView中的层次：

五、参考文献

Android 5.0 之 NavigationView 的使用

---

更多文章，欢迎访问我的 Android 知识梳理系列：

• Android 知识梳理目录：http://www.jianshu.com/p/fd82d18994ce
• 个人主页：http://lizejun.cn
• 个人知识总结目录：http://lizejun.cn/categories/