1 背景

上周一年一度的Google IO全球開發(fā)者大會剛剛結(jié)束，Google在Android這塊除過一些優(yōu)化沒有太大亮點(diǎn)。在Android Developer和Android Developer Blog上看了下相關(guān)介紹，Google升級了新的Support Library。所以在這里我們就來率先體驗(yàn)一把吧（這篇文章再草稿箱呆了三四天了。。。。終于有時(shí)間讓她見天日了）。

先看一下Demo演示效果圖，完全使用了Google IO 2015的Design Support Library的控件進(jìn)行代碼編寫。如下：

下載Demo請點(diǎn)擊：Design Support Library Demo

2 Design Support Library使用介紹 2-1 綜述

支持Android 2.1以上設(shè)備。

Gradle build script dependency：

compile?'com.android.support:design:22.2.0'?//可修改版本號為自己匹配

Design Support Library包含8個(gè)控件，具體如下：

android.support.design.widget.TextInputLayout 強(qiáng)大帶提示的MD風(fēng)格的EditText android.support.design.widget.FloatingActionButton MD風(fēng)格的圓形按鈕，來自于ImageView android.support.design.widget.Snackbar 類似Toast，添加了簡單的單個(gè)Action android.support.design.widget.TabLayout 選項(xiàng)卡 android.support.design.widget.NavigationView DrawerLayout的SlideMenu android.support.design.widget.CoordinatorLayout 超級FrameLayout android.support.design.widget.AppBarLayout MD風(fēng)格的滑動Layout android.support.design.widget.CollapsingToolbarLayout 可折疊MD風(fēng)格ToolbarLayout

下面詳細(xì)說說這些控件的特性和使用注意項(xiàng)。

2-2 TextInputLayout控件

在MD中，使用TextInputLayout將EditText進(jìn)行了封裝，提示信息會變成一個(gè)顯示在EditText之上的floating label，這樣用戶就始終知道他們現(xiàn)在輸入的是什么，而且過度動畫是平滑的。還可以在下方通過setError設(shè)置Error提示，使用比較簡單，所以不做過多說明，詳情見Demo源碼。

注意項(xiàng)：

TextInputLayout中至少嵌套一個(gè)EditText。

2-3 FloatingActionButton控件

一個(gè)負(fù)責(zé)顯示界面基本操作的圓形按鈕。Design library中的FloatingActionButton 實(shí)現(xiàn)了一個(gè)默認(rèn)顏色為主題中colorAccent的懸浮操作按鈕。除了一般大小的懸浮操作按鈕，它還支持mini size（fabSize=”mini”）。FloatingActionButton繼承自ImageView，你可以使用android:src或者 ImageView的任意方法，比如setImageDrawable()來設(shè)置FloatingActionButton里面的圖標(biāo)。

無特別注意項(xiàng)，和普通控件類似。

2-4 Snackbar控件

Snackbar為一個(gè)操作提供輕量級、快速的反饋。Snackbar顯示在屏幕的底部（有MD動畫效果浮現(xiàn)和消失），包含了文字信息與一個(gè)可選的操作按鈕。在指定時(shí)間結(jié)束之后自動消失。另外，用戶還可以在超時(shí)之前將它滑動刪除。Snackbar被看作是比Toast更強(qiáng)大的快速反饋機(jī)制，你會發(fā)現(xiàn)他們的API非常相似。你應(yīng)該注意到了make()方法中把一個(gè)View作為第一個(gè)參數(shù)（Snackbar試圖找到一個(gè)合適的父親以確保自己是被放置于底部）。

無特殊注意項(xiàng)，和Toast類似。

2-5 TabLayout控件

通過選項(xiàng)卡的方式切換View并不是MD中才有的新概念，它們和頂層導(dǎo)航模式或者組織app中不同分組內(nèi)容（比如，不同風(fēng)格的音樂）是同一個(gè)概念。 Design library的TabLayout 既實(shí)現(xiàn)了固定的選項(xiàng)卡（View的寬度平均分配），也實(shí)現(xiàn)了可滾動的選項(xiàng)卡（View寬度不固定同時(shí)可以橫向滾動）。如果你使用ViewPager在 tab之間橫向切換，你可以直接從PagerAdapter的getPageTitle() 中創(chuàng)建選項(xiàng)卡，然后使用setupWithViewPager()將兩者聯(lián)系在一起。它可以使tab的選中事件能更新ViewPager,同時(shí) ViewPager?
的頁面改變能更新tab的選中狀態(tài)。

注意項(xiàng)：

如果你使用ViewPager在tab之間橫向切換，切記可以直接從PagerAdapter的getPageTitle() 中創(chuàng)建選項(xiàng)卡，然后使用setupWithViewPager()將兩者聯(lián)系在一起。

2-6 NavigationView控件

抽屜導(dǎo)航是app識別度與內(nèi)部導(dǎo)航的關(guān)鍵，保持這里設(shè)計(jì)上的一致性對app的可用性至關(guān)重要，尤其是對于第一次使用的用戶。 NavigationView 通過提供抽屜導(dǎo)航所需的框架讓實(shí)現(xiàn)更簡單，同時(shí)它還能夠直接通過菜單資源文件直接生成導(dǎo)航元素。把NavigationView作為 DrawerLayout的內(nèi)容視圖來使用。NavigationView處理好了和狀態(tài)欄的關(guān)系，可以確保NavigationView在API21+ 設(shè)備上正確的和狀態(tài)欄交互。

注意項(xiàng)：

你可以通過設(shè)置一個(gè)OnNavigationItemSelectedListener，使用其 setNavigationItemSelectedListener()來獲得元素被選中的回調(diào)事件。它為你提供被點(diǎn)擊的菜單元素，讓你可以處理選擇事件、改變復(fù)選框狀態(tài)、加載新內(nèi)容、關(guān)閉導(dǎo)航菜單，以及其他任何你想做的操作。你會注意到NavigationView的兩個(gè)新自定義屬性如下：

app:headerLayout 控制頭部的布局 app:menu 導(dǎo)航菜單的資源文件（也可以在運(yùn)行時(shí)配置） 2-7 CoordinatorLayout控件

手勢,及滾動布局，MD的手勢有很多組成部分，包括touch ripples和meaningful transitions。Design library引入了CoordinatorLayout，一個(gè)從另一層面去控制子view之間觸摸事件的布局，Design library中的很多控件都利用了它。一個(gè)很好的例子就是當(dāng)你將FloatingActionButton作為一個(gè)子View添加進(jìn) CoordinatorLayout并且將CoordinatorLayout傳遞給 Snackbar.make()，在3.0及其以上的設(shè)備上，Snackbar不會顯示在懸浮按鈕的上面，而是FloatingActionButton 利用CoordinatorLayout提供的回調(diào)方法，在Snackbar以動畫效果進(jìn)入的時(shí)候自動向上移動讓出位置，并且在Snackbar動畫地消失的時(shí)候回到原來的位置，不需要額外的代碼。

CoordinatorLayout的另一個(gè)用例是ActionBar與滾動技巧。你可能已經(jīng)在自己的布局中使用了Toolbar ，它允許你更加自由的自定義其外觀與布局的其余部分融為一體。Design library把這種設(shè)計(jì)帶到了更高的水平，使用AppBarLayout可以讓你的Toolbar與其他View（比如TabLayout的選項(xiàng)卡）能響應(yīng)被標(biāo)記了ScrollingViewBehavior的View的滾動事件。

注意項(xiàng)：

當(dāng)用戶滾動RecyclerView，AppBarLayout可以這樣響應(yīng)滾動事件：

根據(jù)子view的滾動標(biāo)志（scroll flag）來控制它們?nèi)绾芜M(jìn)入（滾入屏幕）與退出（滾出屏幕）。

Flag包括：

scroll：所有想滾動出屏幕的View都需要設(shè)置這個(gè)flag，沒有設(shè)置這個(gè)flag的View將被固定在屏幕頂部。enterAlways：這個(gè)flag讓任意向下的滾動都會導(dǎo)致該View變?yōu)榭梢?，啟用快速“返回模式”。enterAlwaysCollapsed：當(dāng)你的視圖已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時(shí)，你的視圖只能已最小高度進(jìn)入，只有當(dāng)滾動視圖到達(dá)頂部時(shí)才擴(kuò)大到完整高度。exitUntilCollapsed：this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting。

特別注意：所有使用scroll flag的View都必須定義在沒有使用scroll flag的View前面，這樣才能確保所有的View從頂部退出，留下固定的元素。

PS一句：CoordinatorLayout還提供了layout_anchor和layout_anchorGravity屬性一起配合使用，可以用于放置floating view，比如FloatingActionButton與其他View的相對位置。相見Demo中演示。

2-8 AppBarLayout控件

這個(gè)沒啥解釋的，就是一個(gè)ViewGroup，配合ToolBar與CollapsingToolbarLayout等使用。就是一個(gè)純?nèi)萜黝悺?/p>

無特殊注意項(xiàng)。

2-9 CollapsingToolbarLayout控件

可伸縮折疊的Toolbar （Collapsing Toolbar），直接添加Toolbar到AppBarLayout可以讓你使用enterAlwaysCollapsed和 exitUntilCollapsedscroll標(biāo)志，但是無法控制不同元素如何響應(yīng)collapsing的細(xì)節(jié)。這里使用了 CollapsingToolbarLayout的app:layout_collapseMode=”pin”來確保Toolbar在view折疊的時(shí)候仍然被固定在屏幕的頂部。還可以做到更好的效果，當(dāng)你讓CollapsingToolbarLayout和Toolbar在一起使用的時(shí)候，title 會在展開的時(shí)候自動變得大些，而在折疊的時(shí)候讓字體過渡到默認(rèn)值。必須注意，在這種情況下你必須在CollapsingToolbarLayout上調(diào)用 setTitle()，而不是在Toolbar上。除了固定住View，你還可以使用 app:layout_collapseMode=”parallax”（以及使用 app:layout_collapseParallaxMultiplier=”0.7”來設(shè)置視差因子）來實(shí)現(xiàn)視差滾動效果（比如 CollapsingToolbarLayout里面的一個(gè)ImageView），這中情況和CollapsingToolbarLayout的 app:contentScrim=”?attr/colorPrimary”屬性一起配合更完美。

有一件事情必須注意，那就是CoordinatorLayout并不知道FloatingActionButton或者AppBarLayout的內(nèi)部工作原理，它只是以Coordinator.Behavior的形式提供了額外的API，該API可以使子View更好的控制觸摸事件與手勢以及聲明它們之間的依賴，并通過onDependentViewChanged()接收回調(diào)。

可以使用CoordinatorLayout.DefaultBehavior(你的View.Behavior.class)注解或者在布局中使用app:layout_behavior=”com.example.app.你的View$Behavior”屬性來定義view的默認(rèn)行為。 framework讓任意View和CoordinatorLayout結(jié)合在一起成為了可能。

注意項(xiàng)：

注意項(xiàng)上面描述部分已經(jīng)聲明，不需要額外說明。

3 總結(jié)

到此2015 Google IO的新suppory包控件完全介紹完畢。詳細(xì)細(xì)節(jié)可以翻墻閱讀AD的developer->tools->support library。至此只能期待Android M盡快發(fā)布呀。

PS：已經(jīng)用上了Android Studio 1.3預(yù)覽版，只是M得編譯會出錯(cuò)，有BUG，別的暫時(shí)沒發(fā)現(xiàn)啥區(qū)別，還有一點(diǎn)，比1.2貌似快了一點(diǎn)，哈哈，是我心里作用么？

Demo的github下載地址:?Demo下載