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

警示：自 3.3 版起，Android Studio 將不再隨附主題編輯器。

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

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