導讀：這個兼容庫很容易和以前的 Android Support Library 22.1混淆，都是兼容庫，區別是這個庫多了個Design。 Android Support Library 22.1只是支持了一些基本控件的材料設計化，可是這個庫更多的是對一些特效的實現，這個庫和github上的不少開源項目是有很大關係的，material design的不少效果，同一種效果在github上有太多的實現，如今官方把部分效果標準化了。php
英文原文 Android Design Support Library html
安卓5.0是是有有史以來最重要的安卓版本之一，這其中有很大部分要歸功於material design的引入，這種新的設計語言讓整個安卓的用戶體驗面目一新。咱們的詳細專題是幫助你開始採用material design的好去處。可是咱們也知道，這種設計對於開發者，尤爲是那些在乎向後兼容的開發者來講是一種挑戰。react
在Android Design Support Library的幫助下，咱們爲全部的開發者，全部2.1以上的設備，帶來了一些重要的material design控件。你能夠在這裏面找到navigation drawer view，輸入控件的懸浮標籤，懸浮操做按鈕，snackbar，選項卡以及將這些控件結合在一塊兒的手勢滾動框架。android
若是視頻不能播放，直接到優酷觀看 http://v.youku.com/v_show/id_XMTI1MDA2OTUyMA==.html git
Navigation View
抽屜導航是app識別度與內部導航的關鍵，保持這裏設計上的一致性對app的可用性相當重要，尤爲是對於第一次使用的用戶。 NavigationView 經過提供抽屜導航所需的框架讓實現更簡單，同時它還可以直接經過菜單資源文件直接生成導航元素。github
把NavigationView做爲DrawerLayout的內容視圖來使用，好比下面的佈局：app
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<android.support.v4.widget.DrawerLayout
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+設備上正確的和狀態欄交互。最簡單的抽屜菜單就是幾個可點擊的菜單集合：編輯器
|
1
2
3
4
5
6
7
8
9
10
11
|
<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來爲菜單分組：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<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，這樣用戶就始終知道他們如今輸入的是什麼。
除了顯示提示信息，你還能夠經過調用setError()在EditText下面顯示一條錯誤信息。
懸浮操做按鈕 Floating Action Button
floating action button 是一個負責顯示界面基本操做的圓形按鈕。Design library中的FloatingActionButton 實現了一個默認顏色爲主題中colorAccent的懸浮操做按鈕。
除了通常大小的懸浮操做按鈕，它還支持mini size（fabSize="mini"）。FloatingActionButton繼承自ImageView，你可使用android:src或者ImageView的任意方法，好比setImageDrawable()來設置FloatingActionButton裏面的圖標。
Snackbar
爲一個操做提供輕量級的，快速的反饋是使用snackbar的最好時機。snackbar顯示在屏幕的底部，包含了文字信息與一個可選的操做按鈕。在指定時間結束以後自動消失。另外，用戶還能夠在超時以前將它滑動刪除。
由於包含了能夠與snackbar交互的滑動刪除與操做按鈕，snackbar被看做是比toast更強大的快速反饋機制。可是你會發現他們的API很是類似：
|
1
2
3
4
|
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中不一樣分組內容（好比，不一樣風格的音樂）是同一個概念。
Design library的TabLayout 既實現了固定的選項卡 - view的寬度平均分配，也實現了可滾動的選項卡 - view寬度不固定同時能夠橫向滾動。選項卡能夠在程序中動態添加：
|
1
2
|
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動畫地消失的時候回到原來的位置，不須要額外的代碼。
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的滾動事件。所以，你能夠建立一個以下的佈局：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<android.support.design.widget.CoordinatorLayout
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: 當你的視圖已經設置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從頂部退出，留下固定的元素。
可伸縮摺疊的Toolbar （Collapsing Toolbar）
直接添加Toolbar到AppBarLayout可讓你使用enterAlwaysCollapsed 和 exitUntilCollapsedscroll標誌，可是沒法控制不一樣元素如何響應collapsing的細節，爲了達到此目的，使用CollapsingToolbarLayout：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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上。
除了固定住view，你還可使用app:layout_collapseMode="parallax"（以及使用app:layout_collapseParallaxMultiplier="0.7"來設置視差因子）來實現視差滾動效果（好比CollapsingToolbarLayout裏面的一個ImageView），這中狀況和CollapsingToolbarLayout的app:contentScrim="?attr/colorPrimary"屬性一塊兒配合更完美。
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了：
|
1
|
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：