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

时间 2019-11-21

标签 material design 控件知识梳理 drawerlayout navigationview 繁體版

原文原文链接

1、概述

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

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

2、`DrawerLayout`

2.1 基本原理

当咱们须要使用到侧滑菜单时，能够经过DrawerLayout来实现，DrawerLayout、侧滑菜单布局、普通布局这三者的关系为： bash

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的最简单的例子：app

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".DrawerLayoutActivity">
    <!-- 普通布局 -->
    <FrameLayout
        android:id="@+id/fl_content"
        android:background="@android:color/holo_orange_dark"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:text="我是内容布局"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </FrameLayout>
    <!-- 侧滑布局 -->
    <include layout="@layout/layout_drawer_normal"/>
</android.support.v4.widget.DrawerLayout>
复制代码

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

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_gravity="start"
    android:layout_width="200dp"
    android:background="@android:color/holo_green_dark"
    android:layout_height="match_parent">
    <TextView
        android:text="我是侧滑布局"
        android:layout_gravity="center"
        android:textColor="@android:color/white"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>
复制代码

下面是最终的效果：布局

2.3 监听`DrawerLayout`的状态变化

若是咱们但愿监听DrawerLayout状态的变化，那么能够经过下面这个方法：ui

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。this

3、`DrawerLayout`和`Toolbar`结合使用

3.1 `Toolbar`的`NavigationIcon`跟随`DrawerLayout`变化

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

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- Toolbar -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:background="@android:color/holo_green_dark"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"/>
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- 普通布局 -->
        <FrameLayout
            android:id="@+id/fl_content"
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:text="我是内容布局"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </FrameLayout>
        <!-- 侧滑布局 -->
        <include layout="@layout/layout_drawer_normal"/>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>
复制代码

在Activity中，咱们须要将Toolbar和DrawerLayout关联起来：.net

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();
    }
}
复制代码

这里须要作的有四步工做：3d

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

3.2 `DrawerLayout`覆盖`Toolbar`

在上面的实现方式中，侧滑菜单位于Toolbar的下方，若是咱们但愿它覆盖Toolbar，那么能够像下面这样布局：

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- 普通布局 -->
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:background="@android:color/holo_green_dark"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"/>
        <FrameLayout
            android:id="@+id/fl_content"
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:text="我是内容布局"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </FrameLayout>
    </LinearLayout>
    <!-- 侧滑布局 -->
    <include layout="@layout/layout_drawer_normal"/>
</android.support.v4.widget.DrawerLayout>
复制代码

最终的效果为：

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

若是咱们但愿侧滑菜单的区域可以延伸到状态栏，那么能够进行如下三步的修改：

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

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!-- 修改状态栏颜色 -->
        <item name="colorPrimaryDark">@android:color/holo_green_dark</item>
        <!-- 状态栏透明 -->
        <item name="android:windowTranslucentStatus">true</item>
    </style>
</resources>
复制代码

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

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <!-- 普通布局 -->
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:background="@android:color/holo_green_dark"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"/>
        <FrameLayout
            android:id="@+id/fl_content"
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:text="我是内容布局"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </FrameLayout>
    </LinearLayout>
    <!-- 侧滑布局 -->
    <include layout="@layout/layout_drawer_normal"/>
</android.support.v4.widget.DrawerLayout>
复制代码

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

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_gravity="start"
    android:layout_width="200dp"
    android:background="@android:color/holo_green_dark"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <TextView
        android:text="我是侧滑布局"
        android:layout_gravity="center"
        android:textColor="@android:color/white"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>
复制代码

经过以上三步，就能够达到沉浸式状态栏的效果：

4、`NavigationView`

4.1 `Navigation`属性

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

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

<android.support.design.widget.NavigationView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="300dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/layout_drawer_navigation_header"
    app:menu="@menu/menu_navigation"
    app:itemIconTint="@android:color/white"
    app:itemBackground="@android:color/holo_green_dark"
    app:itemTextColor="@android:color/black">
</android.support.design.widget.NavigationView>
复制代码

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

能够看到， Navigation分为两个部分：头部和列表。

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:src="@drawable/ic_bg"
        android:scaleType="centerCrop"
        android:layout_width="match_parent"
        android:layout_height="200dp"/>
</LinearLayout>
复制代码

列表经过app:menu所指定：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/favorite"
        android:icon="@mipmap/ic_launcher"
        android:title="收藏"/>
    <item
        android:id="@+id/wallet"
        android:icon="@mipmap/ic_launcher"
        android:title="钱包"/>
    <item
        android:id="@+id/photo"
        android:icon="@mipmap/ic_launcher"
        android:title="相册"/>
    <item
        android:id="@+id/file"
        android:icon="@mipmap/ic_launcher"
        android:title="文件"/>
</menu>
复制代码

menu当中的每一个item就对应于列表当中的一项，而item的icon和title则分别对应列表项的图标和文字，若是但愿对item进行分组，那么能够采用group的方式来组织menu：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/group1">
        <item
            android:id="@+id/favorite"
            android:icon="@mipmap/ic_launcher"
            android:title="group1 - item1"/>
        <item
            android:id="@+id/wallet"
            android:icon="@mipmap/ic_launcher"
            android:title="group1 - item2"/>
    </group>
    <group android:id="@+id/group2">
        <item
            android:id="@+id/photo"
            android:icon="@mipmap/ic_launcher"
            android:title="group2 - item1"/>
        <item
            android:id="@+id/file"
            android:icon="@mipmap/ic_launcher"
            android:title="group2 - item2"/>
    </group>
</menu>
复制代码

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

若是想要给某个分组添加标题，那么能够采用 subMenu的方式：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/group1">
        <item
            android:id="@+id/item1"
            android:icon="@mipmap/ic_launcher"
            android:title="group1 - item1"/>
        <item
            android:id="@+id/item2"
            android:icon="@mipmap/ic_launcher"
            android:title="group1 - item2"/>
    </group>
    <group android:id="@+id/group2">
        <item
            android:id="@+id/item3"
            android:icon="@mipmap/ic_launcher"
            android:title="group2 - item1"/>
        <item
            android:id="@+id/item4"
            android:icon="@mipmap/ic_launcher"
            android:title="group2 - item2"/>
    </group>
    <item
        android:id="@+id/item5"
        android:title="group3">
        <menu>
            <item
                android:id="@+id/item6"
                android:icon="@mipmap/ic_launcher"
                android:title="group3 - item1"/>
            <item
                android:id="@+id/item7"
                android:icon="@mipmap/ic_launcher"
                android:title="group3 - item2"/>
        </menu>
    </item>
</menu>
复制代码

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中的层次：

5、参考文献

Android 5.0 之 NavigationView 的使用

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

1、概述

2、DrawerLayout

2.1 基本原理

2.2 简单事例

2.3 监听DrawerLayout的状态变化

3、DrawerLayout和Toolbar结合使用

3.1 Toolbar的NavigationIcon跟随DrawerLayout变化

3.2 DrawerLayout覆盖Toolbar

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

4、NavigationView

4.1 Navigation属性

4.2 Navigation点击监听