遊戲優化系列二：Android Studio製作圖示教程

37手遊安卓團隊發表於2020-12-02

作者

大家好，我叫Jack馮；
本人20年碩士畢業於廣東工業大學，於2020年6月加入37手遊安卓團隊；目前主要負責海外遊戲發行安卓相關開發。

背景

谷歌在Android8.0後就推出了圓形圖示，並在AndroidStudio中提供了製作工具。那麼如果不製作圓形工具會怎麼樣？在部分裝置上圖示會出現適配問題，UI上不美觀。本文將介紹Image Asset Studio工具的使用，介紹如何製作圓形圖示

Android Studio 包含一個名為 Image Asset Studio 的工具，可幫助您根據素材圖示、自定義圖片和文字字串生成自己的應用圖示。它會針對您的應用支援的每種畫素密度以適當的解析度生成一組圖示。Image Asset Studio 會將新生成的圖示放置在專案中 res/ 目錄下的特定於密度的資料夾中。在執行時，Android 將根據執行應用的裝置的螢幕密度來使用適當的資源。

Image Asset Studio 可幫助您生成以下圖示型別：

啟動器圖示
操作欄和標籤頁圖示
通知圖示

執行 Image Asset Studio

如需啟動 Image Asset Studio，請按以下步驟操作：

在 Project 視窗中，選擇 Android 檢視。
右鍵點選 res 資料夾，然後依次選擇 New > Image Asset。

2、自適應和舊版啟動器圖示

開啟 Image Asset Studio 後，您可以按照以下步驟新增自適應和舊版圖示：

（1）在 Icon Type 欄位中，選擇 Launcher Icons (Adaptive & Legacy)。

（2）在 Foreground Layer 標籤頁的 Asset Type 中選擇一種資源型別，然後在下面的欄位中指定資源：

選擇 Image 以指定圖片檔案的路徑。
選擇 Clip Art 以指定 Material Design 圖示集中的圖片。
選擇 Text 以指定文字字串並選擇字型。

（3）在 Background Layer 標籤的 Asset Type 中選擇一種資源型別，然後在下面的欄位中指定資源。您可以選擇一種顏色或指定一張圖片作為背景圖層。

（4）在 Legacy 標籤頁中，檢視預設設定並確認您要生成舊版、圓形和 Google Play 商店中使用的圖示。

（5）（可選）在 Foreground Layer 和 Background Layer 標籤頁中更改每個圖示的名稱和顯示設定：

Name - 如果您不想使用預設名稱，請輸入新名稱。如果專案中已存在該資源名稱（由嚮導底部的錯誤來指示），它將被覆蓋。名稱只能包含小寫字元、下劃線和數字。
Trim - 要調整源資源中圖示圖形與邊框之間的邊距，請選擇 Yes。此操作將移除透明空間，同時讓寬高比保持不變。要讓源資源保持不變，請選擇 No。
Color - 要更改 Clip Art 或 Text 圖示的顏色，請點選該欄位。在 Select Color 對話方塊中，指定一種顏色，然後點選 Choose。該欄位中會顯示新值。
Resize - 使用滑塊指定縮放係數（以百分比表示）以調整 Image、Clip Art 或 Text 圖示的大小。指定 Color 資源型別時，會為背景圖層停用此控制元件。

（6）點選 Next。

（7）（可選）更改資源目錄。選擇想在其中新增圖片資源的資源原始碼集：src/main/res、src/debug/res、src/release/res 或自定義原始碼集。主源集適用於所有構建變體，包括除錯和釋出。除錯和釋出原始碼集將替換主原始碼集，並適用於構建的一個版本。除錯源集僅用於除錯。要定義新源集，請依次選擇 File > Project Structure > app > Build Types。例如，您可以定義一個測試版源集，並建立一個版本的圖示，在其右下角顯示“BETA”文字。如需瞭解詳情，請參閱配置構建變體。

（8）點選 Finish。Image Asset Studio 會針對不同的密度將圖片新增到 mipmap 資料夾。

示例1：

最後生成素材：

效果：

3. 操作欄和標籤頁圖示

開啟 Image Asset Studio 後，您可以按照以下步驟新增操作欄或標籤頁圖示：

（1）在 Icon Type 欄位中，選擇 Action Bar and Tab Icons。

（2）在 Asset Type 中選擇一種資源型別，然後在下面的欄位中指定資源：

在 Clip Art 欄位中，點選相應按鈕。
在 Select Icon 對話方塊中，選擇一個素材圖示，然後點選 OK。
在 Path 欄位中，指定圖片的路徑和檔名。點選 ... 以使用對話方塊。
在 Text 欄位中，輸入文字字串並選擇字型。圖示會顯示在右側的 Source Asset 區域以及嚮導底部的預覽區域中。

（3）（可選）更改名稱和顯示選項：

Name - 如果您不想使用預設名稱，請輸入新名稱。如果專案中已存在該資源名稱（由嚮導底部的錯誤來指示），它將被覆蓋。名稱只能包含小寫字元、下劃線和數字。
Trim - 要調整源資源中圖示圖形與邊框之間的邊距，請選擇 Yes。此操作將移除透明空間，同時讓寬高比保持不變。要讓源資源保持不變，請選擇 No。
Padding - 如果要調整全部四面的源資源內邊距，請移動滑塊。選擇一個介於 -10% 和 50% 之間的值。如果也選擇了 Trim，則先進行剪裁。
Theme - 選擇 HOLO_LIGHT 或 HOLO_DARK。或者，如需在 Select Color 對話方塊中指定顏色，請選擇 CUSTOM，然後點選 Custom color 欄位。 Image Asset Studio 會在透明的正方形內建立圖示，所以邊緣上有一些內邊距。內邊距為標準的陰影圖示效果提供了充足的空間。

（4）點選 Next。

(5)（可選）更改資源目錄： Res Directory - 選擇想在其中新增圖片資源的資源原始碼集：src/main/res、src/debug/res、src/release/res 或使用者定義的原始碼集。主源集適用於所有構建變體，包括除錯和釋出。除錯和釋出源集將替換主源集，並應用於構建的一個版本。除錯源集僅用於除錯。要定義新源集，請依次選擇 File > Project Structure > app > Build Types。例如，您可以定義一個 Beta 版源集，並建立一個版本的圖示，使其右下角包含文字“BETA”。如需瞭解詳情，請參閱配置構建變體。 Output Directories 區域會顯示圖片以及它們將出現在 Project 視窗的“專案檔案”檢視中的哪些資料夾中。

(6)點選 Finish。 Image Asset Studio 會針對不同的密度將圖片新增到 drawable 資料夾。

4、通知圖示

通知是您可以在應用的正常介面之外向使用者顯示的訊息。Image Asset Studio 會將通知圖示放置在 res/drawable-density/ 目錄中的適當位置：

對於 Android 2.2（API 級別 8）及更低版本，會將圖示放置在 res/drawable-density/ 目錄中。
對於 Android 2.3 到 2.3.7（API 級別 9 到 10），會將圖示放置在 res/drawable-density-v9/ 目錄中。
對於 Android 3（API 級別 11）及更高版本，會將圖示放置在 res/drawable-density-v11/ 目錄中。
如果您的應用支援 Android 2.3 到 2.3.7（API 級別 9 到 10），Image Asset Studio 會生成灰色版本的圖示。更高版本的 Android 使用 Image Asset Studio 生成的白色圖示。

5、製作流程

開啟 Image Asset Studio 後，您可以按照以下步驟新增通知圖示：

(1)在 Icon Type 欄位中，選擇 Notification Icons。 (2)在 Asset Type 中選擇一種資源型別，然後在下面的欄位中指定資源：

在 Clip Art 欄位中，點選相應按鈕。
在 Select Icon 對話方塊中，選擇一個素材圖示，然後點選 OK。
在 Path 欄位中，指定圖片的路徑和檔名。點選 ... 以使用對話方塊。
在 Text 欄位中，輸入文字字串並選擇字型。圖示會顯示在右側的 Source Asset 區域以及嚮導底部的預覽區域中。

(3)（可選）更改名稱和顯示選項：

Name - 如果您不想使用預設名稱，請輸入新名稱。如果專案中已存在該資源名稱（由嚮導底部的錯誤來指示），它將被覆蓋。名稱只能包含小寫字元、下劃線和數字。
Trim - 要調整源資源中圖示圖形與邊框之間的邊距，請選擇 Yes。此操作將移除透明空間，同時讓寬高比保持不變。要讓源資源保持不變，請選擇 No。
Padding - 如果要調整全部四面的源資源內邊距，請移動滑塊。選擇一個介於 -10% 和 50% 之間的值。如果也選擇了 Trim，則先進行剪裁。

Image Asset Studio 會在透明的正方形內建立圖示，所以邊緣上有一些內邊距。內邊距為標準的陰影圖示效果提供了充足的空間。

(4)點選 Next。

(5)（可選）更改資源目錄：

Res Directory - 選擇想在其中新增圖片資源的資源原始碼集：src/main/res、src/debug/res、src/release/res 或使用者定義的原始碼集。主源集適用於所有構建變體，包括除錯和釋出。除錯和釋出源集將替換主源集，並應用於構建的一個版本。除錯源集僅用於除錯。要定義新源集，請依次選擇 File > Project Structure > app > Build Types。例如，您可以定義一個 Beta 版源集，並建立一個版本的圖示，使其右下角包含文字“BETA”。如需瞭解詳情，請參閱配置構建變體。

Output Directories 區域會顯示圖片以及它們將出現在 Project 視窗的“專案檔案”檢視中的哪些資料夾中。

(6)點選 Finish。 Image Asset Studio 會針對不同的密度和版本將圖片新增到 drawable 資料夾。

示例1：在 Clip Art 欄位中選擇一個圖示