内容简介:官方系统在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图片:
选中res文件夹,new->Image Asset 打开Asset Studio。具体配置如下图:
具体的属性在这里解释一下,参考官方文档
https://developer.android.com/studio/write/image-asset-studio?hl=zh-cnIcon 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正常显示。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- flutter 屏幕尺寸适配 字体大小适配
- 前端适配:移动端/web端适配方案
- iOS 关于全面屏适配的方案及UI在不同尺寸下适配方案
- iOS 关于全面屏适配的方案及UI在不同尺寸下适配方案
- 【移动端适配】用vw、vh+媒体查询打造最完美的移动端适配方案
- Rem 等比适配始末
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Out of Control
Kevin Kelly / Basic Books / 1995-4-14 / USD 22.95
Out of Control is a summary of what we know about self-sustaining systems, both living ones such as a tropical wetland, or an artificial one, such as a computer simulation of our planet. The last chap......一起来看看 《Out of Control》 这本书的介绍吧!