Android Design Support Library 介紹

標籤：

本文翻譯自著名部落格 Android Developers，原作者是 Ian Lake，點擊此處可查看 原文 。

Android 5.0 Lollipop 是迄今為止最重大的一次發布，很大程度上是因為 material design —— 這是一門新的設計語言，它重新整理了整個 Android 的使用者體驗。但是對於開發人員來說，要設計出完全符合 material design 哲學的應用，是一個很大的挑戰。Android Design Support Library 對此提供了很好的支援，裡面彙集了很多重要的 material design 控制項，支援所有 Android 2.1 及後續版本。裡面你可以看到 navigation drawer view、floating labels、floating action button、snackbar、tabs，以及一套將它們緊密結合在一起的動作與捲動方塊架。

Navigation View（導航視圖）

無論從應用標識、內容導航，還是設計一致性來講，navigation drawer 都是首當其衝的焦點。現在，NavigationView 讓導覽列變得更簡單，它提供了 navigation drawer 需要的架構，以及通過資源檔來自訂更多功能表項目的能力。

 

你只需要將 NavigationView 作為 DrawerLayout 的內容視圖來使用即可，例如：

這裡你會注意到兩個屬性：app:heanderLaytout 用來控制 header 部分的布局；app:menu 指定了菜單資源。NavigationView 自動處理了狀態列的變化，保證可以在 API 21+ 的裝置上正確運行。

最簡單的 drawer 菜單就是一個允許選擇的功能表項目集合，例如：

選中的菜單會高亮顯示，以提醒使用者當前選擇的是哪個功能表項目。

你也可以在菜單中使用 subheader 來實現獨立的分組：

調用 setNavigationItemSelectedListener() 後，在功能表項目被選中的時候，你會通過OnNavigationItemSelectedListener 得到回調。在處理回調時，你會知道是哪個功能表項目被點擊，此時你可以處理選擇事件，修改選中狀態，載入新的內容，以及通過代碼來關閉 drawer，或者其他任何你想執行的操作。

文字輸入時的懸浮標籤

儘管 EditText 已經為 material design 做了一些改善，但是還不夠，譬如它在我們輸入第一個字元的時候，就會自動隱藏掉提示標籤。現在你該使用 TextInputLayout 了，它會在使用者開始輸入之後，自動將提示標籤懸浮到 EditText 上方，這樣使用者就永遠都能知道輸入內容的上下文。

另外，你也可以通過調用 setError() 方法，在 EditText 下方顯示一個出錯提示訊息。多麼貼心的設計，有沒有？

Floating Action Button（浮動操作按鈕）

Floating action button 是一個圓形按鈕，代表當前頁面最重要的互動動作。Design Library 裡面的 FloatingActionButton 給了你一個簡單一致的實現，它會預設使用你主題中 colorAccent 屬性定義的色調。

在標準尺寸之外，它也支援 mini 尺寸。FloatActionButton 繼承自 ImageView，所以你也可以使用android:src 或者其他方法（如 setImageDrawable()）來控制它的外觀。

Snackbar

如果要提供一個輕量、快速的操作反饋方式，那就非 Snackbar 莫屬了。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 的第一個參數，Snackbar 會試圖尋找合適的父視圖，來確保它能顯示在底部的正確位置。

Tabs（選項卡）

在應用內，通過 tab 在不同視圖間切換，這不是 material design 中的新概念。Tabs 一般用來作頂層導航，或者組織、展示應用內不同分組的內容。如所示：

Design Library 的 TabLayout 控制項實現了固定 tab（所有 tab 平分秋色，寬度固定）和滾動 tab（寬度根據標題長度自適應，可以水平滑動）兩種形式，你可以用代碼來添加 tab：


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


如果你使用 ViewPager 來水平分頁，可直接在 PagerAdapter.getPageTitle() 中來建立 tab，最後通過 setupWithViewPager() 方法將它們綁定在一起。這能確保內容變化時 tab 和 ViewPager 會自動同步起來。

CoordinatorLayout、動畫和滾屏

打造一個符合 material design 風格的應用，獨特的視覺效果只是一方面，動作和手勢也是非常重要的一部分。 Material design 裡麵包含了大量的手勢，譬如點擊的波紋效果和其他一些有用的轉場動畫。Design Library 介紹了 CoordinatorLayout 的布局方式，它提供了一個附加層，用來控制子視圖間的點擊事件，Design Library 裡面很多控制項都使用了這種布局。

CoordinatorLayout 和浮動操作按鈕

FloatingActionButton 就是一個絕好的例子。當你將 FloatingActionButton 作為子項目加入 CoordinatorLayout，然後將 CoordinatorLayout 作為參數傳給 Snackbar.make() 的時候，Snackbar 沒有顯示到 FloatingActionButton 上面。FloatingActionButton 利用了 CoordinatorLayout 提供的額外回調介面，在 Snackbar 展現的時候自動上移，消失的時候自動複位，所有這一切都不需要寫任何代碼。

CoordinatorLayout 還提供了一個 layout_anchor 的屬性，連同 layout_anchorGravity 一起，可以用來放置與其他視圖關聯在一起的懸浮視圖（如 FloatingActionButton）。

CoordinatorLayout 和 App Bar

CoordinatorLayout 的另一個主要使用情境，則與 appbar（以前的 actionBar）和滾屏相關。你可能已經在布局裡面使用過 Toolbar，它允許你簡單修改外觀、整合表徵圖以和其餘部分一致。Design Library 將所有這些東西放到了下一級：使用 AppBarLayout，讓你的 Toolbar 和其他視圖（如 TabLayout 提供的 tab 視圖），可以響應 ScrollingViewBehavior 標記的同級視圖的滾動事件。此時你可以這樣來建立一個布局：

現在，隨著使用者滾動 RecyclerView， AppBarLayout 也會響應這些事件（通過使用子節點的 scroll flag 來控制它們如何滾入和滾出螢幕）。Flags 包括：

• scroll： 這個標誌會被設定到所有希望滾出螢幕的視圖上，如果不設定這一標誌，則視圖會被一直保留在螢幕頂部。
• enterAlways： 這個標誌會確保任何下滑滾屏都會觸發視圖的展現，等於開啟了一種「快速返回」模式。
• enterAlwaysCollapsed： 如果設定了 minHeight 和這個標誌，你的視圖通常會摺疊顯示，只有當滾動視圖已經到達了它的頂點以後才會開啟到完整高度。
• exitUntilCollapsed： 這個標誌會導致視圖在退出之前，一直被鎖定。

注意一點：所有設定了 scroll 標誌的視圖必須在未設該標誌的視圖之前進行聲明，這樣可以確保所有的滾動視圖都從頂部退出，而固定元素都不受影響。

可伸縮的 Toolbars

直接將 Toolbar 加到 AppBarLayout 中，你就可以設定 enterAlwaysCollapsed /exitUntilCollapsed 等滾動標誌，但是不同元素如何響應摺疊動作，你沒法更深入地控制。要達到這一點，你需要使用 CollapsingToolbarLayout：

通過使用 app:layout_collapseMode="pin" 來確保 Toolbar 會一直被保留在螢幕頂端。更進一步，當你組合使用 CollapsingToolbarLayout 和 Toolbar，在視圖完全展現的時候，標題會自動放大，當視圖摺疊的時候，標題則會過渡到預設字型大小。注意這時候你需要調用 CollapsingToolbarLayout 的 setTitle()，而不是 Toolbar 的相應方法。

除了將視圖固定在螢幕之外，你還可以設定 app:layout_collapseMode="parallax"（額外也需要增加 app:layout_collapseParallaxMultiplier="0.7" 這樣的屬性來設定視差乘數）來達到視差滾動的效果。這種用法搭配 app:contentScrim="?attr/colorPrimary" 屬性效果非常好，例如下面這樣：

CoordinatorLayout 和自訂視圖

還有一件重要的事情就是，CoordinatorLayout 並不是天生就理解 FloatingActionButton 或者 AppBarLayout 如何工作，它只是提供了一些 Coordinator.Behavior 的附加 API，允許子控制項來更好地控制點擊事件和手勢。

視圖也可以使用 CoordinatorLayout.DefaultBehavior(YourView.Behavior.class) 來定義一個預設的行為，或者在 layout 檔案中設定app:layout_behavior="com.example.app.YourView$Behavior" 來達到同樣的效果。

Design Library 架構允許任何視圖與 CoordinatorLayout 組合使用。

現發行

Design Library 現在已經公開發布了，請確認在 SDK manager 中升級 Android Support Repository。對於 Gradle 項目來講，你可以直接加入對 Design Library 的依賴：

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

注意 ：Design Library 依賴於 Support v4 和 AppCompat Support 庫，它們會自動被加進編譯依賴裡來。並且，這些新的 widget 在 Android Studio Layout 編輯器中也是可用的（在 CustomView 中找到他們）。

對於構建一個具有一流外觀和互動的現代應用，Design Library、AppCompat 和所有 Android Support Library 都是非常重要的工具，大家快來動手試試吧。

本條目發佈於 2015/06/04。屬於技術分享分類。作者是 Junwen Feng。

Android Design Support Library 介紹