Design Support Library 相關知識

1 背景

上週一年一度的Google IO全球開發者大會剛剛結束，Google在Android這塊除過一些優化沒有太大亮點。在Android Developer和Android Developer Blog上看了下相關介紹，Google升級了新的Support Library。因此在這裏咱們就來率先體驗一把吧（這篇文章再草稿箱呆了三四天了。。。。終於有時間讓她見天日了）。

先看一下Demo演示效果圖，徹底使用了Google IO 2015的Design Support Library的控件進行代碼編寫。以下：

下載Demo請點擊：Design Support Library Demo

2 Design Support Library使用介紹

2-1 綜述

支持Android 2.1以上設備。

Gradle build script dependency：

compile 'com.android.support:design:22.2.0' //可修改版本號爲本身匹配

Design Support Library包含8個控件，具體以下：

Widget Name	Description
android.support.design.widget.TextInputLayout	強大帶提示的MD風格的EditText
android.support.design.widget.FloatingActionButton	MD風格的圓形按鈕，來自於ImageView
android.support.design.widget.Snackbar	相似Toast，添加了簡單的單個Action
android.support.design.widget.TabLayout	選項卡
android.support.design.widget.NavigationView	DrawerLayout的SlideMenu
android.support.design.widget.CoordinatorLayout	超級FrameLayout
android.support.design.widget.AppBarLayout	MD風格的滑動Layout
android.support.design.widget.CollapsingToolbarLayout	可摺疊MD風格ToolbarLayout

下面詳細說說這些控件的特性和使用注意項。

2-2 TextInputLayout控件

在MD中，使用TextInputLayout將EditText進行了封裝，提示信息會變成一個顯示在EditText之上的floating label，這樣用戶就始終知道他們如今輸入的是什麼，並且過分動畫是平滑的。還能夠在下方經過setError設置Error提示，使用比較簡單，因此不作過多說明，詳情見Demo源碼。

注意項：

TextInputLayout中至少嵌套一個EditText。

2-3 FloatingActionButton控件

一個負責顯示界面基本操做的圓形按鈕。Design library中的FloatingActionButton 實現了一個默認顏色爲主題中colorAccent的懸浮操做按鈕。除了通常大小的懸浮操做按鈕，它還支持mini size（fabSize=」mini」）。FloatingActionButton繼承自ImageView，你可使用android:src或者 ImageView的任意方法，好比setImageDrawable()來設置FloatingActionButton裏面的圖標。

無特別注意項，和普通控件相似。

2-4 Snackbar控件

Snackbar爲一個操做提供輕量級、快速的反饋。Snackbar顯示在屏幕的底部（有MD動畫效果浮現和消失），包含了文字信息與一個可選的操做按鈕。在指定時間結束以後自動消失。另外，用戶還能夠在超時以前將它滑動刪除。Snackbar被看做是比Toast更強大的快速反饋機制，你會發現他們的API很是類似。你應該注意到了make()方法中把一個View做爲第一個參數（Snackbar試圖找到一個合適的父親以確保本身是被放置於底部）。

無特殊注意項，和Toast相似。

2-5 TabLayout控件

經過選項卡的方式切換View並非MD中才有的新概念，它們和頂層導航模式或者組織app中不一樣分組內容（好比，不一樣風格的音樂）是同一個概念。 Design library的TabLayout 既實現了固定的選項卡（View的寬度平均分配），也實現了可滾動的選項卡（View寬度不固定同時能夠橫向滾動）。若是你使用ViewPager在 tab之間橫向切換，你能夠直接從PagerAdapter的getPageTitle() 中建立選項卡，而後使用setupWithViewPager()將二者聯繫在一塊兒。它可使tab的選中事件能更新ViewPager,同時 ViewPager 
的頁面改變能更新tab的選中狀態。

注意項：

若是你使用ViewPager在tab之間橫向切換，切記能夠直接從PagerAdapter的getPageTitle() 中建立選項卡，而後使用setupWithViewPager()將二者聯繫在一塊兒。

2-6 NavigationView控件

抽屜導航是app識別度與內部導航的關鍵，保持這裏設計上的一致性對app的可用性相當重要，尤爲是對於第一次使用的用戶。 NavigationView 經過提供抽屜導航所需的框架讓實現更簡單，同時它還可以直接經過菜單資源文件直接生成導航元素。把NavigationView做爲 DrawerLayout的內容視圖來使用。NavigationView處理好了和狀態欄的關係，能夠確保NavigationView在API21+ 設備上正確的和狀態欄交互。

注意項：

你能夠經過設置一個OnNavigationItemSelectedListener，使用其 setNavigationItemSelectedListener()來得到元素被選中的回調事件。它爲你提供被點擊的菜單元素，讓你能夠處理選擇事件、改變複選框狀態、加載新內容、關閉導航菜單，以及其餘任何你想作的操做。你會注意到NavigationView的兩個新自定義屬性以下：

new attr	description
app:headerLayout	控制頭部的佈局
app:menu	導航菜單的資源文件（也能夠在運行時配置）

2-7 CoordinatorLayout控件

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

CoordinatorLayout的另外一個用例是ActionBar與滾動技巧。你可能已經在本身的佈局中使用了Toolbar ，它容許你更加自由的自定義其外觀與佈局的其他部分融爲一體。Design library把這種設計帶到了更高的水平，使用AppBarLayout可讓你的Toolbar與其餘View（好比TabLayout的選項卡）能響應被標記了ScrollingViewBehavior的View的滾動事件。

注意項：

當用戶滾動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從頂部退出，留下固定的元素。

PS一句：CoordinatorLayout還提供了layout_anchor和layout_anchorGravity屬性一塊兒配合使用，能夠用於放置floating view，好比FloatingActionButton與其餘View的相對位置。相見Demo中演示。

2-8 AppBarLayout控件

這個沒啥解釋的，就是一個ViewGroup，配合ToolBar與CollapsingToolbarLayout等使用。就是一個純容器類。

無特殊注意項。

2-9 CollapsingToolbarLayout控件

可伸縮摺疊的Toolbar （Collapsing Toolbar），直接添加Toolbar到AppBarLayout可讓你使用enterAlwaysCollapsed和 exitUntilCollapsedscroll標誌，可是沒法控制不一樣元素如何響應collapsing的細節。這裏使用了 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並不知道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結合在一塊兒成爲了可能。

注意項：

注意項上面描述部分已經聲明，不須要額外說明。