使用主題編輯器設計應用程式主題

Android Studio 提供一個名為「主題編輯器」的視覺助理，可協助您執行下列操作：

• 建立及修改應用程式的 主題。
• 針對不同的資源分類器調整主題。
• 以視覺化方式呈現色彩變更對常見 UI 元素的影響。

本資訊頁面說明可透過主題編輯器執行的基本工作，以及說明如何完成這項作業。

主題編輯器基本概念

本節說明如何存取主題編輯器，以及其編排方式。

存取主題編輯器

你可以透過以下兩種方式開啟主題編輯器：

• 在開啟的樣式 XML 檔案 (例如 styles.xml) 中，按一下檔案視窗右上角附近的「Open editor」(開啟編輯器)。
• 在「Tools」(工具) 選單中選擇「Theme Editor」(主題編輯器)。

主題編輯器導覽

主題編輯器的主畫面分成兩個部分。編輯器左側會顯示不同的 UI 元素，例如應用程式列或凸起的按鈕，看起來像您將目前的主題套用至這些樣式。編輯器右側會顯示目前預覽的主題名稱、已定義主題的模組，以及主題資源的設定 (例如「Theme parent」(主題父項) 和 colorPrimary)。您可以變更這些資源設定來修改設計主題。

主題和顏色

主題編輯器可讓您建立新的主題、修改現有主題，以及管理組成主題的色彩。

建立新主題

如要建立主題，請按照下列步驟操作：

1. 開啟主題編輯器右側附近的「Theme」(主題) 下拉式選單。
2. 按一下「Create New Theme」(建立新主題)。
3. 在「New Theme」(新增主題) 對話方塊中，輸入新主題的名稱。
4. 在「Parent theme name」(父項主題名稱) 清單中，按一下主題沿用初始資源的父項。

正在重新命名主題

如要重新命名主題，請按照下列步驟操作：

1. 開啟主題編輯器右側附近的「Theme」(主題) 下拉式選單。
2. 按一下「Rename」(重新命名)theme-name。
3. 在「Rename」(重新命名) 對話方塊中，輸入主題的新名稱。
4. (選用) 如要查看變更後的效果，請按一下「Preview」(預覽)。
5. 如要套用變更，請按一下「Refactor」(重構)。

變更色彩資源

如要變更現有的色彩資源 (例如 colorPrimary)，請按照下列步驟操作：

1. 在主題編輯器中，按一下您要變更資源名稱旁邊的彩色方塊。 「Resource」(資源) 對話方塊隨即顯示，左側顯示色彩群組清單，右側則顯示目前所選資源的色彩設定和資訊。
2. 您可以選取左側面板中的顏色，或定義新的顏色 (如下所述)，為主題資源設定顏色。

選取顏色

顏色會列於「Resources」對話方塊的左側欄中，並排列成下列群組。

• 專案：專案內的顏色。有些因為屬於您專案來源的一部分所以可以編輯， 而有些則因為屬於已在專案中加入程式庫的一部分所以無法編輯。
• android：這些是屬於 Android 命名空間的色彩資源。這些是 Android 架構的一部分，無法編輯。
• 主題屬性：這些是指目前所選主題的屬性。這些項目皆由主題參照，並依照您選取的主題而有所不同。主題屬性一律無法從「Resource」(資源) 對話方塊內編輯。

定義新顏色

圖 1. 顏色編輯器

1. 在「Resource」(資源) 對話方塊右上角的下拉式選單中，依序按一下「Add new resource」(新增資源) >「New color Value」(新增顏色值)。「Resource」(資源) 對話方塊會顯示可編輯的右側窗格，並含有空白的「Name」(名稱) 欄位，以便輸入自訂顏色的名稱。
2. 建立自訂顏色如下。這些步驟對應圖 1 中的圖說。
   1. 在空白的「Name」(名稱) 欄位中輸入新顏色值的名稱。名稱不得包含空格或特殊字元。你也可以使用底線和數字。
   2. 色階、「Custom color」(自訂顏色) 欄位和取色管：
      • 在色階上，按一下所需的顏色。該顏色會顯示在「Custom color」(自訂顏色) 欄位中。
      • 你可以使用「Custom color」(自訂顏色) 欄位左側的下拉式選單以選取顏色。按一下取色管 ，然後按一下電腦螢幕上任一處顯示的內容。「Custom color」(自訂顏色) 欄位中的顏色會變更為所選顏色。
   3. 在「Custom color」(自訂顏色) 欄位的正下方，使用左側的可編輯欄位和下拉式選單來按數字值指定RGB、HSB，或 ARGB 顏色。最右側的可編輯欄位會將您的色彩以相應的十六進位值顯示。
   4. 如要設定顏色的不透明度和色調，請移動色階下方的滑桿。
   5. 選取其中一個可用的預先定義顏色方塊。自訂顏色會顯示在「Custom Color」(自訂顏色) 欄位中，選取的名稱會變更為所選顏色的名稱。
3. 按一下「OK」(確定) 儲存設定。系統會隨即關閉「Resources」(資源) 對話方塊，然後返回主題編輯器。

修改顏色

您可以修改任何可編輯的顏色。如果顏色可以編輯，您會看到可編輯的顏色、色調、透明度、名稱欄位和裝置設定欄位。如要瞭解部分欄位可供編輯和不可編輯的原因，請參閱選取顏色。

1. 調整設定。
2. 按一下「OK」(確定)。

相符材質顏色

如果您已定義或修改自訂專案的顏色，請點選「Custom color」(自訂顏色) 旁的「CLOSEST MATERIAL COLOR」(最接近材質顏色)，確保該顏色符合最接近的材質調色盤顏色。Android Studio 會將所選顏色的顏色和透明度值改為最相似該顏色的材質顏色，並以材質調色盤的顏色名稱取代「Custom color」(自訂顏色)。

注意：只有在所選顏色並非實質材質顏色時，才會顯示「CLOSEST MATERIAL COLOR」(最接近材質顏色) 功能。

查看狀態清單和顏色

主題編輯器可讓您預覽 各種狀態的關聯顏色。方法是按一下可編輯狀態清單資源名稱旁的顏色組合方塊，開啟「Resource」(資源) 對話方塊。「Resource」(資源) 對話方塊會顯示狀態清單 (例如「Selected」(已選取)) 及與狀態相關聯的顏色值。按一下狀態的顏色即可選擇不同的顏色值。

如要更全面地控管狀態，可以直接在定義物件的 XML 檔案中檢視及編輯屬性。詳情請參閱 ColorStateList 類別的說明文件。

裝置專屬設定

當顏色為可編輯時，您可以選擇要支援應用程式的 裝置專屬設定。請執行下列步驟完成設定：

1. 開啟「資源」對話方塊。如要瞭解如何開啟「Resource」(資源)對話方塊，請參閱變更色彩資源。
2. 選取「Project」(專案) 顏色，然後點選右側窗格底部以展開「Device Configuration」(裝置設定)，顯示含資源 XML 檔案的來源組合和名稱，以及放置該檔案的專屬設定目錄清單。
3. 視需要變更 XML 檔案名稱。
4. 找到與您要支援的裝置專屬設定相對應的目錄，然後勾選旁邊的方塊。未指定目錄的所有設定都會預設為使用 values 目錄。

如要進一步瞭解目錄名稱和設定之間的關係，請參閱 支援多個畫面。如要進一步瞭解支援的目錄名稱，請參閱 提供資源。