打造自己的 APP「冰与火百科」（三）：Material Design 控件

自从 Google I/O 2014 发布 Material Design 到现在，这个设计语言已经相当完善了。Material Design 是我最喜欢的一种设计，在项目中，我会尽可能的使用 Material Design 的控件。

下面给大家简单介绍一下「冰与火百科」里面涉及到的 Material Design 控件。

侧滑菜单

APP 里需要一个切换内容以及设置的地方，使用侧滑菜单是最好的选择。过去我们都是用 SlidingMenu 这样的第三方控件实现侧滑菜单，随着 Design 库的发布，我们有了官方的侧滑菜单。

在 Android Studio 里新建项目的时候，可以直接选择带有侧滑菜单的模板：

如果没有选模板，记得在 build.gradle 添加设计库的依赖：

compile "com.android.support:design:${SUPPORT_LIB_VERSION}"

DrawerLayout

我们看一下首页的布局：

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    tools:openDrawer="start">    <include        layout="@layout/app_bar_main"        android:layout_width="match_parent"        android:layout_height="match_parent" />    <android.support.design.widget.NavigationView        android:id="@+id/nav_view"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        android:fitsSystemWindows="true"        app:headerLayout="@layout/nav_header_main"        app:menu="@menu/activity_main_drawer" /></android.support.v4.widget.DrawerLayout>

DrawerLayout 包含了主视图及侧滑菜单，负责控制侧滑的效果。而 NavigationView 就是我们的侧滑菜单。

如果使用了 ToolBar，并且要实现侧滑菜单的状态和 ToolBar 上的按钮联动，像这样：

在初始化的时候加入如下代码就可以实现了：

ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(        this,        drawerLayout,        toolbar,        R.string.navigation_drawer_open,        R.string.navigation_drawer_close);drawerLayout.addDrawerListener(toggle);toggle.syncState();

NavigationView

从 NavigationView 的布局属性可以看出，它由头部 headerLayout 及菜单列表 menu 两部分组成。

头部 headerLayout 就是一个普通布局，通常用渐变色或者图片来作背景，在上面显示程序名或用户信息。

下面的菜单列表，需要引入一个 menu 配置文件，这个文件我是这样写的：

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto">    <group android:checkableBehavior="single">        <item            android:id="@+id/nav_person"            android:checked="true"            android:icon="@drawable/menu_person"            android:title="人物" />        <item            android:id="@+id/nav_house"            android:icon="@drawable/menu_house"            android:title="家族" />        <item            android:id="@+id/nav_history"            android:icon="@drawable/menu_history"            android:title="历史" />        <item            android:id="@+id/nav_castles"            android:icon="@drawable/menu_castle"            android:title="城堡" />        <item            android:id="@+id/nav_night"            android:checkable="false"            android:icon="@drawable/menu_bulb"            android:title="夜间模式"            app:actionLayout="@layout/menu_switch" />    </group></menu>

前四项是用于切换显示不同类型的单选按钮。

最后一项是夜间模式的切换按钮。它不可点击，并且通过 actionLayout 引入了另一个布局，布局里是一个开关控件 SwitchCompat。

Listener

给 NavigationView 设置监听器，可以实现对侧边栏菜单的点击监听：

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {    @Override    public boolean onNavigationItemSelected(@NonNull MenuItem item) {        switch (item.getItemId()) {            case R.id.nav_person:                //...                break;            case R.id.nav_night:                boolean isChecked = switchCompat.isChecked();                switchCompat.setChecked(!isChecked);                break;        }    return true;    }});

顺便说一下这里 switchCompat 的获取：

Menu menu = navigationView.getMenu();MenuItem nightItem = menu.findItem(R.id.nav_night);View nightView = MenuItemCompat.getActionView(nightItem);SwitchCompat switchCompat = (SwitchCompat) nightView.findViewById(R.id.switch_compat);

侧滑菜单相关代码基本就这些了，看一下最终的实现效果：

标签选项卡

过去要实现顶部标签栏，也是只能依赖第三方库，现在有了 TabLayout，可以很简单就实现这个效果。

布局如下：

<android.support.design.widget.TabLayout    android:id="@+id/tab_layout"    android:layout_width="match_parent"    android:layout_height="wrap_content"    app:tabMode="scrollable"    app:theme="@style/ThemeOverlay.AppCompat.Dark" />

设置 tabMode 为 scrollable，让标签栏宽度超过占用的宽度时可以滚动，不然会将所有标签压缩在占用的宽度里。

我们知道选项卡是要和 ViewPager 搭配使用的，在初始化时加一句让它们关联起来就行了：

tabLayout.setupWithViewPager(viewPager)

这么简单又实现了一个功能：

下拉刷新

相信很多人都接触过 PullToRefresh 这样的第三方下拉刷新控件，现在我们来看看 Material Design 的下拉刷新 SwipeRefreshLayout。

在布局里用 SwipeRefreshLayout 包裹要实现下拉刷新的区域，到顶部下拉便会出现加载框，并触发监听器的 onRefresh 方法。我们这样来监听下拉刷新：

swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {    @Override    public void onRefresh() {        load();    }};

可以通过 setRefreshing 方法主动开始或停止刷新。

效果如下：

可折叠标题栏

在 APP 里，经常会有一个标题栏，用于显示页面标题、放置搜索或设置按钮。它的作用不言而喻，但在寸土寸金的屏幕里它却一直占据着一块固定的区域。现在，我们能够实现在合适的时候将标题栏折叠起来。下面简单介绍一下涉及到的几个控件。

Toolbar

经过 TitleBar、ActionBar 的发展，现在我们用 Toolbar 来实现标题栏：

<android.support.v7.widget.Toolbar    android:id="@+id/toolbar"    android:layout_width="match_parent"    android:layout_height="?attr/actionBarSize"/>

在代码中初始化：

setSupportActionBar(toolbar);ActionBar actionBar = getSupportActionBar();if (actionBar != null) {    // 设置左边按钮可点击    actionBar.setDisplayHomeAsUpEnabled(true);}

AppBarLayout

AppBarLayout 继承自 LinerLayout，支持滑动。要让 Toolbar 响应折叠效果，需要把 AppBarLayout 作为 Toolbar 的父布局。

被 AppBarLayout 包裹的控件，可以设置一个 layout_scrollFlags 属性，即滑动折叠的类型。我给 Toolbar 设置了

app:layout_scrollFlags="scroll|enterAlways"

代表页面向上、向下滚动时，Toolbar 会跟着一起向上、向下滚动，直到完全隐藏或完全显示。

CoordinatorLayout

单有 AppBarLayout 还不行，还要配合 CoordinatorLayout 使用才能实现折叠效果。CoordinatorLayout 作为一个上层布局，用来协调它的子布局间的交互。

综合上面几个控件，最终布局如下：

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout     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.support.design.widget.AppBarLayout        android:id="@+id/appbar_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            app:layout_scrollFlags="scroll|enterAlways" />        <android.support.design.widget.TabLayout            android:id="@+id/tab_layout"            android:layout_width="match_parent"            android:layout_height="wrap_content"            app:tabMode="scrollable"            app:theme="@style/ThemeOverlay.AppCompat.Dark" />    </android.support.design.widget.AppBarLayout>    <android.support.v4.widget.SwipeRefreshLayout        android:id="@+id/swipe_refresh_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <android.support.v4.view.ViewPager            android:id="@+id/view_pager"            android:layout_width="match_parent"            android:layout_height="match_parent"/>    </android.support.v4.widget.SwipeRefreshLayout></android.support.design.widget.CoordinatorLayout>

要和 Toolbar 实现联动的控件，需要实现了 NestedScrollingChild 接口，并且配置「app:layout_behavior=”@string/appbar_scrolling_view_behavior”」。这里常用的控件有 SwipeRefreshLayout、NestedScrollView、RecyclerView。

基本都是布局代码，就可以实现这样的效果：

CollapsingToolbarLayout

除了简单的将 Toolbar 收起，还可以实现将图片收缩转换为 Toolbar 的酷炫效果。要实现这个效果需要使用 CollapsingToolbarLayout，用它包裹 ImageView 和 Toolbar：

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout     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.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="200dp">        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/collapsing_toolbar"            android:layout_width="match_parent"            android:layout_height="match_parent"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <ImageView                android:id="@+id/image_view"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:scaleType="centerCrop"                app:layout_collapseMode="parallax" />            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                app:layout_collapseMode="pin" />        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <android.support.v4.widget.NestedScrollView        android:id="@+id/scroll"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <WebView            android:id="@+id/web_view"            android:layout_width="match_parent"            android:layout_height="match_parent" />    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout 内的控件需要设置 layout_collapseMode 属性，可选值有：

• parallax 视差模式，随着页面滚动会有视差折叠效果
• pin 固定模式，完全折叠后固定显示

效果如下：

卡片视图

在 Material Design 里有一个概念是「卡片」，而 CardView 就是这个概念的直接体现。

CardView 其实就是一个带有 MD 风格的 FrameLayout，它可以有水波纹点击效果，可以设置圆角、设置 z 轴高度（阴影）。

用的时候记得添加依赖：

compile "com.android.support:cardview-v7:${SUPPORT_LIB_VERSION}"

用法跟 FrameLayout 是一样的，下面例子设置了水波纹点击效果以及圆角和 z 轴高度：

<android.support.v7.widget.CardView    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_margin="10dp"    android:foreground="?attr/selectableItemBackground"    app:cardCornerRadius="5dp"    app:cardElevation="5dp">    <!--...--></android.support.v7.widget.CardView>

共享元素动画

在 Material Design 里，希望页面的跳转能有一定的连贯性。

如果页面 A 和页面 B 拥有同一个元素，在 Android 5.0 之后，我们可以实现一种叫共享元素的过场动画，这个元素将会从页面 A 的位置，变换到页面 B 的位置。

在「冰与火百科」中，首页列表和详情页都显示了一张人物图片，就可以这样做。

在详情页的 ImageView 配置一个 transitionName，它是元素转换的一个标识：

<ImageView    android:id="@+id/image_view"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:scaleType="centerCrop"    android:transitionName="tran_01"/>

在首页跳转的代码，修改为：

Pair[] pairs = new Pair[]{new Pair(binding.ivImg, "tran_01")};ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(mainActivity, pairs);ActivityCompat.startActivity(context, intent, options.toBundle());

这就是共享元素的效果：

小结

借着写「冰与火百科」，把 Material Design 的部分常用控件归纳了一下。但这里只说了每个控件的基本用法，想有更深入的了解，还需要看查阅相关文章。

我不太懂设计，但有了这些控件，感觉「冰与火百科」还挺好看的~

项目地址