Android中的icon适配

栏目: Android · 发布时间: 5年前

内容简介:官方系统在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/384

官方系统在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图片:

Android中的icon适配

选中res文件夹,new->Image Asset 打开Asset Studio。具体配置如下图:

Android中的icon适配

具体的属性在这里解释一下,参考官方文档

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
复制代码

根据提示点击完成后会在目录中生成如下文件

Android中的icon适配

3、使用Asset Studio插件生成Adaptive and Legacy icon

打开Asset Studio,在Icon Type中选择Adaptive and Legacy。

具体配置如下图

Android中的icon适配
Android中的icon适配
Android中的icon适配

上面没提到的属性,这里解释一下

Layer Name - 图层名称
Resize - 制定大小
Round Icon - 仅针对android 7.0 icon处理
Google Play Store Icon - 在google play商店中展示图标

复制代码

根据提示点击完成后会在目录中生成如下文件,这里背景图层使用的是颜色,如果使用图片,也会在目录下生成ic_launcher_background文件夹以及对应dpi的图片。

Android中的icon适配

由此可以看出,在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图片。

Android中的icon适配

2、增加圆形logo的adaptive icon与legacy icon

上面介绍了自适应图标在android8.0上的特性,我们先对比一下使用自适应图标和非自适应图标的区别。

由于上问介绍使用方法的时候使用的是白色背景,效果不明显,我这里将background_layer的颜色改为了淡黄色。

上图,可以看出前景层在背景层上浮动。

Android中的icon适配

不使用自适应图标的效果,整个图标为一整块。

Android中的icon适配

在android8.0以下,icon正常显示。

Android中的icon适配

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

高效程序员的45个习惯

高效程序员的45个习惯

Venkat Subramaniam、Andy Hunt / 钱安川、郑柯 / 人民邮电出版社 / 2010-01 / 35.00元

“书中‘切身感受’的内容非常有价值——通过它我们可以做到学有所思,思有所悟,悟有所行。” ——Nathaniel T. Schutta,《Ajax基础教程》作者 “此书通过常理和经验,阐述了为什么你应该在项目中使用敏捷方法。最难得的是,这些行之有效的实战经验,竟然从一本书中得到了。” ——Matthew Johnson,软件工程师 十年来,软件行业发生了翻天覆地的变化。敏捷......一起来看看 《高效程序员的45个习惯》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具