Android中的icon適配

1、icon的簡介

icon是應用圖標，官方建議將圖標根據不一樣的dpi放置在res/mipmap文件夾下。

2、icon的發展歷史

一、官方系統

官方系統在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

二、第三方廠商

在不一樣手機廠商對launcher界面的icon有不一樣的定製，但目前較新的系統處理都較爲合適，通常的處理有能夠展現任意形狀，或者對超出部分進行裁切，也有兩者兼顧的處理。

3、icon的處理方式

一、直接使用UI設計給定的圖片放入工程res/mipmap中

該方式簡單粗暴，直接使用UI設計給定的圖片進行展現。

二、使用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
複製代碼

根據提示點擊完成後會在目錄中生成以下文件

三、使用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是相同的，僅根據系統裁剪對展現圖標作區分。

4、效果對比

一、不進行圓形logo的處理

上效果圖吧，白色圓形內放置一個工程中ic_launcher圖片。

二、增長圓形logo的adaptive icon與legacy icon

上面介紹了自適應圖標在android8.0上的特性，咱們先對比一下使用自適應圖標和非自適應圖標的區別。
因爲上問介紹使用方法的時候使用的是白色背景，效果不明顯，我這裏將background_layer的顏色改成了淡黃色。
上圖，能夠看出前景層在背景層上浮動。

不使用自適應圖標的效果，整個圖標爲一整塊。

在android8.0如下，icon正常顯示。

5、總結

有了上面的基礎呢，就能夠實現對icon的適配了，我將圖標大體分爲了幾種
一、背景+logo，文章中的icon:
直接進行自適應適配便可。
二、圓形圖標，相似Chrome瀏覽器:
這種圖標的處理建議不作8.0的自適應圖標，觀察了Chrome也沒有自適應圖標的動畫效果。
三、純異形icon，相似系統日曆計算器等app:
直接使用自適應圖標進行製做，注意安全邊線的問題。
五、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…

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