Android中的icon适配

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

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

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

查看所有标签

猜你喜欢:

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

Machine Learning

Machine Learning

Kevin Murphy / The MIT Press / 2012-9-18 / USD 90.00

Today's Web-enabled deluge of electronic data calls for automated methods of data analysis. Machine learning provides these, developing methods that can automatically detect patterns in data and then ......一起来看看 《Machine Learning》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换