Android Material Design_ZenDei技術網路在線

Android Material Design

文字輸入時的懸浮標簽

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

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Please input your name" />
    </android.support.design.widget.TextInputLayout>

另外，你也可以通過調用 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:23.2.0'

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

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