page.title=使用材料設計風格 @jd:body

本課程示範

  1. 自訂色板
  2. 自訂狀態列
  3. 設計風格個別視圖

您也應該閱讀

新的材料設計風格提供：

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

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

材料設計風格定義為：

如需您可以使用的材料樣式清單，請參閱 {@link android.R.style 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，並且視需要調整視窗標幟。 您也可以使用 {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} 方法顯示動畫或進行淡化。

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

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

設計風格個別視圖

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