Design Support Library 相关知识

1 背景

上周一年一度的Google IO全球开发者大会刚刚结束，Google在Android这块除过一些优化没有太大亮点。在Android Developer和Android Developer Blog上看了下相关介绍，Google升级了新的Support Library。因此在这里咱们就来率先体验一把吧（这篇文章再草稿箱呆了三四天了。。。。终于有时间让她见天日了）。

先看一下Demo演示效果图，彻底使用了Google IO 2015的Design Support Library的控件进行代码编写。以下：

下载Demo请点击：Design Support Library Demo

2 Design Support Library使用介绍

2-1 综述

支持Android 2.1以上设备。

Gradle build script dependency：

compile 'com.android.support:design:22.2.0' //可修改版本号为本身匹配

Design Support Library包含8个控件，具体以下：

Widget Name	Description
android.support.design.widget.TextInputLayout	强大带提示的MD风格的EditText
android.support.design.widget.FloatingActionButton	MD风格的圆形按钮，来自于ImageView
android.support.design.widget.Snackbar	相似Toast，添加了简单的单个Action
android.support.design.widget.TabLayout	选项卡
android.support.design.widget.NavigationView	DrawerLayout的SlideMenu
android.support.design.widget.CoordinatorLayout	超级FrameLayout
android.support.design.widget.AppBarLayout	MD风格的滑动Layout
android.support.design.widget.CollapsingToolbarLayout	可折叠MD风格ToolbarLayout

下面详细说说这些控件的特性和使用注意项。

2-2 TextInputLayout控件

在MD中，使用TextInputLayout将EditText进行了封装，提示信息会变成一个显示在EditText之上的floating label，这样用户就始终知道他们如今输入的是什么，并且过分动画是平滑的。还能够在下方经过setError设置Error提示，使用比较简单，因此不作过多说明，详情见Demo源码。

注意项：

TextInputLayout中至少嵌套一个EditText。

2-3 FloatingActionButton控件

一个负责显示界面基本操做的圆形按钮。Design library中的FloatingActionButton 实现了一个默认颜色为主题中colorAccent的悬浮操做按钮。除了通常大小的悬浮操做按钮，它还支持mini size（fabSize=”mini”）。FloatingActionButton继承自ImageView，你可使用android:src或者 ImageView的任意方法，好比setImageDrawable()来设置FloatingActionButton里面的图标。

无特别注意项，和普通控件相似。

2-4 Snackbar控件

Snackbar为一个操做提供轻量级、快速的反馈。Snackbar显示在屏幕的底部（有MD动画效果浮现和消失），包含了文字信息与一个可选的操做按钮。在指定时间结束以后自动消失。另外，用户还能够在超时以前将它滑动删除。Snackbar被看做是比Toast更强大的快速反馈机制，你会发现他们的API很是类似。你应该注意到了make()方法中把一个View做为第一个参数（Snackbar试图找到一个合适的父亲以确保本身是被放置于底部）。

无特殊注意项，和Toast相似。

2-5 TabLayout控件

经过选项卡的方式切换View并非MD中才有的新概念，它们和顶层导航模式或者组织app中不一样分组内容（好比，不一样风格的音乐）是同一个概念。 Design library的TabLayout 既实现了固定的选项卡（View的宽度平均分配），也实现了可滚动的选项卡（View宽度不固定同时能够横向滚动）。若是你使用ViewPager在 tab之间横向切换，你能够直接从PagerAdapter的getPageTitle() 中建立选项卡，而后使用setupWithViewPager()将二者联系在一块儿。它可使tab的选中事件能更新ViewPager,同时 ViewPager 
的页面改变能更新tab的选中状态。

注意项：

若是你使用ViewPager在tab之间横向切换，切记能够直接从PagerAdapter的getPageTitle() 中建立选项卡，而后使用setupWithViewPager()将二者联系在一块儿。

2-6 NavigationView控件

抽屉导航是app识别度与内部导航的关键，保持这里设计上的一致性对app的可用性相当重要，尤为是对于第一次使用的用户。 NavigationView 经过提供抽屉导航所需的框架让实现更简单，同时它还可以直接经过菜单资源文件直接生成导航元素。把NavigationView做为 DrawerLayout的内容视图来使用。NavigationView处理好了和状态栏的关系，能够确保NavigationView在API21+ 设备上正确的和状态栏交互。

注意项：

你能够经过设置一个OnNavigationItemSelectedListener，使用其 setNavigationItemSelectedListener()来得到元素被选中的回调事件。它为你提供被点击的菜单元素，让你能够处理选择事件、改变复选框状态、加载新内容、关闭导航菜单，以及其余任何你想作的操做。你会注意到NavigationView的两个新自定义属性以下：

new attr	description
app:headerLayout	控制头部的布局
app:menu	导航菜单的资源文件（也能够在运行时配置）

2-7 CoordinatorLayout控件

手势,及滚动布局，MD的手势有不少组成部分，包括touch ripples和meaningful transitions。Design library引入了CoordinatorLayout，一个从另外一层面去控制子view之间触摸事件的布局，Design library中的不少控件都利用了它。一个很好的例子就是当你将FloatingActionButton做为一个子View添加进 CoordinatorLayout而且将CoordinatorLayout传递给 Snackbar.make()，在3.0及其以上的设备上，Snackbar不会显示在悬浮按钮的上面，而是FloatingActionButton 利用CoordinatorLayout提供的回调方法，在Snackbar以动画效果进入的时候自动向上移动让出位置，而且在Snackbar动画地消失的时候回到原来的位置，不须要额外的代码。

CoordinatorLayout的另外一个用例是ActionBar与滚动技巧。你可能已经在本身的布局中使用了Toolbar ，它容许你更加自由的自定义其外观与布局的其他部分融为一体。Design library把这种设计带到了更高的水平，使用AppBarLayout可让你的Toolbar与其余View（好比TabLayout的选项卡）能响应被标记了ScrollingViewBehavior的View的滚动事件。

注意项：

当用户滚动RecyclerView，AppBarLayout能够这样响应滚动事件：

根据子view的滚动标志（scroll flag）来控制它们如何进入（滚入屏幕）与退出（滚出屏幕）。

Flag包括：

• scroll：全部想滚动出屏幕的View都须要设置这个flag，没有设置这个flag的View将被固定在屏幕顶部。
• enterAlways：这个flag让任意向下的滚动都会致使该View变为可见，启用快速“返回模式”。
• enterAlwaysCollapsed：当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
• exitUntilCollapsed：this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting。

特别注意：全部使用scroll flag的View都必须定义在没有使用scroll flag的View前面，这样才能确保全部的View从顶部退出，留下固定的元素。

PS一句：CoordinatorLayout还提供了layout_anchor和layout_anchorGravity属性一块儿配合使用，能够用于放置floating view，好比FloatingActionButton与其余View的相对位置。相见Demo中演示。

2-8 AppBarLayout控件

这个没啥解释的，就是一个ViewGroup，配合ToolBar与CollapsingToolbarLayout等使用。就是一个纯容器类。

无特殊注意项。

2-9 CollapsingToolbarLayout控件

可伸缩折叠的Toolbar （Collapsing Toolbar），直接添加Toolbar到AppBarLayout可让你使用enterAlwaysCollapsed和 exitUntilCollapsedscroll标志，可是没法控制不一样元素如何响应collapsing的细节。这里使用了 CollapsingToolbarLayout的app:layout_collapseMode=”pin”来确保Toolbar在view折叠的时候仍然被固定在屏幕的顶部。还能够作到更好的效果，当你让CollapsingToolbarLayout和Toolbar在一块儿使用的时候，title 会在展开的时候自动变得大些，而在折叠的时候让字体过渡到默认值。必须注意，在这种状况下你必须在CollapsingToolbarLayout上调用 setTitle()，而不是在Toolbar上。除了固定住View，你还可使用 app:layout_collapseMode=”parallax”（以及使用 app:layout_collapseParallaxMultiplier=”0.7”来设置视差因子）来实现视差滚动效果（好比 CollapsingToolbarLayout里面的一个ImageView），这中状况和CollapsingToolbarLayout的 app:contentScrim=”?attr/colorPrimary”属性一块儿配合更完美。

有一件事情必须注意，那就是CoordinatorLayout并不知道FloatingActionButton或者AppBarLayout的内部工做原理，它只是以Coordinator.Behavior的形式提供了额外的API，该API可使子View更好的控制触摸事件与手势以及声明它们之间的依赖，并经过onDependentViewChanged()接收回调。

可使用CoordinatorLayout.DefaultBehavior(你的View.Behavior.class)注解或者在布局中使用app:layout_behavior=”com.example.app.你的View$Behavior”属性来定义view的默认行为。 framework让任意View和CoordinatorLayout结合在一块儿成为了可能。

注意项：

注意项上面描述部分已经声明，不须要额外说明。