Android最新支持包Design简介

Android 5.0 Lollipop 是曾经最著名的 Android 发布之一，这样说很大一部分原因是材料设计的引入，而材料设计则是一种刷新了整个 Android 体验的设计语言。这个 详细说明 是开始适应材料设计的好地方，但是也可以理解，材料设计对于开发人员来说是一个巨大的挑战，尤其是关注应用向后兼容的开发人员。有了来自Android Design Support Library 的些许帮助，给所有的开发人员和所有 Android 2.1+的设备带来了大量非常重要的材料设计构件。你将发现诸如抽屉导航视图，带有浮动标签的 EditText ， FloatingActionButton ， snackbar ， tab 和把他们联系在一起的动作和激动框架。

NavigationView

导航抽屉能够成为应用内标识和导航的非常重要的焦点，设计的一致性也对于应用的导航是多么地容易产生了重要的影响，尤其是对于小白用户。 NavigationView 通过提供一种框架，使得这种想法更加容易实现。而这个框架则满足了你对于导航抽屉和通过 menu 资源填充导航 item 的能力的需要。

你可以像这样在布局文件中把 NavigationView 作为 DrawerLayout 的抽屉内容视图：

 1 <android.support.v4.widget.DrawerLayout
 2         xmlns:android="http://schemas.android.com/apk/res/android"
 3         xmlns:app="http://schemas.android.com/apk/res-auto"
 4         android:layout_width="match_parent"
 5         android:layout_height="match_parent"
 6         android:fitsSystemWindows="true">
 7     <!-- your content layout -->
 8     <android.support.design.widget.NavigationView
 9             android:layout_width="wrap_content"
10             android:layout_height="match_parent"
11             android:layout_gravity="start"
12             app:headerLayout="@layout/drawer_header"
13             app:menu="@menu/drawer"/>
14 </android.support.v4.widget.DrawerLayout>

你可能会注意到 NavigationView 的两个属性： app:headerLayout 控制用于 header的可选布局。 app:menu 是用于填充导航项的菜单资源，同时也可以在运行时更新导航项内容。 NavigationView 为你提供状态栏的纱布保护，以确保 NavigationView 与状态栏在 API 21+ 的设备上准确地进行交互。

最简单的抽屉菜单是一系列 checkable 菜单项的集合：

 1 <group android:checkableBehavior="single">
 2     <item
 3         android:id="@+id/navigation_item_1"
 4         android:checked="true"
 5         android:icon="@drawable/ic_android"
 6         android:title="@string/navigation_item_1"/>
 7     <item
 8         android:id="@+id/navigation_item_2"
 9         android:icon="@drawable/ic_android"
10         android:title="@string/navigation_item_2"/>
11 </group>

checked 项将会在导航抽屉里面高亮显示，以确保用户知道哪个导航项在当前情况下是选中的。

你也可以在 menu 中使用 subheader 来分割导航项群组：

 1 <item
 2     android:id="@+id/navigation_subheader"
 3     android:title="@string/navigation_subheader">
 4     <menu>
 5         <item
 6             android:id="@+id/navigation_sub_item_1"
 7             android:icon="@drawable/ic_android"
 8             android:title="@string/navigation_sub_item_1"/>
 9         <item
10             android:id="@+id/navigation_sub_item_2"
11             android:icon="@drawable/ic_android"
12             android:title="@string/navigation_sub_item_2"/>
13     </menu>
14 </item>

你可以通过使用 setNavigationItemSelectedListener() 方法设置OnNavigationItemSelectedListener 来获取已选中项的回调。它向你提供了被点击的MenuItem, 以允许你处理选中事件，改变被选中状态，加载新的内容，通过代码关闭抽屉，或者任何你想要的事件。

可编辑文本的浮动标签

即便是最低下的 EditText ，在材料设计中也有改进的空间。在单个 EditText 首个字符输入之后，提示文本将会被隐藏，但是现在你可以把提示文本包裹在TextInputLayout 里面，使得提示文本成为 EditText 上面的浮动标签，以确保用户从不丢失他们正在输入的上下文环境。

除了展示提示信息之外，你也可以通过调用 setError() 在 EditText 下面展示错误信息。

FloatingActionButton

漂浮动作按钮是一个在交互界面上提供基本动作的圆形按钮。 Design 包中的FloatingActionButton 向你提供了单个一致的实现，默认情况下是涂上了主题中的colorAccent 颜色。

漂流动作按钮除了有正常尺寸外，它还在拥有其它元素时可视化持续性非常挑剔的时候支持迷你尺寸（ fabSize= ”mini”）。因为 FloatingActionButton 扩展自 ImageView，所有的你也可以使用 android:src ，或者其它任何诸如 setImageDrawable() 的方法来控制显示在 FloatingActionButton 里面的图标。

Snackbar

对操作提供轻量级的快速反馈是使用 snackbar 的绝佳时机。 Snackbar 展示在屏幕询问，包含了支持可选的单动作的文本。它们在给定时间之后自动超时，并以动画的形式离开屏幕。此外，用户也可以在超时之前通过滑动将其消失。

查看Snackbar效果请点击（打不开时候注意FQ）

拥有通过滑动或者动作来与之交互的能力， Snackbar 显然拥有比 toast 更加强大的能力，和别外一种轻量级的反馈机制。然而，你会发现 API 其实对你而言非常熟悉：

1 Snackbar
2   .make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG)
3   .setAction(R.string.snackbar_action, myOnClickListener)
4   .show(); // Don’t forget to show!

你会注意到 make() 方法的第一个参数 View 的使用— Snackbar 将尝试找到自己视图的恰当父视图来确保自己显示在底部。

Tabs

在应用中通过 Tab 在不同视图中间切换对于材料设计而言并非一个新的概念，他们等同于主页的顶级导航模式或者在应用内组织不同群组的内容（例如，不同风格的音乐）。

Design 包中的 TabLayout 既然实现了固定 Tab ，也实现了滚动 Tab 。对于前者，视图的宽度在所有 Tab 之间等分，而对于后者， Tab 并没有统一的尺寸，而且可以横向滚动。 Tab 可以通过代码添加：

1 TabLayout tabLayout = ...; 2 tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

然而，如果你正在使用 ViewPager 在 Tab 之间横向分页，你可以直接从PagerAdapter 的 getPageTitle() 方法创建 tab ，然后使用 setupWithViewPager() 方法将 ViewPager 和 Tab 联系起来。这样就确保了 tab 选中事件更新了 ViewPager ，而分页更新了选中的 tab 。

CoordinatorLayout ，动作和滚动

不只独特的视角是材料设计中的一部分：动作（ motion ）也是造就伟大材料设计应用的重要部分。在材料设计中拥有大量诸如触摸涟漪效果和有意思的活动过渡效果等动作的同时， Design 包引进了 CoordinatorLayout ，这个布局提供了对子视图之间触摸事件的更高层次的控件，也引进了一些 Design 包中许多构件充分利用的东西。

CoordinatorLayout 和 FloatingActionButton

两者使用的一个好例子是当你添加一个 FloatingActionButton 作为 CoordinatorLayout的子元素，然后再将这个 CoordinatorLayout 传递给 Snackbar.make() 调用—这样的话，不是 snackbar 展示在 FloatingActionButton 的上面，而是在 snackbar 以动画的形式进入屏幕的进修 FloatingActionButton 充分利用了 CoordinatorLayout 提供的回调自动向上移动，然后在 snackbar 返回它的位置的时候， snackbar 在 Android 3.0 以上的设备上产生动画退出屏幕，而不需要额外的代码。

查看效果请点击（打不开时候注意FQ）

CoordinatorLayout 也提供了 layout_anchor 属性，该属性和 layout_anchorGravity 一起能够用于放置浮动视图，例如 FloatingActionButton ，并关联到其它视图。

CoordinatorLayout 和App Bar

CoordinatorLayout 的其它主要使用实例包括 app bar （即先前的 action bar ）和滚动技术。你也许已经在布局中使用 Toolbar 了， Toolbar 允许你轻易地自定义外观和应用中图标部分与布局的集成。 Design 包在这一点走得更远：使用 AppBarLayout 允许Toolbar 和其它的视图（如 TabLayout 提供了 tab ）对标记了 ScrollingViewBehavior 的兄弟视图中的滚动事件产生反馈。由此，你可以像这样创建布局：

 1 <android.support.design.widget.CoordinatorLayout
 2         xmlns:android="http://schemas.android.com/apk/res/android"
 3         xmlns:app="http://schemas.android.com/apk/res-auto"
 4         android:layout_width="match_parent"
 5         android:layout_height="match_parent">
 6      
 7      <! -- Your Scrollable View -->
 8     <android.support.v7.widget.RecyclerView
 9             android:layout_width="match_parent"
10             android:layout_height="match_parent"
11             app:layout_behavior="@string/appbar_scrolling_view_behavior" />
12 
13     <android.support.design.widget.AppBarLayout
14             android:layout_width="match_parent"
15             android:layout_height="wrap_content">
16    <android.support.v7.widget.Toolbar
17                   ...
18                   app:layout_scrollFlags="scroll|enterAlways">
19 
20         <android.support.design.widget.TabLayout
21                   ...
22                   app:layout_scrollFlags="scroll|enterAlways">
23      </android.support.design.widget.AppBarLayout>
24 </android.support.design.widget.CoordinatorLayout>

现在，在用户使用 RecyclerView 的时候， AppBarLayout 能够对通过使用子视图的滚动标签来控件他们如何滚进和滚出屏幕的事件进行响应。这些标签包括：

• scroll ：这个标签应该是想要滚出屏幕的所有视图的集合—对于那些并不使用这个标签的视图，他们而被订在屏幕的顶部。

• enterAlways ：这个标签确保任何向下的滑动都会使得这个视图可见，激活了“快速返回”模式。

• exitUntilCollapsed ：这个标签使得视图不会滚动出来，除非在退出之前该视图变得“ collapsed ”（它的 minHeight ）。

注意一点：所有使用 scroll 标签的视图必须在不使用该标签的视图之前声明。这将确保所有的视图从顶部退出，而把固定的元素落下。

Collapsing Toolbar

把 Toobar 直接添加到 AppBarLayout 里面给予了你 enterAlwayCollapsed 和exitUntilCollapsed 这些滚动标签的访问权限，而不是对不同元素如何对 collapsing 作出响应的详细控件能力。要想获取后者的效果，你可以使用 CollapsingToolbarLayout：

 1 <android.support.design.widget.AppBarLayout
 2         android:layout_height="192dp"
 3         android:layout_width="match_parent">
 4     <android.support.design.widget.CollapsingToolbarLayout
 5             android:layout_width="match_parent"
 6             android:layout_height="match_parent"
 7             app:layout_scrollFlags="scroll|exitUntilCollapsed">
 8         <android.support.v7.widget.Toolbar
 9                 android:layout_height="?attr/actionBarSize"
10                 android:layout_width="match_parent"
11                 app:layout_collapseMode="pin"/>
12         </android.support.design.widget.CollapsingToolbarLayout>
13 </android.support.design.widget.AppBarLayout>

以上设置使用了 CollapsingToolbarLayout 的 app:layout_collapseMode= ”pin”属性以确保 Toolbar 本身在视图 collapse 的时候依然能够被订在屏幕顶部。而可能更多的情况是，在你一起使用 CollapsingToolbarLayout 和 Toolbar 的时候，当布局完全可见的时候，标题将自动显示得更大，然后在 toolbar collapse 的时候过渡到它的默认尺寸。请注意在这些情况下，你应该调用 CollapsingToolbarLayot 的 setTittle() ，而非 Toolbar本身的 setTitle() 。

查看Collapsing Toolbar效果请点击（打不开时候注意FQ）

除了可以订住一个视图之外，你能够使用 app:layout_collapseMode= ”parallax”（可选情况下，使用 app:layout_collapseParallaxMultiplier= ”0.7”来设置滚动视差乘法因子）来实现滚动视差效果（例如 CollapsingToolbarLayout 内部的兄弟 ImageView ）。这个使用示例将 app:layout_collapseParallaxMultiplier 和 CollapsingToolbarLayout 的app:contentScrim= ”?attr/colorPrimary”配成对使用，结果是在视图 collapse 时，添加了全出血纱布效果。

CoordinatorLayout 和自定义视图

要记住和重要一点是： CoordinatorLayout 并没有任何对 FloatingActionButton 或AppBarLayout 工作原理的天生理解，它仅仅以 Coordinator.Behavior 的形式提供了额外的 API ，而 Coordinator.Behavior 允许子视图更好地控制触摸事件和手势，但也声明了彼此之间的依赖性并通过 onDependentViewChanged() 方法接收到回调。

视图可以通过使用 CoordinatorLayout.DefaultBehavior(YourView.Behavior.class) 注解来声明一个默认的 Behavior ，或者在布局文件中通过 app:layout_behavior=”com.example.app.YourView$Behavior”属性来设置。框架层使得对任意视图而言集成CoordinatorLayout 成为可能。

注意， Design 支持包依赖于 V4 支持包和 AppCompat 支持包，后两者将会在你导入 Design 支持包依赖时自动引入。我们也注意到这些新的控件在Android Studio Layout Editor ’s Design

（在 CustomView 下面找到它们）视图中可以使用，给你提供了更容易的方式来预览一些新的构件。

Design 支持包， AppCompat 支持包和其它所有的 Android 支持包非常重要的工作，以提供所需的构建块来不一切必从头开始构建一个现代，美观的 Android 应用。