導(dǎo)讀：這邊文章主要是講 Design Support Library，這個(gè)兼容庫(kù)很容易和之前的 Android Support Library 22.1混淆涩僻，都是兼容庫(kù)皿伺，區(qū)別是這個(gè)庫(kù)多了個(gè)Design员辩。 Android Support Library 22.1只是支持了一些基本控件的材料設(shè)計(jì)化，但是這個(gè)庫(kù)更多的是對(duì)一些特效的實(shí)現(xiàn)鸵鸥，這個(gè)庫(kù)和github上的很多開(kāi)源項(xiàng)目是有很大關(guān)系的奠滑，material design的很多效果，同一種效果在github上有太多的實(shí)現(xiàn)妒穴，現(xiàn)在官方把部分效果標(biāo)準(zhǔn)化了宋税。
英文原文 Android Design Support Library
安卓5.0是是有有史以來(lái)最重要的安卓版本之一，這其中有很大部分要?dú)w功于material design的引入讼油，這種新的設(shè)計(jì)語(yǔ)言讓整個(gè)安卓的用戶體驗(yàn)煥然一新杰赛。我們的詳細(xì)專題是幫助你開(kāi)始采用material design的好去處。但是我們也知道矮台，這種設(shè)計(jì)對(duì)于開(kāi)發(fā)者乏屯，尤其是那些在意向后兼容的開(kāi)發(fā)者來(lái)說(shuō)是一種挑戰(zhàn)。
在Android Design Support Library的幫助下瘦赫，我們?yōu)樗械拈_(kāi)發(fā)者辰晕，所有2.1以上的設(shè)備，帶來(lái)了一些重要的material design控件确虱。你可以在這里面找到navigation drawer view含友，輸入控件的懸浮標(biāo)簽，懸浮操作按鈕校辩，snackbar窘问，選項(xiàng)卡以及將這些控件結(jié)合在一起的手勢(shì)滾動(dòng)框架。
如果視頻不能播放宜咒，直接到優(yōu)酷觀看 http://v.youku.com/v_show/id_XMTI1MDA2OTUyMA==.html
Navigation View
抽屜導(dǎo)航是app識(shí)別度與內(nèi)部導(dǎo)航的關(guān)鍵南缓，保持這里設(shè)計(jì)上的一致性對(duì)app的可用性至關(guān)重要，尤其是對(duì)于第一次使用的用戶荧呐。 NavigationView 通過(guò)提供抽屜導(dǎo)航所需的框架讓實(shí)現(xiàn)更簡(jiǎn)單，同時(shí)它還能夠直接通過(guò)菜單資源文件直接生成導(dǎo)航元素纸镊。
把NavigationView作為DrawerLayout的內(nèi)容視圖來(lái)使用倍阐，比如下面的布局：
<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>
你會(huì)注意到NavigationView的兩個(gè)屬性：app:headerLayout - 控制頭部的布局， app:menu - 導(dǎo)航菜單的資源文件（也可以在運(yùn)行時(shí)配置）逗威。NavigationView處理好了和狀態(tài)欄的關(guān)系峰搪，可以確保NavigationView
在API21+設(shè)備上正確的和狀態(tài)欄交互。最簡(jiǎn)單的抽屜菜單就是幾個(gè)可點(diǎn)擊的菜單集合：
<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>
被點(diǎn)擊過(guò)的item會(huì)高亮顯示在抽屜菜單中凯旭，讓用戶知道當(dāng)前是哪個(gè)菜單被選中概耻。
你也可以在menu中使用subheader來(lái)為菜單分組：
<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>
你可以通過(guò)設(shè)置一個(gè)OnNavigationItemSelectedListener使套，使用其setNavigationItemSelectedListener()來(lái)獲得元素被選中的回調(diào)事件。它為你提供被點(diǎn)擊的 菜單元素 鞠柄，讓你可以處理選擇事件侦高，改變復(fù)選框狀態(tài)，加載新內(nèi)容厌杜，關(guān)閉導(dǎo)航菜單奉呛，以及其他任何你想做的操作。
輸入框控件的懸浮標(biāo)簽
在material design中夯尽，即便是簡(jiǎn)單的 EditText 瞧壮，也有提升的余地。通常匙握，單獨(dú)的EditText會(huì)在用戶輸入第一個(gè)字母之后隱藏提示信息咆槽，但是現(xiàn)在你可以使用TextInputLayout 來(lái)將EditText封裝起來(lái)，提示信息會(huì)變成一個(gè)顯示在EditText之上的floating label圈纺，這樣用戶就始終知道他們現(xiàn)在輸入的是什么秦忿。
除了顯示提示信息，你還可以通過(guò)調(diào)用setError()在EditText下面顯示一條錯(cuò)誤信息赠堵。
懸浮操作按鈕 Floating Action Button
floating action button 是一個(gè)負(fù)責(zé)顯示界面基本操作的圓形按鈕小渊。Design library中的FloatingActionButton 實(shí)現(xiàn)了一個(gè)默認(rèn)顏色為主題中colorAccent的懸浮操作按鈕。
除了一般大小的懸浮操作按鈕茫叭，它還支持mini size（fabSize="mini"）酬屉。FloatingActionButton繼承自ImageView，你可以使用android:src或者ImageView的任意方法揍愁，比如setImageDrawable()來(lái)設(shè)置FloatingActionButton里面的圖標(biāo)呐萨。
Snackbar
為一個(gè)操作提供輕量級(jí)的，快速的反饋是使用snackbar的最好時(shí)機(jī)莽囤。snackbar顯示在屏幕的底部谬擦，包含了文字信息與一個(gè)可選的操作按鈕。在指定時(shí)間結(jié)束之后自動(dòng)消失朽缎。另外惨远，用戶還可以在超時(shí)之前將它滑動(dòng)刪除。
[圖片上傳中话肖。北秽。。（4）]
因?yàn)榘丝梢耘csnackbar交互的滑動(dòng)刪除與操作按鈕最筒，snackbar被看作是比toast更強(qiáng)大的快速反饋機(jī)制贺氓。但是你會(huì)發(fā)現(xiàn)他們的API非常相似：
Snackbar
.make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG)
.setAction(R.string.snackbar_action, myOnClickListener)
.show(); // Don’t forget to show!
你應(yīng)該注意到了make()方法中把一個(gè)View作為第一個(gè)參數(shù) - Snackbar試圖找到一個(gè)合適的父親以確保自己是被放置于底部。
選項(xiàng)卡
通過(guò)選項(xiàng)卡的方式切換view并不是material design中才有的新概念床蜘。它們和頂層導(dǎo)航模式或者組織app中不同分組內(nèi)容（比如辙培，不同風(fēng)格的音樂(lè)）是同一個(gè)概念蔑水。
Design library的TabLayout 既實(shí)現(xiàn)了固定的選項(xiàng)卡 - view的寬度平均分配，也實(shí)現(xiàn)了可滾動(dòng)的選項(xiàng)卡 - view寬度不固定同時(shí)可以橫向滾動(dòng)扬蕊。選項(xiàng)卡可以在程序中動(dòng)態(tài)添加：
TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
但是如果你使用ViewPager在tab之間橫向切換搀别，你可以直接從 PagerAdapter 的 getPageTitle() 中創(chuàng)建選項(xiàng)卡，然后使用setupWithViewPager()將兩者聯(lián)系在一起厨相。它可以使tab的選中事件能更新ViewPager,同時(shí)ViewPager 的頁(yè)面改變能更新tab的選中狀態(tài)领曼。
CoordinatorLayout, 手勢(shì), 以及滾動(dòng)
與眾不同的視覺(jué)效果只是material design的一部分：手勢(shì)同樣是制作一個(gè)material design app的重要組成部分。material design的手勢(shì)有很多組成部分蛮穿，包括touch ripples 和 meaningful transitions 庶骄。Design library引入了CoordinatorLayout，一個(gè)從另一層面去控制子view之間觸摸事件的布局践磅，Design library中的很多控件都利用了它单刁。
CoordinatorLayout與懸浮操作按鈕
一個(gè)很好的例子就是當(dāng)你將FloatingActionButton作為一個(gè)子View添加進(jìn)CoordinatorLayout并且將CoordinatorLayout傳遞給 Snackbar.make() - 在3.0極其以上的設(shè)備上，snackbar不會(huì)顯示在懸浮按鈕的上面府适，而是FloatingActionButton利用CoordinatorLayout提供的回調(diào)方法羔飞，在snackbar以動(dòng)畫效果進(jìn)入的時(shí)候自動(dòng)向上移動(dòng)讓出位置，并且在snackbar動(dòng)畫地消失的時(shí)候回到原來(lái)的位置檐春，不需要額外的代碼逻淌。
CoordinatorLayout還提供了一個(gè)layout_anchor屬性，和layout_anchorGravity,一起疟暖，可以用于放置floating view卡儒，比如FloatingActionButton與其他view的相對(duì)位置。
CoordinatorLayout與app bar
CoordinatorLayout的另一個(gè)用例是 app bar（之前的actionbar）與 滾動(dòng)技巧俐巴。你可能已經(jīng)在自己的布局中使用了Toolbar骨望，它允許你更加自由的自定義其外觀與布局的其余部分融為一體。Design library把這種設(shè)計(jì)帶到了更高的水平：使用AppBarLayout可以讓你的Toolbar與其他view（比如TabLayout的選項(xiàng)卡）能響應(yīng)被標(biāo)記了ScrollingViewBehavior的View的滾動(dòng)事件欣舵。因此擎鸠，你可以創(chuàng)建一個(gè)如下的布局：
<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>
現(xiàn)在，當(dāng)用戶滾動(dòng)RecyclerView缘圈，AppBarLayout可以這樣響應(yīng)滾動(dòng)事件：根據(jù)子view的滾動(dòng)標(biāo)志（scroll flag）來(lái)控制它們?nèi)绾芜M(jìn)入（滾入屏幕）與退出（滾出屏幕）劣光。
Flag包括：
scroll: 所有想滾動(dòng)出屏幕的view都需要設(shè)置這個(gè)flag- 沒(méi)有設(shè)置這個(gè)flag的view將被固定在屏幕頂部。
enterAlways: 這個(gè)flag讓任意向下的滾動(dòng)都會(huì)導(dǎo)致該view變?yōu)榭梢?jiàn)糟把，啟用快速“返回模式”赎线。
enterAlwaysCollapsed: 顧名思義，這個(gè)flag定義的是何時(shí)進(jìn)入（已經(jīng)消失之后何時(shí)再次顯示）糊饱。假設(shè)你定義了一個(gè)最小高度（minHeight）同時(shí)enterAlways也定義了，那么view將在到達(dá)這個(gè)最小高度的時(shí)候開(kāi)始顯示颠黎，并且從這個(gè)時(shí)候開(kāi)始慢慢展開(kāi)另锋，當(dāng)滾動(dòng)到頂部的時(shí)候展開(kāi)完滞项。
**exitUntilCollapsed**: 同樣顧名思義，這個(gè)flag時(shí)定義何時(shí)退出夭坪，當(dāng)你定義了一個(gè)minHeight文判，這個(gè)view將在滾動(dòng)到達(dá)這個(gè)最小高度的時(shí)候消失。
注意一點(diǎn)：所有使用scroll flag的view都必須定義在沒(méi)有使用scroll flag的view的前面室梅，這樣才能確保所有的view從頂部退出戏仓，留下固定的元素。
可伸縮折疊的Toolbar （Collapsing Toolbar）
直接添加Toolbar到AppBarLayout可以讓你使用enterAlwaysCollapsed 和 exitUntilCollapsedscroll標(biāo)志亡鼠，但是無(wú)法控制不同元素如何響應(yīng)collapsing的細(xì)節(jié)赏殃，為了達(dá)到此目的，使用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"來(lái)確保Toolbar在view折疊的時(shí)候仍然被固定在屏幕的頂部间涵。還可以做到更好的效果仁热，當(dāng)你讓CollapsingToolbarLayout和Toolbar在一起使用的時(shí)候，title會(huì)在展開(kāi)的時(shí)候自動(dòng)變得大些勾哩，而在折疊的時(shí)候讓字體過(guò)渡到默認(rèn)值抗蠢。必須注意，在這種情況下你必須在CollapsingToolbarLayout上調(diào)用setTitle()思劳，而不是在Toolbar上迅矛。
除了固定住view，你還可以使用app:layout_collapseMode="parallax"（以及使用app:layout_collapseParallaxMultiplier="0.7"來(lái)設(shè)置視差因子）來(lái)實(shí)現(xiàn)視差滾動(dòng)效果（比如CollapsingToolbarLayout里面的一個(gè)ImageView）潜叛，這中情況和CollapsingToolbarLayout的app:contentScrim="?attr/colorPrimary"屬性一起配合更完美秽褒。
CoordinatorLayout與自定義view
有一件事情必須注意，那就是CoordinatorLayout并不知道FloatingActionButton或者AppBarLayout的內(nèi)部工作原理 - 它只是以Coordinator.Behavior的形式提供了額外的API钠导，該API可以使子View更好的控制觸摸事件與手勢(shì)以及聲明它們之間的依賴震嫉，并通過(guò)onDependentViewChanged()接收回調(diào)。
可以使用CoordinatorLayout.DefaultBehavior(你的View.Behavior.class)注解或者在布局中使用app:layout_behavior="com.example.app.你的View$Behavior"屬性來(lái)定義view的默認(rèn)行為牡属。framework讓任意view和CoordinatorLayout結(jié)合在一起成為了可能票堵。
現(xiàn)在就可以使用了!
Design library現(xiàn)在已經(jīng)可以使用了，確保你在SDK Manager中更新了Android Support Repository逮栅。添加一行依賴悴势，然后你就可以開(kāi)始使用Design library了：
compile 'com.android.support:design:22.2.0'
Design library依賴于Support v4 和 AppCompat Support庫(kù)，在添加了Design library依賴之后措伐，這些庫(kù)會(huì)自動(dòng)的包含進(jìn)來(lái)特纤。我們還讓這些控件可以在Android Studio的布局編輯器里預(yù)覽。
Design library, AppCompat以及所有的安卓支持庫(kù)是創(chuàng)建一個(gè)現(xiàn)代侥加，美觀app的重要工具捧存。
譯文完。
這里面最難理解的應(yīng)該是CoordinatorLayout，覺(jué)得要真正理解有必要看看其實(shí)現(xiàn)的源碼昔穴，而且個(gè)人認(rèn)為CoordinatorLayout雖然封裝的很好镰官，但是其使用并不直觀。
最后附上Android Design library的demo：
https://github.com/chrisbanes/cheesesquare 吗货。
閱讀原文
轉(zhuǎn)載 ： http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html
