Material Design 開發利器：Android Design Support Library 介紹

轉自：https://blog.leancloud.cn/3306/

 

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效果請點擊（打不開時候注意FQ）

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 展示的時候自動上移，消失的時候自動復位，全部這一切都不須要寫任何代碼。

查看效果請點擊（打不開時候注意FQ）

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 都是很是重要的工具，你們快來動手試試吧。