一、icon的簡介
icon是應用圖示,官方建議將圖示根據不同的dpi放置在res/mipmap資料夾下。
二、icon的發展歷史
1、官方系統
官方系統在8.0前後存在一些區別,在8.0系統之前,android允許自定義icon形狀。7.0系統之開始,對launcher介面做了圓形的限制,8.0系統對icon提出了新的製作方式,包括背景層和前景層,官方命名為Adaptive Icons。
8.0系統之後,android提供的自適應icon的設計思路為兩個圖層(前景層和背景層),根據兩個圖層疊合展示,並提供了一些動畫效果。具體可以看這篇文章:
Android O 新特性介紹:自適應圖示(Adaptive Icons)
sspai.com/post/38431
2、第三方廠商
在不同手機廠商對launcher介面的icon有不同的定製,但目前較新的系統處理都較為合適,一般的處理有可以展示任意形狀,或者對超出部分進行裁切,也有二者兼顧的處理。
三、icon的處理方式
1、直接使用UI設計給定的圖片放入工程res/mipmap中
該方式簡單粗暴,直接使用UI設計給定的圖片進行展示。
2、使用Asset Studio外掛生成Legacy icon
這裡提供demo中使用的icon圖片:
選中res資料夾,new->Image Asset 開啟Asset Studio。具體配置如下圖:
具體的屬性在這裡解釋一下,參考官方文件
https://developer.android.com/studio/write/image-asset-studio?hl=zh-cn
Icon Type - Launcher Icons(Legacy only)
Asset Type - 資源型別,可選圖片,剪下畫,文字
Path - 資源路徑
Name - 如果您不想使用預設名稱,可以鍵入一個新名稱。如果資源名稱已在專案中存在(嚮導底部出現錯誤提示),它將被覆蓋。名稱只能包含小寫字元、下劃線和數字。
Trim - 要調整源資產中圖示圖形與邊框之間的邊距,請選擇 Yes。此操作將移除透明空間,同時保留縱橫比。要保持源資產不變,請選擇 No。預設值為:No
Padding - 如果您想要調整全部四側的源資產內邊距,請移動滑塊。選擇 -10% 和 50% 之間的值。如果您也選擇了 Trim,則首先會進行剪裁。預設值為:0%
Foreground - 要更改 Clip Art 或 Text 圖示的前景色,請點選欄位。在 Select Color 對話方塊中,指定顏色,然後點選 Choose。欄位中會顯示新值。預設值為:000000
Background - 要更改背景色,請點選欄位。在 Select Color 對話方塊中,指定顏色,然後點選 Choose。欄位中會顯示新值。預設值為:FFFFFF
Scaling - 要適合圖示大小,請選擇 Crop 或 Shrink to Fit。選擇裁剪,影像邊緣會被剪下;選擇縮減,影像邊緣不會被剪下。源資產仍然不合適時,如果需要,您可以調整內邊距。預設值為:Shrink to Fit
Shape - 要為您的源資產新增背景,請選擇形狀,選項包括圓、正方形、豎直矩形或水平矩形。要想使用透明的背景,請選擇 None。預設值為:Square
Effect - 如果您想要為正方形或矩形的右上角新增折角效果,請選擇 DogEar。如果不需要,請選擇 None。預設值為:None
複製程式碼
根據提示點選完成後會在目錄中生成如下檔案
3、使用Asset Studio外掛生成Adaptive and Legacy icon
開啟Asset Studio,在Icon Type中選擇Adaptive and Legacy。
具體配置如下圖
上面沒提到的屬性,這裡解釋一下
Layer Name - 圖層名稱
Resize - 制定大小
Round Icon - 僅針對android 7.0 icon處理
Google Play Store Icon - 在google play商店中展示圖示
複製程式碼
根據提示點選完成後會在目錄中生成如下檔案,這裡背景圖層使用的是顏色,如果使用圖片,也會在目錄下生成ic_launcher_background資料夾以及對應dpi的圖片。
由此可以看出,在android26以上,系統使用的是xml檔案。下面是xml檔案中的內容:
ic_launcher.xml
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@color/ic_launcher_background"/>
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>
複製程式碼
ic_launcher_round.xml
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@color/ic_launcher_background"/>
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>
複製程式碼
可見兩張圖的處理方式是一樣的。說明了應用執行在android8.0系統上的時候,提供的icon是相同的,僅根據系統裁剪對展示圖示做區分。
四、效果對比
1、不進行圓形logo的處理
上效果圖吧,白色圓形內放置一個工程中ic_launcher圖片。
2、增加圓形logo的adaptive icon與legacy icon
上面介紹了自適應圖示在android8.0上的特性,我們先對比一下使用自適應圖示和非自適應圖示的區別。
由於上問介紹使用方法的時候使用的是白色背景,效果不明顯,我這裡將background_layer的顏色改為了淡黃色。
上圖,可以看出前景層在背景層上浮動。
不使用自適應圖示的效果,整個圖示為一整塊。
在android8.0以下,icon正常顯示。
五、總結
有了上面的基礎呢,就可以實現對icon的適配了,我將圖示大致分為了幾種
1、背景+logo,文章中的icon:
直接進行自適應適配即可。
2、圓形圖示,類似Chrome瀏覽器:
這種圖示的處理建議不做8.0的自適應圖示,觀察了Chrome也沒有自適應圖示的動畫效果。
3、純異形icon,類似系統日曆計算器等app:
直接使用自適應圖示進行製作,注意安全邊線的問題。
5、logo+文字+背景icon,一些app在某些特定時期(如週年、活動等),會在logo下有文字:
這種情況需要設計的時候注意適配圓形logo中的展示。
參考資料:
android 官方文件 Adaptive icons
developer.android.com/guide/pract…
Android O 新特性介紹:自適應圖示(Adaptive Icons)
sspai.com/post/38431
Android應用圖示微技巧,8.0系統中應用圖示的適配
blog.csdn.net/guolin_blog…