Android中的icon適配

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

一、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

相關文章