第012天：Material Design界面设计语言

        其实长久以来，大多数人都认为Android系统的UI并不算美观，至少没有iOS系统的美观。 以至于很多IT公司在进行应用界面设计的时候，为了保证双平台的统一性，强制要求Android 端的界面风格必须和iOS端一致。这种情况在现实工作当中实在是太常见了，虽然我认为这是非常不合理的。因为对于一般用户来说，他们不太可能会在两个操作系统上分别去使用同一个应用， 但是却必定会在同一个操作系统上使用不同的应用。因此，同一个操作系统中各个应用之间的界面统一性要远比一个应用在双平台的界面统一性重要得多，只有这样，才能给使用者带来更好的用户体验。

        但问题在于，Android标准的界面设计风格并不是特别被大众所接受，很多公司都觉得自己完全可以设计出更加好看的界面，从而导致Android平台的界面风格长期难以得到统一。为了解决这个问题，谷歌也是祭出了杀手铜，在2014年Google I/O大会上重磅推出了一套全新的界面设计语言 Material Design。

        本章我们就将对Material Design进行一次深入的学习。

12.1 什么是 Material Design

        Material Design是由谷歌的设计工程师们基于传统优秀的设计原则，结合丰富的创意和科学技术所发明的一套全新的界面设计语言，包含了视觉、运动、互动效果等特性。那么谷歌凭什么认为Material Design就能解决Android平台界面风格不统一的问题呢？ 一言以蔽之， 好看！

        没错，这次谷歌在界面设计上确实是下足了功夫，很多媒体评论，Material Design的出现使得Android首次在UI方面超越了 iOS。按照正常的思维来想，如果各个公司都无法设计出比Material Design更出色的界面风格，那么它们就应该理所当然地使用Material Design来设计界面， 从而也就能解决Android平台界面风格不统一的问题了。

        为了做出表率，谷歌从Android 5.0系统开始，就将所有内置的应用都使用Material Design 风格来进行设计。这里我随便截了两张图，你可以先欣赏一下，如图12.1所示。

         其中，左边的应用是Play Store,右边的应用是YouTubeo可以看出，它们的界面都十分美观，而它们正是使用Material Design来进行设计的。

        不过，在重磅推出之后，Material Design的普及程度却不能说是特别理想。因为这只是一个 推荐的设计规范，主要是面向UI设计人员的，而不是面向开发者的。很多开发者可能根本就搞不清楚什么样的界面和效果才叫Material Design,就算搞清楚了，实现起来也会很费劲，因为不少Material Design的效果是很难实现的，而Android中却几乎没有提供相应的API支持，一切都要靠开发者自己从零写起。

        谷歌当然也意识到了这个问题，于是在2015年的Google I/O大会上推出了一个Design Support库，这个库将Material Design中最具代表性的一些控件和效果进行了封装，使得开发者在即使不了解Material Design的情况下也能非常轻松地将自己的应用Material化。本章中我们就将对Design Support这个库进行深入的学习，并且配合一些其他的控件来完成一个优秀的Material Design 应用。

        新建一个MaterialTest项目，然后我们马上开始吧！

12.2 Toolbar

        Toolbar将会是我们接触的第一个Material控件。虽说对于Toolbar你暂时应该还是比较陌生 的，但是对于它的另一个相关控件ActionBar,你就应该有点熟悉了。

        回忆一下，我们曾经在3.4.1小节为了使用一个自定义的标题栏，而把系统原生的ActionBar 隐藏掉。没错，每个活动最顶部的那个标题栏其实就是ActionBar,之前我们编写的所有程序里 一直都有ActionBar的身影。

        不过ActionBar由于其设计的原因，被限定只能位于活动的顶部，从而不能实现一些Material Design的效果，因此官方现在已经不再建议使用ActionBar To那么本书中我也就不准备再介绍 ActionBar的用法了 ,而是直接讲解现在更加推荐使用的Toolbar。

        Toolbar的强大之处在于，它不仅继承了 ActionBar的所有功能，而且灵活性很高，可以配合 其他控件来完成一些Material Design的效果，下面我们就来具体学习一下。

        首先你要知道，任何一个新建的项目，默认都是会显示ActionBar的，这个想必你已经见识 过太多次了。那么这个ActionBar到底是从哪里来的呢？其实这是根据项目中指定的主题来显示 的，打开AndroidManifest.xml文件看一下，如下所示：

<application
    android :allowBackup=,,true,'
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
</application>

        可以看到，这里使用android: theme属性指定了一个AppTheme的主题。那么这个AppTheme 又是在哪里定义的呢？打开res/values/styles.xml文件，代码如下所示：

<resources>
    <! - - Base application theme.-->
    <style name="AppTheme" parent=HTheme.AppCompat.Light.DarkActionBar,^
        <! - - Customize your theme here.-->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent,,>(aco'lor/colorAccent</item> </style>
</resources>

        这里定义了一个叫AppTheme的主题，然后指定它的parent主题是Theme.AppCompat.Light. DarkActionBaro这个DarkActionBar是一个深色的ActionBar主题，我们之前所有的项目中自带 的ActionBar就是因为指定了这个主题才出现的。

        而现在我们准备使用Toolbar来替代ActionBar,因此需要指定一个不带ActionBar的主题， 通常有 Theme.AppCompat.NoActionBar 和 Theme.AppCompat.Light.NoActionBar 这两种主题可选。 其中Theme.AppCompat.NoActionBar 深色主题，它会将界面的主体颜色设成深色，陪衬颜色 设成淡色。而Theme.AppCompat.Light.NoActionBar表示淡色主题，它会将界面的主体颜色设成 淡色，陪衬颜色设成深色。具体的效果你可以自己动手试一试，这里由于我们之前的程序一直都 是以淡色为主的，那么我就选用淡色主题了，如下所示：

<resources>
    <!- - Base application theme.-->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!- - Customize your theme here.-->
        <item name="colorPrimary">(acolor/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">(aco'Lor/colorAccent</item> </style>
</resources>

        然后观察一下AppTheme中的属性重写，这里重写了 colo「Primary、colorPrimaryDark 和colorAccent这3个属性的颜色。那么这3个属性分别代表着什么位置的颜色呢？我用语言 比较难描述清楚，还是通过一张图来理解一下吧，如图12.2所示。

         可以看到，每个属性所指定颜色的位置直接一目了然了。

        除了上述3个属性之外，我们还可以通过textColorPrimary. windowBackground和 navigationBarColor等属性来控制更多位置的颜色。不过唯独colorAccent这个属性比较难 理解，它不只是用来指定这样一个按钮的颜色，而是更多表达了一个强调的意思，比如一些控件 的选中状态也会使用colorAccent的颜色。

        现在我们已经将ActionBar隐藏起来了，那么接下来看一看如何使用Toolbar来替代 ActionBar0修改activity main.xml中的代码，如下所示：

<FrameLayout 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.v7.widget.Toolbar
        android: idQQ+id/toolbar”
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"             
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</FrameLayout>

        虽然这段代码不长，但是里面着实有不少技术点是需要我们去仔细琢磨一下的。首先看一下 第2行，这里使用xmlns:app指定了一个新的命名空间。思考一下，正是由于每个布局文件都 会使用xmlns:android来指定一个命名空间，因此我们才能一直使用android:id. android: layout width等写法，那么这里指定了 xmlns:app,也就是说现在可以使用app:attribute 这样的写法了。但是为什么这里要指定一个xmlns: app的命名空间呢？这是由于Material Design 是在Android 5.0系统中才出现的，而很多的Material属性在5.0之前的系统中并不存在，那么为 了能够兼容之前的老系统，我们就不能使用android attribute这样的写法了，而是应该使用 app:attributeo

        接下来定义了一个Toolbar控件，这个控件是由appcompat-v7库提供的。这里我们给Toolbar 指定了一个id,将它的宽度设置为match_pa「ent,高度设置为actionBar的高度，背景色设置为 colorPrimaryo不过下面的部分就稍微有点难理解了，由于我们刚才在styles.xml中将程序的主题 指定成了淡色主题，因此Toolbar现在也是淡色主题，而Toolbar±面的各种元素就会自动使用深 色系，这是为了和主体颜色区别开。但是这个效果看起来就会很差，之前使用ActionBar时文字 都是白色的，现在变成黑色的会很难看。那么为了能让Toolbar单独使用深色主题，这里我们使 用 android: theme 属性，将 Toolbar 的主题指定成了 ThemeOverlay.AppCompat.Dark.ActionBaro 但是这样指定完了之后又会岀现新的问题，如果Toolbar中有菜单按钮（我们在2.2.5小节中学 过），那么弹出的菜单项也会变成深色主题，这样就再次变得十分难看，于是这里使用了 app: popupTheme属性单独将弹出的菜单项指定成了淡色主题。之所以使用app: popupTheme, 是因为popupTheme这个属性是在Android 5.0系统中新增的，我们使用app:popupTheme的话 就可以兼容Android 5.0以下的系统了。

        如果你觉得上面的描述很绕的话，可以自己动手做一做试验，看看不指定上述主题会是什么 样的效果，这样你会理解得更加深刻。

写完了布局，接下来我们修改MainActivity,代码如下所示：

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedlnstanceState) {         
    super.onCreate(savedlnstanceState); setContentView(R.layout.activitymain); 
    Toolbar         
    toolbar = (Toolbar) findViewByldfR.id.toolbar); setSupportActionBar(toolbar);
}
}

        这里关键的代码只有两句，首先通过findViewByldO得到Toolbar的实例，然后调用setSupportActionBar()方法并将Toolbar的实例传入，这样我们就做到既使用了 Toolbar,又 让它的外观与功能都和ActionBar —致了。

        现在运行一下程序，效果如图12.3所示。

        这个标题栏我们再熟悉不过了，虽然看上去和之前的标题栏没什么两样，但其实它已经是 Toolbar而不是ActionBar 了。因此它现在也具备了实现Material Design效果的能力，这个我们在 后面就会学到。

        接下来我们再学习一些Toolbar比较常用的功能吧，比如修改标题栏上显示的文字内容。这 段文字内容是在AndroidManifest.xml中指定的，如下所示：

<application
    android:afl owBackup="true"
    android:icon="@mipmap/ic_launche android:'Label=,,@string/app name"         
    android:support5Rtl="true" 
    android: theme="(astyle/AppTheme,,> <activity
    android:name=".MainActivity"
    android:label="Fruits">
    </activity>
</application>

        这里给activity增加了一个android: label属性，用于指定在Toolbar中显示的文字内容， 如果没有指定的话，会默认使用application中指定的label内容，也就是我们的应用名称。

        不过只有一个标题的Toolbar看起来太单调了，我们还可以再添加一些action按钮来让 Toolbar更加丰富一些，这里我提前准备了几张图片来作为按钮的图标，将它们放在了 drawable-xxhdpi目录下。现在右击res目>New~^Directory,创建一个menu文件夹。然后右击 menu文件夹—>New—>Menu resource file,创建一个toolbar.xml文件，并编写如下代码：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
    android:id="@+id/backup"
    android:icon="@drawable/icbackup" android:title="Backup" app:showAsAction="always" />
    <item
    android:id="@+id/delete"
    android:icon="@drawable/ic_delete"
    android:title="Delete"
    app:showAsAction="ifRoom" />
    <item
    android:id="@+id/settings"
    android:icon="@drawable/icsettings"
    android:title="Settings" app:showAsAction="never" />
</menu>

        可以看到，我们通过<item>标签来定义action按钮，android:id用于指定按钮的id, android:icon用于指定按钮的图标，android:title用于指定按钮的文字。

        接着使用app: showAsAction来指定按钮的显示位置，之所以这里再次使用了 app命名空间， 同样是为了能够兼容低版本的系统。showAsAction主要有以下几种值可选：always表示永远显 示在Toolbar中，如果屏幕空间不够则不显示；ifRoom表示屏幕空间足够的情况下显示在Toolbar 中，不够的话就显示在菜单当中；never•则表示永远显示在菜单当中。注意，Toolbar中的action 按钮只会显示图标，菜单中的action按钮只会显示文字。

        接下来的做法就和2.2.5小节中的完全一致了，修改MainActivity中的代码，如下所示：

public class MainActivity extends AppCompatActivity {
public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R・menu.toolbar, menu);

return true;
©Override
public boolean onOptionsItemSelected(Menuitem
switch (item.getltemldO) {
case R.id.backup:
Toast.makeText(this, "You clicked show();
break; case R.id.delete:
Toast.makeText(this, "You clicked show();
break; case R.id.settings:
Toast.makeText(this, "You clicked show();
break; default:
} return true;

        非常简单，我们在onCreateOptionsMenu()方法中加载了 toolbar.xml这个菜单文件，然后 在0nOptionsItemSelected()方法中处理各个按钮的点击事件。现在重新运行一下程序，效果 如图12.4所示。

         可以看到，Toolbar ±面现在显示了两个action按钮，这是因为Backup按钮指定的显示位置

        是always, Delete按钮指定的显示位置是ifRoom,而现在屏幕空间很充足，因此两个按钮都会显 示在Toolbar中。另外一个Settings按钮由于指定的显示位置是never,所以不会显示在Toolbar 中，点击一下最右边的菜单按钮来展开菜单项，你就能找到Settings按钮了。另外这些action按 钮都是可以响应点击事件的，你可以自己去试一试。

        好了，关于Toolbar的内容就先讲这么多吧。当然Toolbar的功能还远远不只这些，不过我们 显然无法在一节当中就把所有的用法全部学完,后面会结合其他控件来挖掘Toolbar的更多功能。

12.3滑动菜单

        滑动菜单可以说是Material Design中最常见的效果之一了，在许多著名的应用（如Gmail、 Google+等）中，都有滑动菜单的功能。虽说这个功能看上去好像挺复杂的，不过借助谷歌提供 的各种工具，我们可以很轻松地实现非常炫酷的滑动菜单效果，那么我们马上开始吧。

1. DrawerLayout

        所谓的滑动菜单就是将一些菜单选项隐藏起来，而不是放置在主屏幕上，然后可以通过滑动 的方式将菜单显示出来。这种方式既节省了屏幕空间，又实现了非常好的动画效果，是Material Design中推荐的做法。

        不过如果我们全靠自己去实现上述功能的话，难度恐怕就很大了。幸运的是，谷歌提供了一 个DrawerLayout控件，借助这个控件，实现滑动菜单简单又方便。

        先来简单介绍一下DrawerLayout的用法吧。首先它是一个布局，在布局中允许放入两个直 接子控件，第一个子控件是主屏幕中显示的内容，第二个子控件是滑动菜单中显示的内容。因此, 我们就可以对activity main.xml中的代码做如下修改：

<android.support.v4・ widget.DrawerLayout xmlns:android=l,http://schemas,         
    android.com/apk/res/android" xmtns:app=ilhttp://schemas .android.com/apk/res-auto"         
    android:id="@+id/d rawe r_layout" android:tayout_width="match_parent" android:     
    layout__height="match_parent">
    <FrameLayout
    android: layout_width=,,match_parent" android: layout_height=,,match_parent">
    <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android: layout_width=,,match_parent"
    android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" 
    android:theme="@style/ThemeOve rlay.AppCompat.Dark.ActionBar" app:     
    popupTheme="（astyle/ThemeOverlay. AppCompat. Light" />
    </FrameLayout>
    <TextView
    android: ■Layout__width="match_parent" android: ■Layout_height="match_parent"     
    android:layout_gravity="start" android:text=HThis is menu"
    android :textSize=l>30sp"
    android:background="#FFF" />
</android.support.v4.widget・ DrawerLayout>

        可以看到，这里最外层的控件使用了 DrawerLayout,这个控件是由support-v4库提供的。 DrawerLayout中放置了两个直接子控件，第一个子控件是FrameLayout,用于作为主屏幕中显 示的内容，当然里面还有我们刚刚定义的Toolbar0第二个子控件这里使用了一个TextView,用 于作为滑动菜单中显示的内容，其实使用什么都可以，DrawerLayout并没有限制只能使用固定 的控件。

        但是关于第二个子控件有一点需要注意，layout_gravity这个属性是必须指定的，因为我 们需要告诉DrawerLayout滑动菜单是在屏幕的左边还是右边，指定left表示滑动菜单在左边，指 定right表示滑动菜单在右边。这里我指定了 start,表示会根据系统语言进行判断，如果系统语 言是从左往右的，比如英语、汉语，滑动菜单就在左边，如果系统语言是从右往左的，比如阿拉 伯语，滑动菜单就在右边。

        没错，只需要改动这么多就可以了，现在重新运行一下程序，然后在屏幕的左侧边缘向右拖 动，就可以让滑动菜单显示出来了，如图12.5所示。

         然后向左滑动菜单，或者点击一下菜单以外的区域，都可以让滑动菜单关闭，从而回到主界 面。无论是展示还是隐藏滑动菜单，都是有非常流畅的动画过渡的。

        可以看到，我们只是稍微改动了一下布局文件，就能实现如此炫酷的效果，是不是觉得挺激 动呢？不过现在的滑动菜单还有点问题，因为只有在屏幕的左侧边缘进行拖动时才能将菜单拖 出来，而很多用户可能根本就不知道有这个功能，那么该怎么提示他们呢？

        Material Design建议的做法是在Toolbar的最左边加入一个导航按钮，点击了按钮也会将滑 动菜单的内容展示出来。这样就相当于给用户提供了两种打开滑动菜单的方式，防止一些用户不 知道屏幕的左侧边缘是可以拖动的。

        下面我们开始来实现这个功能。首先我准备了一张导航按钮的图标ic_menu.png,将它放在 T drawable-xxhdpi目录下。然后修改MainActivity中的代码，如下所示：

public class MainActivity extends AppCompatActivity {
private DrawerLayout mDrawerLayout;
@0verride
protected void onCreate(Bundle savedlnstanceState) { super.onCreate(savedlnstanceState); setContentView(R.layout.activitymain); Toolbar toolbar = (Toolbar) findViewByld(R.id.toolbar); setSupportActionBar(toolbar);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true); actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
} _
}
(aOverride
public boolean onOptionsItemSelected(Menuitem item) { switch (item.getltemld()) {
case and roid.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START); break;
default:
}
return true;
}
}

        这里我们并没有改动多少代码，首先调用findViewByldO方法得到了 DrawerLayout的实 例，然后调用getSupportActionBar()方法得到了 ActionBar的实例，虽然这个ActionBar的具 体实现是由Toolbar来完成的。接着调用ActionBar的setDisplayHomeAsUpEnabled()方法让导 航按钮显示出来，又调用了 setHomeAsUpIndicator()方法来设置一个导航按钮图标。实际上， Toolbar最左侧的这个按钮就叫作HomeAsUp按钮，它默认的图标是一个返回的箭头，含义是返 回上一个活动。很明显，这里我们将它默认的样式和作用都进行了修改。

        接下来在onOptionsItemSelectecK)方法中对HomeAsUp按钮的点击事件进行处理， HomeAsUp按钮的 id永远都是 android .R.id. home0 然后调用 DrawerLayout 的 openDrawer() 方法将滑动菜单展示出来，注意openDrawer()方法要求传入一个Gravity参数，为了保证这里 的行为和XML中定义的一致，我们传入了 GravityCompat.STARTo

        现在重新运行一下程序，效果如图12.6所示。

        可以看到，在Toolbar的最左边出现了一个导航按钮，用户看到这个按钮就知道这肯定是可 以点击的。现在点击一下这个按钮，滑动菜单界面就会再次展示出来了。

1. NavigationView

        目前我们已经成功实现了滑动菜单功能，其中滑动功能已经做得非常好了，但是菜单却还很 丑,毕竟菜单页面仅仅使用了一个TextView,非常单调。有对比才会有落差，我们看一下Google+ 的滑动菜单页面是长什么样的，如图12.7所示。

        经过对比之后是不是觉得我们的滑动菜单页面更丑了？不过没关系，优化滑动菜单页面，这 就是我们本小节的全部目标。

        事实上，你可以在滑动菜单页面定制任意的布局，不过谷歌给我们提供了一种更好的方法一一 使用NavigationView o Navigation View是Design Support库中提供的一个控件，它不仅是严格按 照Material Design的要求来进行设计的，而且还可以将滑动菜单页面的实现变得非常简单。接下 来我们就学习一下NavigationView的用法。

        首先，既然这个控件是Design Support库中提供的，那么我们就需要将这个库引入到项目中 才行。打开app/build.gradle文件，在dependencies闭包中添加如下内容：

dependencies (
    compile fileTree(dir: 'libs 1, include: ['*.jar1])
    compile 'com.android.support:appcompat-v7:24.2.1' testCompile 'junit:junit:4.12'
    compile 'com・android.support:design:24.2.1* compile 'de・    
    hdodenhof:circleimageview:2.1.0*
}

        这里添加了两行依赖关系，第一行就是Design Support库，第二行是一个开源项目 CirclelmageView,它可以用来轻松实现图片圆形化的功能,我们待会就会用到它o Circlelmage View 的项目主页地址是：https://github.com/hdodenhof7CirclelmageViewo

        在开始使用NavigationView之前，我们还需要提前准备好两个东西：menu和headerLayouto menu是用来在NavigationView中显示具体的菜单项的，headerLayout则是用来在NavigationView 中显示头部布局的。

        我们先来准备menu,这里我事先找了几张图片来作为按钮的图标，并将它们放在了

        drawable-xxhdpi 目录下。然后右击 menu 文件夹—New—>Menu resource file ,创建一个 nav menu.xml文件，并编写如下代码：

<menu xmlns:android="http://schemas.android.com/apk/res/android">

<group android:checkableBehavior="single">

<item

and roid: id=,,@+id/nav_call"

android:icon="@drawable/nav_call"

android:title="Call" />

<item

android:id="@+id/nav_friends"

android: icon="(acl rawable/navf riends" android:title="Friends" />

<item

and roid: id="@+id/nav_'location"

android:icon="@drawable/nav_location"

android:title="Location" />

<item

android: id="(a+icl/nav_mail"

and roid: icon="(ad rawable/navmail"

android:title="Mail" />

<item

android: id=,,(a+id/nav_task"

android: icon=n(aclrawable/nav_task"

android:tifle="Tasks" />

</group>

</menu>

        我们首先在<menu>中嵌套了一个<group>标签，然后将group的checkableBehavior属性 指定为single。group表示一个组，checkableBehavior指定为single表示组中的所有菜单 项只能单选。

        那么下面我们来看一下这些菜单项吧。这里一共定义了 5个item,分别使用android:id属 性指定菜单项的id, android:icon属性指定菜单项的图标，android:title属性指定菜单项显 示的文字。就是这么简单，现在我们已经把menu准备好了。

        接下来应该准备headerLayout