作者
大家好,我叫Jack馮;
本人20年碩士畢業于廣東工業大學,于2020年6月加入37手游安卓團隊;目前主要負責海外游戲發行安卓相關開發。
本文目錄
1、 關于Image Asset Studio
2、 自適應和舊版啟動器圖標
3、 操作欄和標簽頁圖標
4、通知圖標
背景
谷歌在Android8.0后就推出了圓形圖標,并在AndroidStudio中提供了制作工具。那么如果不制作圓形工具會怎么樣?在部分設備上圖標會出現適配問題,UI上不美觀。本文將介紹Image Asset Studio工具的使用,介紹如何制作圓形圖標
1、關于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 字段中選擇一個圖標
效果1:
[圖片上傳失敗...(image-d21189-1614571089250)]
示例2:在 Text 字段中,輸入字符“ 37 ”
效果2:
示例3:在 Path 字段中,指定圖片的路徑和文件名
效果3:
[圖片上傳失敗...(image-b88fe2-1614571089250)]