Android中的icon适配

avatar
Android @奇舞团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

avatar
文章
阅读
粉丝