樣式與主題

試用 Compose
Jetpack Compose 是 Android 推薦的 UI 工具包。瞭解如何在 Compose 中使用主題設定。
Compose 中的設計系統 →

Android 上的樣式和主題可讓您區分應用程式設計的詳細資料與 UI 結構和行為，與網頁設計中的樣式表類似。

樣式是一組屬性，可指定單一項目的外觀 View。樣式可指定屬性 例如字型顏色、字型大小、背景顏色等等

「主題」是套用至整個應用程式、活動或檢視畫面的一系列屬性 而不只是個別檢視區塊套用主題時，應用程式中的每個檢視畫面，或 活動會套用每個支援的主題屬性。主題也能將樣式套用到 非檢視畫面元素，例如狀態列和視窗背景。

樣式和主題會在 樣式資源檔案 res/values/，通常命名為 styles.xml。

圖 1. 套用至同一活動的兩個主題： Theme.AppCompat (左) 和 Theme.AppCompat.Light (右)。

主題與樣式

主題和樣式有許多相似之處，但用途不同。主題和 樣式具有相同的基本結構，也就是將屬性對應到 資源。

「樣式」會指定特定檢視畫面類型的屬性。舉例來說，某個樣式可能 指定按鈕的屬性您在樣式中指定的每個屬性都是可於 版面配置檔案將所有屬性擷取為樣式，就能輕鬆使用及維護 並在多個小工具中同步處理不同裝置的資料

「主題」會定義具名資源的集合，可供樣式、版面配置、 小工具等。主題會將語意名稱 (例如 colorPrimary) 指派給 Android 再複習一下，機構節點 是所有 Google Cloud Platform 資源的根節點

樣式和主題應相輔相成。例如，您可能有樣式指定了 每個按鈕都包含 colorPrimary，而另一個部分則是 colorSecondary。主題會提供這些色彩的實際定義。時間 裝置進入夜間模式，您的應用程式可以從「淺色」切換為「淺色」改成「深色」背景主題主題 變更所有資源名稱的值您不需要變更樣式，因為 樣式使用語意名稱，而非特定色彩定義。

如要進一步瞭解主題和樣式如何搭配運作，請參閱這篇網誌文章 Android 樣式：主題和樣式。

建立和套用樣式

如要建立新樣式，請開啟專案的 res/values/styles.xml 檔案。適用對象 請按照下列步驟操作：

  1. 新增 <style> 元素，並具備可唯一識別樣式的名稱。
  2. 為每個要定義的樣式屬性新增 <item> 元素。 每個項目中的 name 都會指定您未在 版面配置。<item> 元素中的值是該屬性的值。

舉例來說，假設您定義了下列樣式：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

可依下列方式將樣式套用至檢視畫面：

<TextView
    style="@style/GreenText"
    ... />

只要檢視畫面接受，樣式中指定的每個屬性就會套用至該檢視畫面。檢視畫面 會忽略所有不接受的屬性。

然而，您通常 為整個應用程式、活動或集合套用樣式做為主題 查看。

擴充和自訂樣式

自行建立樣式時，請一律從架構或支援架構擴充現有樣式 程式庫，可讓您維持與平台 UI 樣式的相容性。如要擴充樣式，請指定 選擇要透過 parent 屬性擴充的樣式。之後，您就能覆寫 樣式屬性並添加新屬性

舉例來說，您可以沿用 Android 平台的預設文字外觀，並將 如下：

<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

不過，請一律沿用 Android 支援資料庫的核心應用程式樣式。「 支援資料庫會為可用的 UI 屬性進行最佳化，為每個樣式進行最佳化調整，藉此提供相容性 每個版本支援資料庫樣式的名稱通常與平台的樣式類似。 但包含 AppCompat。

若要繼承程式庫或自有專案的樣式，請宣告父項樣式名稱 沒有上述範例所示的 @android:style/ 部分。例如： 以下範例沿用支援資料庫的文字外觀樣式：

<style name="GreenText" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#00FF00</item>
</style>

您也可以擴充樣式的 並帶有點標記法，而不是使用 parent 屬性。也就是在 加入樣式名稱以及要沿用的樣式名稱，並以半形句號分隔。個人中心 一般來說，只有在擴充自己的樣式時，才會進行這項操作，而不適用於其他程式庫的樣式。例如： 以下樣式會沿用上述範例中 GreenText 的所有樣式 然後將文字放大

<style name="GreenText.Large">
    <item name="android:textSize">22dp</item>
</style>

您可以鏈結更多 。

如要尋找可以使用 <item> 標記宣告的屬性，請參閱「XML」 屬性」表格。支援所有檢視畫面 基本 XML 屬性 View 類別，許多檢視畫面也會新增專屬的特殊屬性。舉例來說， TextView XML 屬性 加入 android:inputType。 屬性，例如套用至接收輸入內容的文字檢視區塊，例如 「EditText」小工具。

套用樣式做為主題

建立主題的方式與建立樣式的方式相同。差別在於如何套用： 而不是在檢視區塊中使用 style 屬性套用樣式，而是以 android:theme 標記上的 <application> 屬性或 AndroidManifest.xml 檔案中的 <activity> 標記。

以下舉例說明如何套用 Android 支援資料庫的 Material Design「dark」主題 整個應用程式：

<manifest ... >
    <application android:theme="@style/Theme.AppCompat" ... >
    </application>
</manifest>

將「淺色」主題套用至單一活動的方法如下：

<manifest ... >
    <application ... >
        <activity android:theme="@style/Theme.AppCompat.Light" ... >
        </activity>
    </application>
</manifest>

應用程式或活動中的每個檢視畫面，都會套用 套用該主題的所有屬性如果檢視畫面僅支援樣式中宣告的部分屬性，系統就會套用 並忽略不支援的屬性。

從 Android 5.0 (API 級別 21) 和 Android 支援資料庫 22.1 版開始，您也可以指定 將 android:theme 屬性套用至版面配置檔案中的檢視畫面。這麼做會修改 這個 View 和任何子項檢視畫面，這對於變更特定區域中的主題調色盤很有幫助 介面部分

先前的範例說明如何套用主題，例如 Theme.AppCompat Android 支援資料庫提供的功能然而，您通常會希望自訂主題以符合 鎖定應用程式品牌來宣傳產品最佳做法是從支援資料庫擴充這些樣式 但會覆寫部分屬性，如下一節所述。

樣式階層

Android 提供多種在 Android 應用程式中設定屬性的方法。例如： 您可以直接在版面配置中設定屬性、將樣式套用至檢視畫面、為版面配置套用主題，以及 甚至透過程式輔助方式設定屬性

選擇如何設定應用程式的樣式時，請留意 Android 的樣式階層。一般來說，請使用 盡量保持主題和樣式如果您在 多個地點時，請參考以下清單來決定最終套用的屬性。清單是 由高優先順序排列

  1. 使用文字跨度將字元或段落層級樣式設定套用至 TextView 衍生 類別
  2. 透過程式輔助方式套用屬性。
  3. 直接將個別屬性套用至檢視區塊。
  4. 將樣式套用至檢視畫面。
  5. 預設樣式。
  6. 將主題套用至一組檢視畫面、活動或整個應用程式。
  7. 套用特定檢視畫面專屬的樣式，例如設定 TextAppearance 在 TextView。

圖 2. 來自 span 的樣式設定會覆寫來自 textAppearance 的樣式設定。

文字外觀

樣式的其中一項限制是，您只能將一個樣式套用至 View。在 TextView不過，您也可以指定 TextAppearance 屬性 運作方式與樣式類似，如以下範例所示：

<TextView
    ...
    android:textAppearance="@android:style/TextAppearance.Material.Headline"
    android:text="This text is styled via textAppearance!" />

TextAppearance 可讓您定義文字專屬樣式，同時保留 View 可用於其他用途。但請注意，如果您已定義任何文字屬性 直接在 View 或在樣式中，這些值會覆寫 TextAppearance 值。

TextAppearance 支援 TextView 的樣式屬性子集 優惠。如需完整的屬性清單，請參閱 TextAppearance。

以下列舉幾個常見的 TextView 屬性： lineHeight[Multiplier|Extra], lines, breakStrategy和 hyphenationFrequency。 TextAppearance 適用於字元層級，而非段落層級，因此 系統不支援影響整個版面配置的屬性。

自訂預設主題

使用 Android Studio 建立專案時，應用程式會透過下列方式將質感設計主題套用至您的應用程式： 如專案的 styles.xml 檔案所定義。這個AppTheme樣式 會擴充支援資料庫的主題，並包含所使用色彩屬性的覆寫值 例如應用程式列和 懸浮動作按鈕 (如有使用)。因此 就能藉由更新提供的色彩，快速自訂應用程式的顏色設計。

例如，styles.xml 檔案看起來會像這樣：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

樣式值實際上是參照其他 顏色資源，定義於 專案的 res/values/colors.xml 檔案這是您編輯檔案以變更色彩。 詳情請參閱 Material Design 顏色總覽 透過動態色彩和其他自訂顏色改善使用者體驗。

確認色彩後，請更新 res/values/colors.xml 中的值：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   Color for the app bar and other primary UI elements. -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   A darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars. -->
    <color name="colorPrimaryDark">#303F9F</color>

    <!--   a secondary color for controls like checkboxes and text fields. -->
    <color name="colorAccent">#FF4081</color>
</resources>

接著，您可以覆寫需要的其他樣式。舉例來說，您可以變更活動 背景顏色，如下所示：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="android:windowBackground">@color/activityBackground</item>
</style>

如要查看可在主題中使用的屬性清單，請參閱 R.styleable.Theme。新增時 版面配置中的檢視畫面樣式，您也可以查看「XML 屬性」 資料表類別參照中的資料。舉例來說，所有檢視表都支援 基礎 View 中的 XML 屬性 類別。

大多數的屬性都適用於特定類型的檢視畫面，有些屬性則適用於所有檢視畫面。不過 文章中列出了幾個佈景主題屬性 「R.styleable.Theme」都適用於 活動視窗，而非版面配置中的檢視畫面。舉例來說，windowBackground 會將 視窗背景和 windowEnterTransition 定義要用在 活動開始時詳情請參閱開始 使用動畫建立的活動

Android 支援資料庫也提供其他屬性，供您用來自訂主題 從 Theme.AppCompat 延伸，例如：colorPrimary 上述範例我們可以看到 程式庫的 attrs.xml 檔案。

支援資料庫也提供您您可能會想要擴充的各種主題 而不是上述範例中顯示的查看可用主題最好的地方是 這個 程式庫的 themes.xml 檔案。

新增版本專屬樣式

如果新版 Android 新增要使用的主題屬性，可以將這些屬性新增至主題。 仍能與舊版本相容只需一個 styles.xml 檔案即可 儲存在含有values 資源版本 限定詞：

res/values/styles.xml        # themes for all versions
res/values-v21/styles.xml    # themes for API level 21+ only

由於 values/styles.xml 檔案中的樣式適用於所有版本， values-v21/styles.xml 中的主題可沿用這些主題。換言之，我們不會 複製樣式時，從「底數」開始再依據版本需求擴充 。

例如，若要宣告 Android 5.0 (API 級別 21) 以上版本的視窗轉換，您需要 改用新屬性因此，res/values/styles.xml 的基本主題看起來會像這樣 ：

<resources>
    <!-- Base set of styles that apply to all versions. -->
    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryTextColor</item>
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <!-- Declare the theme name that's actually applied in the manifest file. -->
    <style name="AppTheme" parent="BaseAppTheme" />
</resources>

然後在 res/values-v21/styles.xml 中新增版本專屬樣式，如下所示：

<resources>
    <!-- extend the base theme to add styles available only with API level 21+ -->
    <style name="AppTheme" parent="BaseAppTheme">
        <item name="android:windowActivityTransitions">true</item>
        <item name="android:windowEnterTransition">@android:transition/slide_right</item>
        <item name="android:windowExitTransition">@android:transition/slide_left</item>
    </style>
</resources>

您現在可以在資訊清單檔案中套用 AppTheme，系統會選取樣式 各個系統版本提供的 CPU 版本

如要進一步瞭解如何為不同裝置使用額外資源，請參閱 提供額外資源。

自訂小工具樣式

架構和支援資料庫中的每個小工具都有預設樣式。舉例來說 設定應用程式樣式時，請使用支援資料庫提供的主題， Button 會使用 Widget.AppCompat.Button 樣式。如要將其他小工具樣式套用到 按鈕，您可以利用版面配置檔案中的 style 屬性完成此操作。舉例來說， 以下會套用程式庫的無邊框按鈕樣式：

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    ... />

如果想將這個樣式套用到所有按鈕，可在主題的 buttonStyle，如下所示：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
    ...
</style>

您也可以擴充小工具樣式，就像擴充其他任何樣式一樣。 然後在版面配置或主題中套用自訂小工具樣式。

其他資源

如要進一步瞭解主題和樣式，請參閱下列其他資源：

網誌文章