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

警示:自 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」(自訂顏色) 欄位的正下方,使用左側的可編輯欄位和下拉式選單來按數字值指定RGBHSB,或 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 目錄。

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