直接前往內容

最常造訪的網頁

最近瀏覽的網頁

navigation

定義陰影和裁剪視圖

材料設計為 UI 元素引入高度的概念。高度有助使用者了解每個元素的相對重要性並將焦點放在手邊的工作上。

視圖的高度以 Z 屬性表示,決定其陰影的視覺外觀:視圖的 Z 值越高,投射範圍越大,陰影也就越柔和。 Z 值較高的視圖會遮住 Z 值較低的視圖。然而,視圖的 Z 值不會影響視圖的大小。

陰影是由較高的上層視圖繪製,因此也和標準視圖裁剪一樣,預設由上層視圖裁剪陰影。

當小工具在執行某些操作動作而暫時升高到視圖平面的上方時,高度對於建立動畫也非常實用。

如需有關材料設計高度的詳細資訊,請參閱 3D 空間中的物件

指定視圖的高度

視圖的 Z 值有兩個部分:

Z = elevation + translationZ

圖 1 - 不同視圖高度的陰影。

如要在版面配置定義中設定視圖的高度,請使用 android:elevation 屬性。 如果要在操作行為的程式碼中設定檢視的高度,請使用 View.setElevation() 方法。

如要在操作行為的程式碼中設定檢視的高度,請使用 View.setTranslationZ() 方法。

新的 ViewPropertyAnimator.z()ViewPropertyAnimator.translationZ() 方法可以很輕易地讓視圖高度變得栩栩如生。 如需詳細資訊,請參閱 ViewPropertyAnimator的 API 參考資料和屬性動畫開發人員指南

您也可以使用 StateListAnimator 以宣告的方式指定這些動畫。 當狀態變更觸發動畫時, 例如使用者按下按鈕,這會特別實用。 如需詳細資訊,請參閱動畫顯示視圖狀態變更

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

自訂視圖陰影和外框

檢視背景可繪項目的邊界決定了視圖陰影的預設形狀。外框代表圖形物件的外部形狀,並可定義輕觸回饋的漣漪區域。

我們來看看這個使用背景可繪項目定義的視圖:

<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() 方法或 android:clipToOutline 屬性,將視圖裁剪為其外框區域。 根據 Outline.canClip() 方法的定義,只有長方形、圓形和圓角長方形的外框才支援裁剪。

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

裁剪視圖是一種耗費資源的操作,所以請不要將您用來裁剪視圖的形狀做成動畫。 如果想要達到這種效果,請使用顯示效果動畫。

本網站使用 Cookie 儲存你在此指定的語言和顯示選項偏好設定。

掌握有關 Android 開發人員的最新消息和實用訣竅,協助你製作最受歡迎的 Google Play 內容。

* 必填欄位

訂閱成功!

在 WeChat 上追蹤 Google Developers

你要以瀏覽這個網站嗎?

你要求以顯示這個網頁,但你為此網站指定的語言偏好設定為

是否要變更語言偏好設定並改用瀏覽網站?稍後如要變更語言偏好設定,請利用位在每個網頁最下方的語言選單來調整設定。

你的 API 層級必須達 以上才能存取這個級別

本說明文件已隱藏,因為你為該文件選取的 API 層級為 。使用左側導覽列上方的選取工具即可變更說明文件的 API 層級。

如需進一步瞭解如何為應用程式指定 API 層級的相關資訊,請參閱 Supporting Different Platform Versions (支援不同的平台版本) (英文)。

Take a short survey?
Help us improve the Android developer experience. (April 2018 — Developer Survey)