Android 8.0 之自适应图标

关于异形图标和规则图标的取舍,在不同阵营的 Android 用户之间一直存在着争议。而一向提倡使用异形图标、讲求图标「个性」的 Google 在 Android 7.1 中引入了圆形图标规范,在 Android 8.0 中还将带来全新的自适应图标特性——Google 似乎想通过应用图标规范来触及 Android 平台的碎片化问题。

Android 8.0 (API 26)引入了自适应图标,可以在不同的设备上显示不同形状的图标。例如,一个app 如果采用了自适应图标,那么它就可以在一家的 OEM 厂商的手机上显示为圆形,在另一家 OEM 厂商的手机上显示为方形。只需要每个 OEM 厂商提供一个标准的图标遮罩,那么系统就可以将所有的自适应图标渲染为相同的形状。自适应图标同样可用于shortcuts (快捷方式)、设置、分享对话框、屏幕预览等地方。

自适应图标原理

在自适应图标中,将原来的一个图标分成了三个图层:

  • foreground:需要显示的主 icon
  • background:底层背景图案
  • Mask:遮罩,由手机设备厂商提供

通过这三个图层决定了自适应图标的外观和形状

需要注意的是,提供的图层是没有形状、阴影的 PNG 格式图象

设计规则

在 Android 7.1 (API 级别 25)及更早的版本中,app 的启动图标大小为 48dp,在 Android 8.0 中,规则有所改变:

  • 两个图层的大小必须为 108 x 108 dp
  • 图层内部 72 x 72 dp 的区域为可见范围
  • 系统将保留四周各 18 dp 的范围,用来创建有趣的视觉效果,如视差或跳动

动画视觉效果由所支持自适应图标的启动器生存,视觉效果可能因启动器的不同而有差别

OEM 厂商所提供的遮罩是,自中点起至少 33 dp 范围内的区域

在XML中创建自适应图标

要给你的应用创建自适应图标,首先你需要你的应用的 AndroidManifest.xml 中为 android:icon 属性并指定一个 Drawable 资源。同时还可以为 android:roundIcon 属性指定一个图标,这个属性不是必须的,只有当你想为你的 app 在任何时候都以一个圆形图标展示时使用。下面的代码将示范这两个属性的用法

接下来需要在资源文件及中创建我们的自适应图标,在 Android 8.0 中自适应图标存在于 res/mipmap-anydpi/ 文件夹下,使用 <adaptive-icon> 元素为你的图标定义前景和背景图层。<background> 和 <foreground> 分别为前景图层和背景图层,支持 android:drawable 属性。

使用 Image Asset 创建自适应图标

Android studio 中提供了 Image Asset 工具,可以帮我们快速生成并适配各种分辨率的图标,在 AS 项目中的任意地方,右键 new 选择 Image Asset

如图所示,选择完前景和背景图层后,预览界面会出现不同分辨率及不同形状的自适应图标,点击 next 选择生成的目录,一套自适应图标就生成啦。

由于 Android 系统的开源特性,各个手机厂商定制的 UI 百花齐放,在经历了拟物风到扁平化的转变之后,随着 Android 5.0 推出的 Material Design,各个手机厂商基本都本着在少许的定制化下,在风格上尽量还原 Android 原本的设计。

原文发布于微信公众号 - Android机动车(JsAndroidClub)

原文发表时间:2017-10-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java架构师历程

介绍几个移动web app开发框架

jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。jQuery Mobile最新版本是1.4.0,默认主题采用扁平化...

80720
来自专栏xingoo, 一个梦想做发明家的程序员

CSS布局那点事儿

布局 最开始老的一代网站开发,布局都是通过表格实现的。 这样可以形成规整的网格布局,但是也会带来一定的复杂性。比如想要新增某个页面元素,就有可能要改动整个表格...

24650
来自专栏向治洪

react-native-android之初次相识

作为一名Android开发者,我的感觉就是,一步一卡,卡的潇洒。 但是我还是要学react-native,不要问我为什么,因为我相信一门解决了原生app,开...

19760
来自专栏Golang语言社区

【Go 语言社区】算法课程 第一季 第5节 回文检查

回文概念:大致就是把这个数倒过来念数字还是和原来的一样. 运行结果: 代码: package main import ( "fmt" ) //...

33640
来自专栏公众号_薛勤的博客

Comfort - 一款MarkDown风格的博客园主题

目录和返回顶部一直位于右下角,鼠标移入显示,移出隐藏。注意,在手机端是不显示目录按钮和返回顶部按钮。

41130
来自专栏前端知识分享

第134天:移动web开发的一些总结(二)

width —— 视口宽高 height —— 视口宽高 device-width —— 设备的宽高 device- height —— 设备的宽高 orien...

19210
来自专栏Java技术分享圈

杨老师课堂之网页制作HTML的学习入门-含有案例

l HTML的标记通常是由开始标签和结束标签组成:<b>内容</b> <br/>

21420
来自专栏玩转全栈

小程序怎么将视觉搞实现成ui

这个真的是强烈建议,对于一个页面,首先应该大致的看一下可以划分为哪几个模块,通常的划分方式是,整体来看,是row排列,还是column排列的,那么,最擅长做这种...

345170
来自专栏腾讯大讲堂的专栏

打造H5动感影集的爱恨情仇【动画性能篇】

作者:谭照强,热爱折腾前端,喜欢新奇创意的程序员,业余喜欢玩摄影,弄咖啡。 “你听说过动感影集么?” 动感影集是QQ空间新功能,可以将静态的图片轻松转变为动态的...

307120
来自专栏HTML5学堂

【系列】移动端项目经验 表单兼容(上篇)

移动端 表单兼容(上篇) HTML5学堂:从这篇文章开始,我们将为大家总结介绍移动端的常见兼容问题,今天要提的是关于表单的一些兼容问题,本文主要包括input文...

29880

扫码关注云+社区

领取腾讯云代金券