一、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)
https://sspai.com/post/38431
2、第三方厂商
在不同手机厂商对launcher界面的icon有不同的定制,但目前较新的系统处理都较为合适,一般的处理有可以展示任意形状,或者对超出部分进行裁切,也有二者兼顾的处理。
三、icon的处理方式
1、直接使用UI设计给定的图片放入工程res/mipmap中
该方式简单粗暴,直接使用UI设计给定的图片进行展示。
2、使用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
根据提示点击完成后会在目录中生成如下文件
3、使用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是相同的,仅根据系统裁剪对展示图标做区分。
四、效果对比
1、不进行圆形logo的处理
上效果图吧,白色圆形内放置一个工程中ic_launcher图片。
2、增加圆形logo的adaptive icon与legacy icon
上面介绍了自适应图标在android8.0上的特性,我们先对比一下使用自适应图标和非自适应图标的区别。
由于上问介绍使用方法的时候使用的是白色背景,效果不明显,我这里将background_layer的颜色改为了淡黄色。
上图,可以看出前景层在背景层上浮动。
不使用自适应图标的效果,整个图标为一整块。
在android8.0以下,icon正常显示。
五、总结
有了上面的基础呢,就可以实现对icon的适配了,我将图标大致分为了几种
1、背景+logo,文章中的icon:
直接进行自适应适配即可。
2、圆形图标,类似Chrome浏览器:
这种图标的处理建议不做8.0的自适应图标,观察了Chrome也没有自适应图标的动画效果。
3、纯异形icon,类似系统日历计算器等app:
直接使用自适应图标进行制作,注意安全边线的问题。
5、logo+文字+背景icon,一些app在某些特定时期(如周年、活动等),会在logo下有文字:
这种情况需要设计的时候注意适配圆形logo中的展示。
参考资料:
android 官方文档 Adaptive icons
https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive
Android O 新特性介绍:自适应图标(Adaptive Icons)
https://sspai.com/post/38431
Android应用图标微技巧,8.0系统中应用图标的适配
https://blog.csdn.net/guolin_blog/article/details/79417483