NanBox

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

发表于  |    |     |   阅读次数

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

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

侧滑菜单

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

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

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

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

DrawerLayout

我们看一下首页的布局：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?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 上的按钮联动，像这样：

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

1
2
3
4
5
6
7
8
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
        this,
        drawerLayout,
        toolbar,
        R.string.navigation_drawer_open,
        R.string.navigation_drawer_close);
drawerLayout.addDrawerListener(toggle);
toggle.syncState();

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?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 设置监听器，可以实现对侧边栏菜单的点击监听：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 的获取：

1
2
3
4
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，可以很简单就实现这个效果。

布局如下：

1
2
3
4
5
6
<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 搭配使用的，在初始化时加一句让它们关联起来就行了：

1
tabLayout.setupWithViewPager(viewPager)

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

下拉刷新

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

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

1
2
3
4
5
6
swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        load();
    }
};

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

效果如下：

可折叠标题栏

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

Toolbar

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

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

在代码中初始化：

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

AppBarLayout

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

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

1
app:layout_scrollFlags="scroll|enterAlways"

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

CoordinatorLayout

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?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 轴高度（阴影）。

用的时候记得添加依赖：

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

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

1
2
3
4
5
6
7
8
9
10
11
<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，它是元素转换的一个标识：

1
2
3
4
5
6
<ImageView
    android:id="@+id/image_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:transitionName="tran_01"/>

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

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

这就是共享元素的效果：

小结

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

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

项目地址