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…

关注微信公众号，最新技术干货实时推送