Android中的icon適配

奇舞移動發表於2019-03-01

一、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圖片:

adaptive_original_icon.png

選中res資料夾,new->Image Asset 開啟Asset Studio。具體配置如下圖:

icon_lagacy_only.png

具體的屬性在這裡解釋一下,參考官方文件

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
複製程式碼

根據提示點選完成後會在目錄中生成如下檔案

legacy_only生成檔案.png

3、使用Asset Studio外掛生成Adaptive and Legacy icon

開啟Asset Studio,在Icon Type中選擇Adaptive and Legacy。
具體配置如下圖

Foreground_Layer.png
Background_Layer
Legacy

上面沒提到的屬性,這裡解釋一下

Layer Name - 圖層名稱
Resize - 制定大小
Round Icon - 僅針對android 7.0 icon處理
Google Play Store Icon - 在google play商店中展示圖示

複製程式碼

根據提示點選完成後會在目錄中生成如下檔案,這裡背景圖層使用的是顏色,如果使用圖片,也會在目錄下生成ic_launcher_background資料夾以及對應dpi的圖片。

adaptive_and_legacy生成檔案.png

由此可以看出,在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圖片。

未新增round圖示適配

2、增加圓形logo的adaptive icon與legacy icon

上面介紹了自適應圖示在android8.0上的特性,我們先對比一下使用自適應圖示和非自適應圖示的區別。
由於上問介紹使用方法的時候使用的是白色背景,效果不明顯,我這裡將background_layer的顏色改為了淡黃色。
上圖,可以看出前景層在背景層上浮動。

使用adaptive圖示在android8.0上的特效.gif

不使用自適應圖示的效果,整個圖示為一整塊。

不使用adaptive圖示在android8.0上的特效.gif

在android8.0以下,icon正常顯示。

android8.0以下效果.png

五、總結

有了上面的基礎呢,就可以實現對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…

關注微信公眾號,最新技術乾貨實時推送

image

相關文章