知識點

1. 理解 Material Design 中屏幕的平面陰影和觸摸響應
2. 熟悉平面的使用規范
3. 掌握 Material Design 樣式的自定義平面創建過程

參考資料

udacity-在 Android 應用中使用材料設計

屏幕平面

屏幕上的一切都在其中的一個平面上，包括所有文字、圖標、照片、按鈕等人和 UI 元素。雖然這些平面具有表明現實行為的實體屬性，但它們又不像現實世界的行為一樣收到限制。我們可以通過平面的一小部分的物理性，來顯示事物之間的差異性和相關性。

平面陰影

一般來說，物體離我們越近就越容易在視覺上引起我們的注意，根據物體的尺寸，以及它們覆蓋和投射陰影的方式，我們能區分哪些物體離我們更近，根據它們背后的物體來做出判斷。所以我們可以在 UI 中使用深度列表將注意力引導至重要的元素。

在 2D 屏幕中如何運用這些概念呢？

我們使用陰影來傳遞一個平面相對於另一個平面的高度，離你更近的平面將投射出更大的陰影。要正確繪制出這些陰影，需要進行大量復雜的數學運算。而我們只需在 Android 上對代碼進行少量編輯，就能動態繪制出這些陰影來。

具體可查看官方文檔-高度和陰影

使用平面

一個平面就是一個容納內容的容器，它能夠實現與其它元素的分組和分離。

根據內容創建平面

從經驗上講，如果內容屬於同類，瀏覽和對比就十分重要，所以應該將它們放在同一個平面上，如果我們需要展現不同類型的條目，將它們放置在各自的平面上是最合適的。

引導注意力是一門強大的技術。但是需要恰當的使用，平面上一次性出現過多的獨立平面會分散注意力。從經驗上講，最好不要一次性在屏幕上出現 5 個以上的平面。

實現平面

要創建平面，關鍵是設置高度值(elevation)。高度是指平面與背面之間的距離（the distance above the back plane），數值越大，陰影越大(higher values produce larger shadows)，也越分散，有一種離底面更高更遠的視覺感。

FAB（FloatingActionButton）-懸浮操作按鈕

Material Design 的標志性設計模式之一就是 FAB。它懸浮在應用內容的上方，可以促使我們進行重要的操作。

FAB 具有標准的尺寸和高度，所以它在各應用程序之間很容易被辨認出來。它的直徑為 40 或 56dp。通常靜止高度為 6dp，當被按下時，這個高度將達到 12dp。疊放在某個適當角落時可以很好的對接。

避免在應用中過度使用它，注意在每個屏幕中最多使用一個 FAB。不是每個屏幕上都需要一個 FAB，但如果屏幕上有一個明確的操作，那么這就是凸顯它的一個好方法。如果你對確認哪個操作才是 FAB 感到糾結，那就意味着你很可能不需要 FAB。

什么時候用浮動操作按鈕？

是你正在做的一件很明確的事，很可能在打開應用時就想這么做。

平面觸摸響應

在 Material Design 中，響應觸摸的視覺反饋主要有兩種形式。

一種是微弱的波紋效果，從你的指尖向外擴散，一直延伸到所在平面的邊界；對於無邊界的元素，波紋將延伸至足夠遠的位置，使你感受到元素的大小。

我們有時稱之為“墨水波紋”（ink ripple），因為它是平面上擴散開來的數字墨水。

這種始於指尖的發散式動效是 Material Design 的一個關鍵主題。用戶觸發波紋效果，不僅僅能使用戶感受到自身對 UI 的操控感，還能使 UI 提供滿意的用戶體驗。

接下來看第二種形式。

對於較小的交互式平面，平面本身可以抬升至你指尖的位置。

當按下 FAB 時，它會進行抬升以靠近你的指尖。

自定義添加水波／表面高度

設計支持庫已經有一個內置的 FAB 小部件，它已經具備波紋效果和平面高度。自定義一個類似的小部件，可以讓我們明白背后的原理。

創建 drawable/oval_shape 文件

<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
    <solid android:color="?attr/colorAccent"/>
</shape>

創建drawable/fab_plus矢量圖文件

通過 Android Studio 創建矢量圖資源，new -> Vector Asset ->

在 drawable 目錄下會生成 vector資源文件

<vector xmlns:android="http://schemas.android.com/apk/res/android"
 android:width="24dp"
 android:height="24dp"
 android:viewportWidth="24.0"
 android:viewportHeight="24.0">
    <path
 android:fillColor="#fafafa"
 android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</vector>

添加一個波紋效果

要啟用波紋效果，我們需要將按鈕背景從靜態形狀變成被波紋標簽包裹的形狀。

創建 drawable/oval_ripple 文件，需要注意的是波紋標簽的引用需要 minSdkVersion 為 21 或以上版本。

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
 android:color="?android:colorControlHighlight">
    <item>
        <shape android:shape="oval">
            <solid android:color="?android:colorAccent"/>
        </shape>
    </item>
</ripple>

其中的 colorControlHighlight 是波紋和列表選擇器等使用的顏色，oval_shape 和 oval_ripple 的主要區別在於我們的形狀是被波紋標簽包裹的。

添加觸摸響應

對自定義的小部件添加一個觸摸響應，使其進行抬升來迎合我們的觸摸。我們可以添加一個狀態列表動畫器（state list animator）來運行一個動畫，在用戶觸摸按鈕時運行動畫。

在 animator 目錄下，創建 fab_raise 文件

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_pressed="true">
        <objectAnimator
 android:duration="@android:integer/config_shortAnimTime"
 android:propertyName="translationZ"
 android:valueTo="8dp"
 android:valueType="floatType"/>
    </item>
    <item>
        <objectAnimator
 android:duration="@android:integer/config_shortAnimTime"
 android:propertyName="translationZ"
 android:valueTo="0dp"
 android:valueType="floatType"/>
    </item>
</selector>

有兩個動畫器（object animator），一個在按鈕被按下時使用，一個在按鈕被釋放時使用。注意我們如何將按鈕的 Z 過度屬性 translationZ 制作成動畫。

最終對 ImageButton 的屬性設置

 <ImageButton
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:layout_gravity="end|bottom"
            android:layout_marginRight="4dp"
            android:layout_marginBottom="4dp"
            android:elevation="6dp"
            android:src="@drawable/fab_plus"
            android:layout_alignParentBottom="true"
            android:background="@drawable/oval_ripple"
           android:stateListAnimator="@animator/fab_raise"
            android:id="@+id/imageButton" />

總結

Material Design 中設計平面的理念，就是通過平面陰影和平面觸摸響應來使得 UI 變得生動和直觀。我們應該根據實際的情況合理使用平面。