Skip to content

Most visited

Recently visited

navigation

使用材料設計風格

新的材料設計風格提供:

您可根據品牌特性,使用您控制的色板以自訂材料設計風格的外觀。 您可以使用風格主題屬性,為行為欄和狀態列著色,如圖 3 所示。

系統小工具經過全新設計,有輕觸回饋動畫。您可以為應用程式自訂色板、輕觸回饋動畫,以及操作行為轉換。

材料設計風格定義為:

如需您可以使用的材料樣式清單,請參閱 R.style 的 API 參考資料。

圖 1.深色材料設計風格

圖 2.淺色材料設計風格


注意:材料設計風格只能在 Android 5.0 (API 級別 21) 及以上版本中使用。 v7 支援程式庫針對某些小工具提供使用材料設計樣式的設計風格,並支援自訂色板。 如需詳細資訊,請參閱維持相容性

自訂色板

如要自訂設計風格的基礎顏色來搭配您的品牌,在繼承材料設計風格時,請使用設計風格屬性定義您的自訂顏色:

<resources>
  <!-- inherit from the material theme -->
  <style name="AppTheme" parent="android:Theme.Material">
    <!-- Main theme colors -->
    <!--   your app branding color for the app bar -->
    <item name="android:colorPrimary">@color/primary</item>
    <!--   darker variant for the status bar and contextual app bars -->
    <item name="android:colorPrimaryDark">@color/primary_dark</item>
    <!--   theme UI controls like checkboxes and text fields -->
    <item name="android:colorAccent">@color/accent</item>
  </style>
</resources>

圖 3.自訂材料設計風格。

自訂狀態列

材料設計風格可讓您輕鬆自訂狀態列,因此,您可指定符合品牌的顏色,並提供足夠的對比來顯示白色的狀態圖示。 如要設定狀態列的自訂顏色,請在延伸材料設計風格時使用 android:statusBarColor 屬性。 android:statusBarColor 預設會繼承 android:colorPrimaryDark 的值。

您也可以自行繪製狀態列。例如,若您想在相片上面顯示透明的狀態列,卻想搭配一點深色的漸層以確保白色的狀態圖示清晰可見。 請將 android:statusBarColor 屬性設定為 @android:color/transparent,並且視需要調整視窗標幟。 您也可以使用 Window.setStatusBarColor() 方法顯示動畫或進行淡化。

注意:狀態列應該與主要工具列有清楚區分的輪廓,除非您想在這些列後面顯示全版的豐富圖像或媒體內容,或使用漸層以確保圖示清晰可見。

當您自訂瀏覽列和狀態列時,請讓兩者都變成透明,或者只修改狀態列。 在其他所有狀況下,瀏覽列都必須保持黑色。

設計風格個別視圖

XML 版面配置定義中的元素可以指定 android:theme 屬性,參考設計風格資源。 此屬性會修改元素和所有子元素的設計風格,對於改變介面特定部份的設計風格色板非常實用。

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

在 WeChat 上追蹤 Google Developers

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience. (Dec 2017 Android Platform & Tools Survey)