Material Design - 陰影與 View 的修剪

Material design 引入了 elevation 來表示 Z 軸高度
elevation 值越大則陰影越廣越柔和
而陰影是由該 view 的 parent draw 出來

一個 view 的 Z 軸高度是由 elevation 值與動畫時的 translationZ 相加而來
Z = elevation + translationZ
Z 的值是以 dp 為單位

Elevation 高度表

Elevation (dp)	Component
24	Dialog Picker
16	Nav drawer Right drawer Modal bottom Sheet
12	Floating action button (FAB - pressed)
9	Sub menu (+1dp for each sub menu)
8	Menu Card (picked up state) Raised button (pressed state)
6	Floating action button (FAB - resting elevation) Snackbar
4	App Bar
3	Refresh indicator Quick entry / Search bar (scrolled state)
2	Card (resting elevation) Raised button (resting elevation) Quick entry / Search bar (resting elevation)
1	Switch

而動畫相關的屬性是 ViewPropertyAnimator.z() 跟 ViewPropertyAnimator.translationZ()
還可以用 StateListAnimator 針對 View 不同 state 的切換製作動畫

至於陰影是由 background 的 drawable 決定其形狀
但陰影形狀也可以 custom
做法是繼承 ViewOutlineProvider 類別並 Override getOutline() 這個 method
透過 Outline 這個類別可以畫出圓形、矩形、圓角矩形作為陰影形狀
然後呼叫 View.setOutlineProvider(ViewOutlineProvider)
(若傳入 null 則 View 不會有陰影)

最後介紹一下跟 Outline 這個類別有關的 View 物件的修剪( Clipping )
如果我們有設定 setOutlineProvider(ViewOutlineProvider)
而且 ViewOutlineProvider.canClip () 必須要是 true
那我們就可以讓 View 照著 ViewOutlineProvider.getOutline() 回傳的圓形、矩形或圓角矩形形狀被裁切
對應的方法是 View.setClipToOutline(boolean clipToOutline)
layout xml 中的屬性則為 android:clipToOutline

View.setClipToOutline(boolean clipToOutline) 需要注意的規則如下：
只有無圓角的矩形可以被任意套用在 View 上
circular reveal animation 優先於 Outline clipping, 而 child 的 Outline clipping 優先於 parent

另外官方文章特別提到
由於透過這個方法修剪 View 是很耗效能的動作
所以請不要對套用到 View 上的裁剪形狀做動畫
如果要做出相似效果應該要考慮使用 Reveal Effect (這個之後在 Material Design 的自訂動畫部分再介紹)

相關資料：
Defining Shadows and Clipping Views

What is material? > Elevation and shadows