建立陰影及裁切檢視區塊

嘗試 Compose 方法
Jetpack Compose 是 Android 推薦的 UI 工具包。瞭解如何在 Compose 中使用主題設定。

Material Design 推出 UI 元素的高度。高度可協助使用者瞭解每個元素的相對重要性,將注意力集中在目前的工作上。

檢視區塊的高度 (由「Z」屬性表示) 會決定其陰影的視覺外觀。「Z」值較高的檢視畫面會顯示較大、較柔和的陰影,並遮蔽「Z」值較低的檢視畫面。不過,檢視畫面的「Z」值不會影響檢視畫面的大小。

顯示檢視畫面高度如何產生陰影的圖片。
圖 1Z 軸的高度和產生的陰影。

陰影是由高度提高的父項所繪製。這些物件在標準檢視情況下會遭到裁剪,且預設為由父項裁剪。

高度也可用於建立動畫,其中小工具會在執行動作時暫時高於檢視平面。

詳情請參閱「質感設計中的高度」。

指定視圖的高度

檢視畫面的 Z 值有兩個元件:

  • 高度:靜態元件
  • 翻譯:動畫使用的動態元件

Z = elevation + translationZ

Z 值的測量單位為 dp (密度獨立像素),

顯示不同高度 (以 dp 為單位) 不同陰影的圖片
圖 2 dp 中不同高度的不同陰影。

如要設定檢視畫面的預設 (靜止) 高度,請使用 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>

檢視畫面會投射圓角的陰影,因為背景可繪項目會定義檢視區塊的輪廓。提供自訂外框會覆寫檢視畫面陰影的預設形狀。

如要在程式碼中定義檢視畫面的自訂外框,請按照下列步驟操作:

  1. 擴充 ViewOutlineProvider 類別。
  2. 覆寫 getOutline() 方法。
  3. 使用 View.setOutlineProvider() 方法,將新的大綱提供者指派給檢視畫面。

您可以使用 Outline 類別中的方法,建立帶有圓角的橢圓和矩形外框。檢視畫面的預設大綱提供者會從檢視畫面背景取得外框。如要防止檢視畫面投射陰影,請將大綱提供者設為 null

短片觀看次數

裁剪檢視畫面可用於變更檢視畫面的形狀。您可以剪輯檢視畫面以便與其他設計元素保持一致,或根據使用者輸入內容變更檢視畫面形狀。您可以使用 View.setClipToOutline() 方法,將檢視畫面剪輯至其外框區域。只有矩形、圓形和圓形矩形的外框支援裁剪 (依 Outline.canClip() 方法而定)。

如要將檢視畫面裁剪為可繪項目的形狀,請將可繪項目設為檢視區塊的背景 (如上例所示),然後呼叫 View.setClipToOutline() 方法。

裁剪檢視畫面是耗費大量資源的作業,因此請不要為用來剪輯檢視畫面的形狀套用動畫效果。如要達到此效果,請使用顯示動畫