Meterial Design最佳体验(1)：
使用Toolbar, CoordinatorLayout, AppBarLayout等实现精美标题栏
作者：
蒋东国
时间：
2017年03月10日 星期五
应用来源：
路痴宝v1.2 (三星C9 Pro)
博客地址：
http://blog.csdn.net/andrexpert/article/details/61236581
情景再现：“Material Design是Google在2014年的I/O大会提出的一套全新的界面设计语言，它包含了视觉、运动、互动效果等特性，其宗旨就是解决Android平台界面风格不统一的问题。虽然Material Design是一套界面设计语言，但为了方便APP开发，Google提供了一个Design Support库，这个库对一些常见的控件和效果进行了封装，使开发工程师在在不了解Material Design的情况下能够将自己的应用Material化。”
Material Design特有的设计风格和理念，它给人以精致的美观和良好的体验。自Android 5.0推出以后，不仅谷歌将所有的系统APP使用Material Design风格，软件市场上越来越多的APP也Material化，可见Material Design风格将是未来Android APP追求良好体验的必然趋势。为了使我们的APP也能够Material化，Google官方给出了几点建议：
(1) 遵从Material Design设计原则，部署平台高于Android 5.0；
(2) 使用Material主题；
(3) 使用Desugn Support库等Material风格组件，比如RecyclerView、CardView等；
(4) 使用自定义的shadows和animation……等等。
当然，在学习Material Design之前，我们从最新版QQ(v6.6.9)和摩拜单车借用几张图来感受一样Material Design风格所带来的魅力-侧滑菜单、侵入式带可收缩标题栏。
好了，在了解Material Design是什么东西之后，接下来就应该上干货了。今天主要讲解如何使用Toolbar、AppBarLayout、Coordinater、CollapsingToolbarLayout控件实现一个如摩拜单车样的侵入式带可折叠效果的标题栏，它们分别出自于SDK自带的库appcompat-v7-24.2.1、design-24.2.1。对于Android Studio开发环境来说，我们只需在buid.gradle文件的依赖中添加如下代码：
compile'com.android.support:appcompat-v7:24.+' compile'com.android.support:design:24.2.1'1. 创建自定义Material主题
由于新建的Android项目项目会指定一个默认的主题，这个主题是不具备Material效果而且带默认ActionBar。为此，我们需要使用Material提供的不带ActionBar的主题替换默认主题，新的Material主题会给我们带来诸如Activity切换动画，为系统组件渲染指定颜色、添加系统组件操作动画等效果。
(1) /res/values/style.xml：创建自定义Material风格主题App，它继承于Support-v7库中定义的Material风格theme，具体代码如下：
<resources> <!-- application materialdesign theme. --> <style name="CustomAppTheme"parent="android:Theme.Material.Light.NoActionBar"> <!—以下属性定义(颜色调色板)--> <item name=" android: colorPrimary">@color/colorPrimary</item> <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item> <item name="android:colorAccent">@color/colorAccent</item> <item name="android:textColorPrimary">@color/textColorPrimary</item> <item name="android:windowBackground">@color/windowBackground</item> <item name="android:navigationBarColor">@color/navigationBarColor</item> </style> </resources>其中，colorPrimary用于指定标题栏背景颜色；colorPrimaryDark属性用于指定状态栏背景颜色；colorAccent指定诸如chexkboxes、text点击效果；textColorPrimary属性用于指定标题栏标题字体颜色；windowBackground属性指定内容区背景颜色；navigationBarColor属性指定导航栏背景颜色….(详见sdk/docs/preview/material/theme.html)。当然，还有很多属性未列举，可以根据自身需求进行深度定制。需要注意的是，Support-v7库提供的系列Material主题必须在minSdkVersion大于5.0 (API21)基础上使用。当然，我们也可以让CustomAppTheme继承于"Theme.AppCompat.Light.NoActionBar"，上述定制的颜色风格仍然有效。
(2) AndroidManifest.xml：使用自定义Material风格主题
<application android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:theme="@style/ CustomAppTheme "> ……. </application>2. 自定隐藏式标题栏实现
看下运行效果：
那么，我们就来详细了解下Toolbar、AppBarLayout、CoordinatorLayout在这里面都扮演了些什么样的角色。
(1) android.support.v7.widget.Toolbar
Toolbar是android-support-v7库提供的一个具有Material特性的控件，它不仅继承了ActionBar的所有功能，并且与ActionBar只能固定在顶部不同的是，Toolbar可以随便移动，并且可以同其他控件实现一些Material Design效果。简单介绍了Toolbar控件后，接下来就是如何去使用Toolbar作为Activity的标题栏。首先，activity_main.xml文件中添加Toolbar控件：
<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:id="@+id/main_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </ FrameLayout>其中，android:layout_height="?attr/actionBarSize"属性指定Toolbar标题栏的高度；android:theme用于指定Toolbar上元素的主题风格，这里使用Dark深色风格目的是与Toolbar主题的Light浅色风格区分开来；app:popupTheme属性用于指定弹出菜单项的主题风格。然后，我们就可以在MainActivity中使用定义的Toolbar，具体代码如下：
Toolbar mToolbar = (Toolbar)findViewById(R.id.main_toolbar); //设置Activity的标题栏ActionBar为Toolbar setSupportActionBar(mToolbar); //使能Home键 ActionBaractionBar = getSupportActionBar(); if(actionBar!= null){ actionBar.setDisplayHomeAsUpEnabled(true); actionBar.setHomeButtonEnabled(true); }当然，我们也可以像系统自带的ActionBar样为标题栏添加菜单项，即在res/menu目录下创建menu_toolbar.xml，并使用app:showAsAction属性来指定每个item按钮显示的位置。其中，always表示永远显示在标题栏上；ifRoom表示按钮在空间足够时显示在标题栏上，否则隐藏到菜单栏中；never表示永远隐藏在菜单栏中。具体配置代码如下：
<?xmlversion="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <itemandroid:id="@+id/menu_personal" android:title="个人主页" android:icon="@drawable/ic_personal" app:showAsAction="always"/> <itemandroid:id="@+id/menu_clear" android:title="清空" android:icon="@drawable/ic_clear" app:showAsAction="ifRoom"/> <itemandroid:id="@+id/menu_more" android:title="更多" android:icon="@drawable/ic_more" app:showAsAction="never"/> </menu>(2) android.support.design.widget.CoordinatorLayout
经过步骤(1)，我们已经成功地将系统自带的ActionBar替换成Toolbar，但是如果仅仅是做个替换那就太没意义了。既然要实现一个Material化的标题栏，那么就应该尽量使用具有Material特性的控件。非常明显，FramLayout就是“开刀”的对象，我们使用support-design库中的CoordinatorLayout来替换。CoordinatorLayout可以说是一个加强版的FrameLayout，在普通情况下它的功能与FrameLayout一致。由于CoordinatorLayout控件由Design Support库提供，自然具有Material Design风格特性，并且它还能够能够监听其所有子控件的各种事件，然后自动根据当前布局情况作出合理的响应。为了体现CoordinatorLayout的强大，这里使用Support-design库提供的FloatingActionButton、Snackbar控件来进行演示。其中，Snackbar类似于Toast，但是它允许在提示用户的基础上添加一个可交互按钮；FloatingActionButton是一种悬浮按钮，它默认使用CustomAppTheme主题中定义的colorAccent来作为按钮的颜色。
<?xml version="1.0"encoding="utf-8"?> <android.support.design.widget.CoordinatorLayoutxmlns: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:id="@+id/main_toolbar" ……/> <android.support.design.widget.FloatingActionButton android:id="@+id/main_delete_float_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_marginBottom="13dp" android:layout_marginRight="13dp" android:scaleType="centerCrop" android:src="@drawable/ic_choose" app:elevation="10dp" /> </android.support.design.widget.CoordinatorLayout>其中，app:elevation="10dp"属性用于设置FloatingActionButton控件高度，高度值越大，投影范围也就越大。我们使当点击悬浮按钮时，弹出一个Snackbar提示，使用CoordinatorLayout前后效果如下图(a)、(b)所示。由图(a)可知，Snackbar提示条将悬浮菜单覆盖住了，这是由于FrameLayout的布局特性所决定的；而对于图(b)可知，当弹出Snackbar时， FloatingActionButton自动向上移动距离布局边缘的同等距离，这是因为CoordinatorLayout能够自动根据当前布局情况对所有子控件作出合理的响应。MainActivity中相关代码：
FloatingActionButton mBtnDeleteData =(FloatingActionButton) findViewById(R.id.main_delete_float_btn); mBtnDeleteData.setOnClickListener(newView.OnClickListener() { @Override public voidonClick(View view) { Snackbar.make(view, "删除数据", Snackbar.LENGTH_SHORT).setAction("取消", new View.OnClickListener() { @Override public void onClick(View v) { } }).show(); } });(3) android.support.design.widget.AppBarLayout
到这里，一个精致Material风格的标题栏看似已经实现了，那么，接下来我们就向Activity的内容区填充数据吧。我们使用RecyclerView和CardView来枚举内部存储器所有视频列表，由于篇幅原因具体实现就在下一篇博文中介绍。从图(a)的效果来看，视频列表完全把标题栏覆盖了，这是由于CoordinatorLayout本身就是FrameLayout的强化版，FrameLayout在不进行明确定位的情况下默认都会摆放在布局的左上角。为了解决这个问题，我们使用Support-design库中提供的AppBarLayout来解决。AppBarLayout实际上是一个垂直方向的LinearLayout，它在内部做了很多滚动时间的封装，并应用了一些Material Design设计理念。使用方法如下：
<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="wrap_content"> <!—Toolbar添加app: layout_scrollFlags --> <android.support.v7.widget.Toolbar ….. app:layout_scrollFlags="scroll|snap|enterAlways" …../> </android.support.design.widget.AppBarLayout> <!—RecyclerView添加app:layout_behavior --> <android.support.v7.widget.RecyclerView android:id="@+id/main_pic_list" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> <android.support.design.widget.FloatingActionButton android:id="@+id/main_delete_float_btn" ….. /> </android.support.design.widget.CoordinatorLayout>我们定义一个AppBarLayout，将Toolbar放置在AppBarLayout中，就可以解决Toolbar被RecyclerView遮挡的问题。但是，还不能够使Toolbar跟随RecyclerView滚动而变化。事实上，当为RecyclerView添加app:layout_behavior="@string/appbar_scrolling_view_behavior"属性后，RecyclerView滚动的时候就已经将滚动事件都通知了AppBarLayout，只是我们还没有进行处理而已，这里就需要为Toolbart添加app: layout_scrollFlags属性，该属性用于实现当AppBarLayout接收到RecyclerView的滚动事件后，它内部的子控件如何对这些事件作出相应的反应。其中，scroll表示当RecyclerView向上滚动时，Toolbar会跟着一起向上滚动并隐藏；enterAlways表示当RecyclerView向下滚动时，Toolbar会跟着一起向下滚动并显示；snap表示当Toolbar还没有完全隐藏或者显示时，会根据当前滚动的距离，自动选择是隐藏还是显示。
3. 可折叠式标题栏实现
运行效果演示：
使用Toolbar实现的标题栏看上去和传统的ActionBar区别不大，只不过Toolbar可以相应RecyclerView的滚动事件进行隐藏和显示。为了实现可折叠的标题栏，这里使用support-design库提供的CollapsingToolbarLayout控件。CollapsingToolbarLayout是一个作用在Toolbar基础之上的布局，它不仅能够展示一个标题，而且可以让Toolbar效果变得更加的丰富。需要注意的是，CollapsingToolbarLayout是不能单独使用的，它在设计时只能作为AppBarLayout的直接子布局来使用，而AppBarLayout又必须是CoordinatorLayout的子布局。
(1) 可折叠标题栏界面代码
<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/personal_info_appBar" android:layout_width="match_parent" android:layout_height="250dp"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/personal_info_collapsingbar_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:contentScrim="@color/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/personal_info_bar_background" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/personal_info_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.design.widget.CoordinatorLayout>其中，AppBarLayout标签中使用android:layout_height="250dp"用于设定标题栏可扩展的高度；CollapsingToolbarLayout标签中使用app:contentScrim属性用于指定CollapsingToolbarLayout在趋于折叠状态以及之后的背景颜色、app:layout_scrollFlags属性用于指定接收到NestedScrollView传递的滚动事件后作出何种相应，其中，scoll表示CollapsingToolbarLayout会随着NestedScrollView的滚动一起滚动，exitUntilCollapsed表示当CollapsingToolbarLayout随着滚动完成折叠之后就保留在界面上，不再移除屏幕；ImageView标签即为可折叠标签栏的背景图片，Toolbar标签就是折叠以后的标题栏了，它们都使用了同一个属性-app:layout_collapseMode，该属性用于指定当前控件在CollapsingToolbarLayout控件折叠过程中的折叠模式，其中Toolbar指定成pin，表示在折叠的过程中位置始终保持不便，ImageView指定成parallax，表示在折叠的过程中产生一定的错位偏移。
(2) 内容详情界面代码
内容详情界面最外布局使用了一个NestedScrollView，它是和AppBarLayout平级的并同属于CoordinatorLayout 的子控件。NestedScrollView是ScrollView的扩展，它不仅允许使用滚动的方式来查看屏幕以外的数据，并且还增加了嵌套响应滚动事件的功能。由于CoordinatorLayout 本身已经可以响应滚动事件了，因此我们在它的内部就需要使用NestedScrollView或RecyclerView来生成滚动事件，通过app:layout_behavior属性来指定一个布局行为，这里指定的是appbar来执行响应NestedScrollView产生的滚动事件。
<android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="15dp" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_marginTop="35dp" app:cardCornerRadius="4dp"> <TextView android:id="@+id/personal_info_detail_tv" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="16sp" android:layout_margin="7dp" /> </android.support.v7.widget.CardView> </LinearLayout> </android.support.v4.widget.NestedScrollView> (3) 悬浮按钮
通过运行效果gif图可知，在标题栏的右下角会有一个悬浮按钮，用于跳转到路痴宝的下载界面。FloatingActionButton也和AppBarLayout、NestedScrollView平级的并同属于CoordinatorLayout 的子控件。FloatingActionButton中使用app:layout_anchor属性指定了一个锚点，我们将锚点设置为AppBarLayout的ID，这样悬浮按钮就会出现在标题栏的区域内；使用app:layout_anchorGravity属性将悬浮按钮定位在标题栏区域的右小角。
<!--悬浮在标题栏的按钮--> <android.support.design.widget.FloatingActionButton android:id="@+id/personal_info_float_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:src="@mipmap/download" app:layout_anchor="@id/personal_info_appBar" app:layout_anchorGravity="bottom|end" />
码字不易，转载请声明出处：http://blog.csdn.net/andrexpert/article/details/61236581
最后的话：“本文对Material Design进行了简单的介绍，并详细阐述了support-v7、support-design库中CoordinatorLayout、AppBarLayout、Toolbar、CollapsingToolbarLayout、 NestedScrollView、FloatingActionButton等Material风格控件的特性和使用方法。由于篇幅不能太长，文中提及的RecyclerView、CardView、视频缩略图的获取等相关和Demo将再“Material Design最佳体验(2)：使用RecyclerView、CardView、SwipeRefreshLayout实现下拉刷新列表中给出。" 关于Demo：第三部分Demo-可折叠式标题栏实现Demo
