Material Design 控件知识梳理(5) - Draw

作者: 泽毛 | 来源:发表于2017-04-14 20:38 被阅读1076次

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

<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，按照前面的分析，它应当位于屏幕的左侧：

<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状态的变化，那么可以通过下面这个方法：

    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的按钮来展开和收起侧边栏，首先看我们的布局

<?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关联起来：

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，那么可以像下面这样布局：

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

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

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

五、参考文献

Android 5.0 之 NavigationView 的使用

Material Design 控件知识梳理(5) - Draw

一、概述

二、`DrawerLayout`

2.1 基本原理

2.2 简单事例

2.3 监听`DrawerLayout`的状态变化

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

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

3.2 `DrawerLayout`覆盖`Toolbar`

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

四、`NavigationView`

4.1 `Navigation`属性

4.2 `Navigation`点击监听

4.2.1 列表点击监听

4.2.2 头部点击监听

五、参考文献

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

support design

Material Design

Material Design

View

Material Design

Material Design

我的收藏

material design

Material Design 控件知识梳理(5) - Draw

一、概述

二、DrawerLayout

2.1 基本原理

2.2 简单事例

2.3 监听DrawerLayout的状态变化

三、DrawerLayout和Toolbar结合使用

3.1 Toolbar的NavigationIcon跟随DrawerLayout变化

3.2 DrawerLayout覆盖Toolbar

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

四、NavigationView

4.1 Navigation属性

4.2 Navigation点击监听

4.2.1 列表点击监听

4.2.2 头部点击监听

五、参考文献

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

二、`DrawerLayout`

2.3 监听`DrawerLayout`的状态变化

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

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

3.2 `DrawerLayout`覆盖`Toolbar`

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

四、`NavigationView`

4.1 `Navigation`属性

4.2 `Navigation`点击监听