Material Design 推出 UI 元素的高度。高度可協助使用者瞭解每個元素的相對重要性,將注意力集中在目前的工作上。
檢視區塊的高度 (由「Z」屬性表示) 會決定其陰影的視覺外觀。「Z」值較高的檢視畫面會顯示較大、較柔和的陰影,並遮蔽「Z」值較低的檢視畫面。不過,檢視畫面的「Z」值不會影響檢視畫面的大小。
![顯示檢視畫面高度如何產生陰影的圖片。](https://developer.android.com/static/images/ui/material-design/cast-shadows_2x.png?authuser=9&hl=zh-tw)
陰影是由高度提高的父項所繪製。這些物件在標準檢視情況下會遭到裁剪,且預設為由父項裁剪。
高度也可用於建立動畫,其中小工具會在執行動作時暫時高於檢視平面。
詳情請參閱「質感設計中的高度」。
指定視圖的高度
檢視畫面的 Z 值有兩個元件:
- 高度:靜態元件
- 翻譯:動畫使用的動態元件
Z = elevation + translationZ
Z 值的測量單位為 dp (密度獨立像素),
![顯示不同高度 (以 dp 為單位) 不同陰影的圖片](https://developer.android.com/static/training/material/images/shadows-depth.png?authuser=9&hl=zh-tw)
如要設定檢視畫面的預設 (靜止) 高度,請使用 XML 版面配置中的 android:elevation
屬性。如要在活動程式碼中設定檢視畫面的高度,請使用 View.setElevation()
方法。
如要設定檢視畫面的平移,請使用 View.setTranslationZ()
方法。
ViewPropertyAnimator.z()
和 ViewPropertyAnimator.translationZ()
方法可讓您為檢視畫面高度製作動畫。詳情請參閱 ViewPropertyAnimator
的 API 參考資料,以及屬性動畫開發人員指南。
您也可以使用 StateListAnimator
,以宣告方式指定這些動畫。當狀態變更觸發動畫時 (例如使用者輕觸按鈕),這項功能就特別實用。詳情請參閱「使用 StateListAnimator 以動畫方式呈現檢視畫面狀態變更」。
自訂檢視區塊陰影和輪廓
檢視畫面背景可繪項目的邊界會決定其陰影的預設形狀。「外框」代表圖形物件的外形狀,並定義觸控回饋的漣漪效果區域。
請考量以下使用背景可繪項目定義的檢視區塊:
<TextView android:id="@+id/myview" ... android:elevation="2dp" android:background="@drawable/myrect" />
背景可繪項目定義為帶有圓角的矩形:
<!-- res/drawable/myrect.xml --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#42000000" /> <corners android:radius="5dp" /> </shape>
檢視畫面會投射圓角的陰影,因為背景可繪項目會定義檢視區塊的輪廓。提供自訂外框會覆寫檢視畫面陰影的預設形狀。
如要在程式碼中定義檢視畫面的自訂外框,請按照下列步驟操作:
- 擴充
ViewOutlineProvider
類別。 - 覆寫
getOutline()
方法。 - 使用
View.setOutlineProvider()
方法,將新的大綱提供者指派給檢視畫面。
您可以使用 Outline
類別中的方法,建立帶有圓角的橢圓和矩形外框。檢視畫面的預設大綱提供者會從檢視畫面背景取得外框。如要防止檢視畫面投射陰影,請將大綱提供者設為 null
。
短片觀看次數
裁剪檢視畫面可用於變更檢視畫面的形狀。您可以剪輯檢視畫面以便與其他設計元素保持一致,或根據使用者輸入內容變更檢視畫面形狀。您可以使用 View.setClipToOutline()
方法,將檢視畫面剪輯至其外框區域。只有矩形、圓形和圓形矩形的外框支援裁剪 (依 Outline.canClip()
方法而定)。
如要將檢視畫面裁剪為可繪項目的形狀,請將可繪項目設為檢視區塊的背景 (如上例所示),然後呼叫 View.setClipToOutline()
方法。
裁剪檢視畫面是耗費大量資源的作業,因此請不要為用來剪輯檢視畫面的形狀套用動畫效果。如要達到此效果,請使用顯示動畫。