转载请注明出处：http://blog.csdn.net/xuejinwei0530/article/details/46273573

翻译自：http://android-developers.blogspot.jp/2015/05/android-design-support-library.html

本人首次翻译，欢迎批评指正。

  • 前言
很多人会把这个库和 Android Support Library混淆，其实不然，这个库是为了Design而生的。 Android Support Library只支持一些基本控件的material design，而是这个库更多的是对一些material design特效的实现。这个库是官方把一些之前用github开源项目实现的material design效果标准化了。为开发者提供了更好的material design效果实现方式。


  • 开始

Android 5.0棒棒糖是有史以来最重要的Android版本之一,在很大程度上由于一个新的设计语言Material Design的引入,刷新整个安卓系统的体验。我们的详细介绍是一个学习适配material design的好地方。但是我们知道,对于开发人员来说他也是一个挑战,特别是向下兼容方面。从新的Android Design Support Library（android设计支持库）带来一点小的帮助：我们带来了一些重要的Material Design组件给所有开发者，兼容Android 2.1和以上的设备。你会发现一个Navigation View（导航抽屉组件），floating labels for editing text（浮动标签用于编辑文本）, a floating action button（浮动操作按钮）, snackbar, tabs,将这些控件结合起来的 一个手势和滚动框架。

  • Navigation View
导航抽屉是APP 识别度和内部导航的关键，保存设计上的一致性对app的可用是是非常重要的，特别是对于第一次使用的用户。NavigationView通过提供你需要的抽屉式导航框架使实现更简单，能够通过菜单资源文件直接生成导航元素。
Android Design Support Library——Google I/O 2015 为 Android 开发者带来的福利_第1张图片

你使用NavigationView作为DrawerLayout抽屉里内容视图布局如下：

<span style="font-size:14px;"><android.support.v4.widget.DrawerLayout        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:fitsSystemWindows="true">    <!-- your content layout -->    <android.support.design.widget.NavigationView            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:layout_gravity="start"            app:headerLayout="@layout/drawer_header"            app:menu="@menu/drawer"/></android.support.v4.widget.DrawerLayout></span>

你会注意到两个NavigationView的属性：

app:headerLayout 控制用于标题的布局（可选）

app:menu 导航列的菜单资源文件（也可以在运行时更新）

NavigationView 处理好了和状态栏的关系，确保您的NavigationView 与状态栏在API21+设备上正确进行交互。


最简单的抽屉资源是几个可点击菜单项的集合如下：

<span style="font-size:14px;"><group android:checkableBehavior="single">    <item        android:id="@+id/navigation_item_1"        android:checked="true"        android:icon="@drawable/ic_android"        android:title="@string/navigation_item_1"/>    <item        android:id="@+id/navigation_item_2"        android:icon="@drawable/ic_android"        android:title="@string/navigation_item_2"/></group></span>
被点击的菜单项会高亮显示，确保用户知道哪些菜单项项是当前被选中。
你也可以在menu中使用subheaders为菜单分组:

<span style="font-size:14px;"><item    android:id="@+id/navigation_subheader"    android:title="@string/navigation_subheader">    <menu>        <item            android:id="@+id/navigation_sub_item_1"            android:icon="@drawable/ic_android"            android:title="@string/navigation_sub_item_1"/>        <item            android:id="@+id/navigation_sub_item_2"            android:icon="@drawable/ic_android"            android:title="@string/navigation_sub_item_2"/>    </menu></item></span>

你可以通过设置OnNavigationItemSelectedListener 使用setNavigationItemSelectedListener（），来获得元素被点击的回调事件。 这提供了被点击的菜单元素，让您处理选择事件，改变复选框状态，加载新的内容，代码关闭抽屉，或你可能希望的任何其它操作。

  • Floating labels for editing text
即使最不起眼的EditText，在Material Design中也有提升空间。单独的EditText 在用户输入第一个字母的时候隐藏提示文字，你现在可以将EditText包含在一个TextInputLayout当中，提示文字变成了一个floating label悬浮在EditText上面，确保用户永远都不失去上下文的提示在输入文本的时候。


除了可以显示输入提示，你也可以通过setError()在EditText下面显示错误信息。

作者提示：效果类似wrapp/floatlabelededittext 如下图：

  • Floating Action Button
floating action button是一个圆形的按钮，是你界面上的主要操作。Design library的FloatingActionButton给你一个一致的实现，在默认情况下使用colorAccent的主题颜色的。除了正常尺寸的浮动操作按钮，它也支持微型尺寸（fabSize=“mini”）。由于FloatingActionButton继承于ImageView，你也可以采用Android:src或任何其他方法，如setImageDrawable（）来控制FloatingActionButton内显示的图标。
  • Snackbar
如果需要为一个操作提供一个轻量级的快速反馈，使用snackbar是一个极好的机会。Snackbar显示在屏幕底部，并包含文字提示和一个操作按钮。它在给定的时长的结束后后自动消失。此外，也可以在超时之前由用户滑动让其消失。
Snackbar因为包含了可以与之交互的滑动删除与操作按钮，snackbar被看作是比toast更强大的快速反馈机制。你会发现Snackbar的API是相当熟悉的：
<span style="font-size:14px;">Snackbar  .make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG)  .setAction(R.string.snackbar_action, myOnClickListener)  .show(); // 不要忘记show出来!</span>

 你会注意到使用的是一个View作为make()的第一个参数，Snackbar试图找到一个父类View已确保它是固定显示在底部的。
  • Tabs（TabLayout普通的可滑动的 Tab）
对于Material Design来说，利用tabs通过切换不同的视图在你的应用程序中不是一个新概念。他们同样存在首页的顶级导航模式或者组织不同分组的内容在你的App中（例如：不同流派的音乐）。

Design library提供的TabLayout既实现固定的标签，tab的宽度是平均分配的在所有tabs中。也实现了滚动tabs，tabs的宽度并不是统一的，可以水平滚动的，可以在代码中实现添加tabs的：
<span style="font-size:14px;">TabLayout tabLayout = ...;tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));</span>

然而,如果您使用的是ViewPager水平之间横向切换,您可以创建直接从你的标签PagerAdapter的getPageTitle() 中创建tabs，后连使用setupWithViewPager()将二者联系起来。 它可以使tab的选中事件能更新ViewPager,同时ViewPager的页面改变能更新tab的选中状态。
  • CoordinatorLayout,手势,and 滚动(CoordinatorLayout:全新，更加彪悍的 FrameLayout)
独特的视觉效果是Material Desing的一部分，手势也是Material Design的一个重要组成部分。Material Design的手势包括触摸涟漪和有意义的转换,Design library提供的CoordinatorLayout是一个从另一个层面去控制之视图触摸事件的布局,Design library中的很多控件都利用它。
  • CoordinatorLayout,和悬浮操作按钮
一个很好的例子就是：当你添加一个FloatingActionButton作为CoordinatorLayout的子控件，并且将CoordinatorLayout传递给 Snackbar.make() - 在3.0极其以上的设备上，snackbar不会显示在悬浮按钮的上面，而是FloatingActionButton利用CoordinatorLayout提供的回调方法，在snackbar以动画效果进入的时候自动向上移动让出位置，并且在snackbar动画地消失的时候回到原来的位置，不需要额外的代码。

CoordinatorLayout还提供了layout_anchor以及layout_anchorGravity属性，可以被用到FloatingActionButton，例如：FloatingActionButton，相对于其他view的相对位置。
  • CoordinatorLayout and the app bar
其他主要利用CoordinatorLayout的例子就是程序栏(app bar)，原action bar，和滚动技术。你可能已经使用Toolbar在你的布局中，它允许你更加自由的自定义其外观与布局的其余部分融为一体。Design library 把这种设计提到了一个更高的水平：使用AppBarLayout（全新的用来实现各种Material Design概念效果的一个Layout，主要负责对滑动的响应）让你的Toolbar和其他视图（例如：TabLayout提供的tabs）能够相应标记了ScrollingViewBehavior的view的滚动事件。因此，你可以创建一个布局，如下：
<span style="font-size:14px;"><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">          <! -- Your Scrollable View -->    <android.support.v7.widget.RecyclerView            android:layout_width="match_parent"            android:layout_height="match_parent"            app:layout_behavior="@string/appbar_scrolling_view_behavior" />    <android.support.design.widget.AppBarLayout            android:layout_width="match_parent"            android:layout_height="wrap_content">   <android.support.v7.widget.Toolbar                  ...                  app:layout_scrollFlags="scroll|enterAlways">        <android.support.design.widget.TabLayout                  ...                  app:layout_scrollFlags="scroll|enterAlways">     </android.support.design.widget.AppBarLayout></android.support.design.widget.CoordinatorLayout></span>
现在，当用户滚动RecyclerView时候，AppBarLayout可以这样响应滚动事件：根据子view的滚动标志（scroll flag）来控制它们如何进入（滚入屏幕）与退出（滚出屏幕）。Flag包括：scroll：这个标志应该适合希望在屏幕上滚动的所有视图而设置，不使用此标志的时候，他们会保持固定在屏幕的顶部enterAlways：此标志确保任何向下滚动将使这一视图成为可见，即“快速返回”模式enterAlwaysCollapsed：当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度（即“折叠”模式）进入，但滚动视图已经到达顶部时其扩大到完整高度。exitUntilCollapsed：此标志使视图滚动关闭，知道在退出之前折叠（最小高度）为止
注：所有使用scroll flag属性的view都必须定义在没有使用scroll flag的view的前面，这保证了所以view从顶部退出之后，留下固定的视图在元素。
  • Collapsing Toolbars 可伸缩折叠的Toolbar
直接向一个AppBarLayout添加ToolBrar，可以使用enterAlwaysCollapsed和exitUntilCollapsed的滚动标志，但是无法控制不同元素如何响应collapsing的细节。为此，Design library提供了新的CollapsingToolbarLayout：
<span style="font-size:14px;"><android.support.design.widget.AppBarLayout        android:layout_height="192dp"        android:layout_width="match_parent">    <android.support.design.widget.CollapsingToolbarLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            app:layout_scrollFlags="scroll|exitUntilCollapsed">        <android.support.v7.widget.Toolbar                android:layout_height="?attr/actionBarSize"                android:layout_width="match_parent"                app:layout_collapseMode="pin"/>        </android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout></span>

这个设置使用CollapsingToolbarLayout的app:layout_collapseMode="pin"确保Toolbar本身在折叠的时候仍然固定在屏幕的顶端。更好的是，当你一起使用CollapsingToolbarLayout和Toolbar的时候，toolbar的title在展开的时候会自动变大，而折叠的时候让文字自动过度到默认的大小。注意，在这种情况下你应该setTitle()在CollapsingToolbarLayout上而不是ToolBar自己。
Android Design Support Library——Google I/O 2015 为 Android 开发者带来的福利_第2张图片


除了钉住View，你可以使用app:layout_collapseMode+"parallax"(可选app:layout_collapseParallaxMultiplier="0.7"设置视差参数)实现视差滚动效果（下图所示的ImageView在CollapsingToolbarLayout中）。)。这个漂亮的例子使用了app:contentScrim="?attr/colorPrimary"属性在CollapsingToolbarLayout视图中,添加一个完整的渐变效果。如下图：


  • CoordinatorLayout 与自定义view
注意的是,CoordinatorLayout没不知道FloatingActionButton或AppBarLayout的工作原理——它只是以Coordinator.Behavior,提供了额外api，该api允许子视图,以更好地控制触摸事件和手势以及声明彼此之间的依赖关系，并接收通过onDependentViewChanged()接受回调。可以使用CoordinatorLayout.DefaultBehavior(你的View.Behavior.class)注解或者在布局中使用app:layout_behavior="com.example.app.你的View$Behavior"属性来定义view的默认行为。framework让任意view和CoordinatorLayout结合在一起成为了可能。
  • 现在如何使用
Design library 现在是可以使用的，确保更新好最新版本的Android Support Repository在SDK Manager当中。然后,您可以开始使用新的Design library通过添加一条依赖：

<span style="font-size:14px;">compile 'com.android.support:design:22.2.0'</span>

注意：新的设计类库依赖于support V4 和AppCompat Support Libraries，这些当您添加设计库的依赖关系时自动包含在内。我们也十分小心，这些新的部件是可用在Android Studio Layout Editor’s Design （布局编辑器）的设计视图（找到他们在CustomView下），给你一个更简单的方式来预览其中的一些新的部件。

The Design library, AppCompat,和所有的Android Support Library 重要的工具用来构建一个现代的、漂亮的Android应用程序，不用一切从头开始。


更多相关文章

  1. Attribute is missing the Android namespace prefix——android
  2. [android]布局（容器）简介和使用方法
  3. android视图继承关系
  4. Android文件系统的结构及目录用途、操作方法 整理
  5. Android之网络请求7————OkHttp源码4:网络操作
  6. android之ListView的item布局问题总结
  7. android ui 布局性能优化

随机推荐

  1. Android踩坑——mkdir方法中返回false导
  2. Android通过包名打开手机应用商城寻找所
  3. Android之MVC——Model通知View去更新（实
  4. android音乐播放器开发在线加载歌词
  5. android.view.inflateexception异常处理
  6. TabActivity
  7. Xiang Li
  8. Android中调用locationManager.getProvid
  9. Android获取屏幕尺寸的方法
  10. android tabHost布局之一 不继承TabActiv