導讀：這邊文章主要是講 Design Support Library，這個兼容庫很容易和之前的 Android Support Library 22.1混淆，都是兼容庫，區別是這個庫多了個Design。 Android Support Library 22.1只是支持了一些基本控件的材料設計化，但是這個庫更多的是對一些特效的實現，這個庫和github上的很多開源項目是有很大關系的，material design的很多效果，同一種效果在github上有太多的實現，現在官方把部分效果標準化了。

英文原文 Android Design Support Library
安卓5.0是是有有史以來最重要的安卓版本之一，這其中有很大部分要歸功于material design的引入，這種新的設計語言讓整個安卓的用戶體驗煥然一新。我們的詳細專題是幫助你開始采用material design的好去處。但是我們也知道，這種設計對于開發者，尤其是那些在意向后兼容的開發者來說是一種挑戰。

在Android Design Support Library的幫助下，我們為所有的開發者，所有2.1以上的設備，帶來了一些重要的material design控件。你可以在這里面找到navigation drawer view，輸入控件的懸浮標簽，懸浮操作按鈕，snackbar，選項卡以及將這些控件結合在一起的手勢滾動框架。

如果視頻不能播放，直接到優酷觀看 http://v.youku.com/v_show/id_XMTI1MDA2OTUyMA==.html
Navigation View
抽屜導航是app識別度與內部導航的關鍵，保持這里設計上的一致性對app的可用性至關重要，尤其是對于第一次使用的用戶。 NavigationView 通過提供抽屜導航所需的框架讓實現更簡單，同時它還能夠直接通過菜單資源文件直接生成導航元素。

把NavigationView作為DrawerLayout的內容視圖來使用，比如下面的布局：

<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>

你會注意到NavigationView的兩個屬性：app:headerLayout - 控制頭部的布局， app:menu - 導航菜單的資源文件（也可以在運行時配置）。NavigationView處理好了和狀態欄的關系，可以確保NavigationView
在API21+設備上正確的和狀態欄交互。最簡單的抽屜菜單就是幾個可點擊的菜單集合：

<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>

被點擊過的item會高亮顯示在抽屜菜單中，讓用戶知道當前是哪個菜單被選中。
你也可以在menu中使用subheader來為菜單分組：

<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>

你可以通過設置一個OnNavigationItemSelectedListener，使用其setNavigationItemSelectedListener()來獲得元素被選中的回調事件。它為你提供被點擊的 菜單元素 ，讓你可以處理選擇事件，改變復選框狀態，加載新內容，關閉導航菜單，以及其他任何你想做的操作。
輸入框控件的懸浮標簽
在material design中，即便是簡單的 EditText ，也有提升的余地。通常，單獨的EditText會在用戶輸入第一個字母之后隱藏提示信息，但是現在你可以使用TextInputLayout 來將EditText封裝起來，提示信息會變成一個顯示在EditText之上的floating label，這樣用戶就始終知道他們現在輸入的是什么。

1432982783938566.png

除了顯示提示信息，你還可以通過調用setError()在EditText下面顯示一條錯誤信息。

懸浮操作按鈕 Floating Action Button
floating action button 是一個負責顯示界面基本操作的圓形按鈕。Design library中的FloatingActionButton 實現了一個默認顏色為主題中colorAccent的懸浮操作按鈕。

1432982801531872.png

除了一般大小的懸浮操作按鈕，它還支持mini size（fabSize="mini"）。FloatingActionButton繼承自ImageView，你可以使用android:src或者ImageView的任意方法，比如setImageDrawable()來設置FloatingActionButton里面的圖標。
Snackbar
為一個操作提供輕量級的，快速的反饋是使用snackbar的最好時機。snackbar顯示在屏幕的底部，包含了文字信息與一個可選的操作按鈕。在指定時間結束之后自動消失。另外，用戶還可以在超時之前將它滑動刪除。

[圖片上傳中。。。（4）]

因為包含了可以與snackbar交互的滑動刪除與操作按鈕，snackbar被看作是比toast更強大的快速反饋機制。但是你會發現他們的API非常相似：

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

你應該注意到了make()方法中把一個View作為第一個參數 - Snackbar試圖找到一個合適的父親以確保自己是被放置于底部。
選項卡
通過選項卡的方式切換view并不是material design中才有的新概念。它們和頂層導航模式或者組織app中不同分組內容（比如，不同風格的音樂）是同一個概念。

1432988507118832.png

Design library的TabLayout 既實現了固定的選項卡 - view的寬度平均分配，也實現了可滾動的選項卡 - view寬度不固定同時可以橫向滾動。選項卡可以在程序中動態添加：

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

但是如果你使用ViewPager在tab之間橫向切換，你可以直接從 PagerAdapter 的 getPageTitle() 中創建選項卡，然后使用setupWithViewPager()將兩者聯系在一起。它可以使tab的選中事件能更新ViewPager,同時ViewPager 的頁面改變能更新tab的選中狀態。

CoordinatorLayout, 手勢, 以及滾動
與眾不同的視覺效果只是material design的一部分：手勢同樣是制作一個material design app的重要組成部分。material design的手勢有很多組成部分，包括touch ripples 和 meaningful transitions 。Design library引入了CoordinatorLayout，一個從另一層面去控制子view之間觸摸事件的布局，Design library中的很多控件都利用了它。

CoordinatorLayout與懸浮操作按鈕
一個很好的例子就是當你將FloatingActionButton作為一個子View添加進CoordinatorLayout并且將CoordinatorLayout傳遞給 Snackbar.make() - 在3.0極其以上的設備上，snackbar不會顯示在懸浮按鈕的上面，而是FloatingActionButton利用CoordinatorLayout提供的回調方法，在snackbar以動畫效果進入的時候自動向上移動讓出位置，并且在snackbar動畫地消失的時候回到原來的位置，不需要額外的代碼。

1432996492976821.gif

CoordinatorLayout還提供了一個layout_anchor屬性，和layout_anchorGravity,一起，可以用于放置floating view，比如FloatingActionButton與其他view的相對位置。
CoordinatorLayout與app bar
CoordinatorLayout的另一個用例是 app bar（之前的actionbar）與 滾動技巧。你可能已經在自己的布局中使用了Toolbar，它允許你更加自由的自定義其外觀與布局的其余部分融為一體。Design library把這種設計帶到了更高的水平：使用AppBarLayout可以讓你的Toolbar與其他view（比如TabLayout的選項卡）能響應被標記了ScrollingViewBehavior的View的滾動事件。因此，你可以創建一個如下的布局：

<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>

現在，當用戶滾動RecyclerView，AppBarLayout可以這樣響應滾動事件：根據子view的滾動標志（scroll flag）來控制它們如何進入（滾入屏幕）與退出（滾出屏幕）。
Flag包括：
scroll: 所有想滾動出屏幕的view都需要設置這個flag- 沒有設置這個flag的view將被固定在屏幕頂部。
enterAlways: 這個flag讓任意向下的滾動都會導致該view變為可見，啟用快速“返回模式”。
enterAlwaysCollapsed: 顧名思義，這個flag定義的是何時進入（已經消失之后何時再次顯示）。假設你定義了一個最小高度（minHeight）同時enterAlways也定義了，那么view將在到達這個最小高度的時候開始顯示，并且從這個時候開始慢慢展開，當滾動到頂部的時候展開完。

**exitUntilCollapsed**: 同樣顧名思義，這個flag時定義何時退出，當你定義了一個minHeight，這個view將在滾動到達這個最小高度的時候消失。

注意一點：所有使用scroll flag的view都必須定義在沒有使用scroll flag的view的前面，這樣才能確保所有的view從頂部退出，留下固定的元素。
可伸縮折疊的Toolbar （Collapsing Toolbar）
直接添加Toolbar到AppBarLayout可以讓你使用enterAlwaysCollapsed 和 exitUntilCollapsedscroll標志，但是無法控制不同元素如何響應collapsing的細節，為了達到此目的，使用CollapsingToolbarLayout：

<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>

這里使用了CollapsingToolbarLayout的app:layout_collapseMode="pin"來確保Toolbar在view折疊的時候仍然被固定在屏幕的頂部。還可以做到更好的效果，當你讓CollapsingToolbarLayout和Toolbar在一起使用的時候，title會在展開的時候自動變得大些，而在折疊的時候讓字體過渡到默認值。必須注意，在這種情況下你必須在CollapsingToolbarLayout上調用setTitle()，而不是在Toolbar上。

1433000848139569.gif

除了固定住view，你還可以使用app:layout_collapseMode="parallax"（以及使用app:layout_collapseParallaxMultiplier="0.7"來設置視差因子）來實現視差滾動效果（比如CollapsingToolbarLayout里面的一個ImageView），這中情況和CollapsingToolbarLayout的app:contentScrim="?attr/colorPrimary"屬性一起配合更完美。

1433004200573097.png

CoordinatorLayout與自定義view
有一件事情必須注意，那就是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結合在一起成為了可能。
現在就可以使用了!
Design library現在已經可以使用了，確保你在SDK Manager中更新了Android Support Repository。添加一行依賴，然后你就可以開始使用Design library了：

compile 'com.android.support:design:22.2.0'

Design library依賴于Support v4 和 AppCompat Support庫，在添加了Design library依賴之后，這些庫會自動的包含進來。我們還讓這些控件可以在Android Studio的布局編輯器里預覽。
Design library, AppCompat以及所有的安卓支持庫是創建一個現代，美觀app的重要工具。

譯文完。

這里面最難理解的應該是CoordinatorLayout，覺得要真正理解有必要看看其實現的源碼，而且個人認為CoordinatorLayout雖然封裝的很好，但是其使用并不直觀。
最后附上Android Design library的demo：
https://github.com/chrisbanes/cheesesquare 。

閱讀原文
轉載 ： http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html