Android Q适配(1)-------图标篇

前言:

Android Q在2019年的3月份发布了beta1版本,这算是近几年Android版本改动中变化最大的一个版本,本文将分章节一一讲解Android Q我们程序员应该做的适配工作,本文章将分系列,本着作者对应新特性进行尽量全面的理解后,将经验和成果与大家分享。那么开始吧!

正文:

本文如题,图标篇,可能有的同学认为这没啥好讲的,感觉没有意义,这里作者通过工作中的开发,表示图标还是需要一些适配工作的。尤其是从Android 8.0引入了矢量图标后,如今正式在Android Q强制使用了,所以如果大家不对图标进行适配的话,在Android Q上会出现显示问题。

当我们新建一个8.0以上的项目的时候,AndroidStudio会自动给我们多创建2个文件夹mipmap-anydpi-v26和drawable-v24,还有drawable下的ic_launcher_background.xml如图

image

当我们点击进去会发现,里面全部都是关于verctor的矢量图标,这时候如果小伙伴们不想做适配工作,直接简单粗暴的删除掉这些文件,app在启动时就会转向去读取png的图标文件,看似一切问题得到了解决。

但是细心的小伙伴肯定留意到了,从Android8.1开始,引入了图标的视差和脉动,支持图标动态调整,只有当你适配了矢量图标后才会启动如图

image

这个特性在Android Q上被强制启动了,也就是说Android Q不会去对你的png图标进行适应显示,而是会尝试把你的png图标按照新特性来显示,这时候你的app图标在Android Q上将会显示小一圈,无法跟其他App的图标保持一致了,如图

image

左边的删除了矢量图app在Android Q上显示的比其他所有图标都小一圈,并且不支持动态特效,如果你认为这确实是个适配问题,那么请接着往下看吧,第一篇文章不想写的太复杂,所以图标篇并不是简简单单的给程序员们看的,其实也是UI小姐姐看的,毕竟做图的是她们,他们不提供素材,一切都是白扯。

下面我会对谷歌官方推荐使用的矢量图作图办法进行讲解和翻译,部分文字,图片是截取自Google官方文档,方便大家阅读。


自适应启动器图标,它可以在不同设备型号上显示为不同的形状。

您可以通过定义 2 个图层(由一个背景图层和一个前景图层组成)来控制自适应启动器图标的外观。您必须提供图标图层作为可绘制资源,而不使用图标轮廓周围的蒙版或背景阴影。

图标的设计要求

  • 两个图层的尺寸都必须调整为 108 x 108 dp。
  • 已屏蔽的视口中显示的图标的内层为 72 x 72 dp。
  • 系统为 4 个面中每一面的外层保留 18 dp,以创建有趣的视觉效果(例如视差或脉动)。

注意:设备的原始设备制造商 (OEM) 可以指定一个蒙版,该蒙版可能包含沿形状特定点的半径(最短为 33 dp)。

以上是我截取的翻译,这里给大家详细解释一下,并且结合我的经验给大家说注意事项。

1,UI小姐姐一定要使用AI给大家做svg图标,千万别用PS,PS出的svg不能被转换为vector。

2,就是UI出图需要给你一个背景SVG和一个标志SVG,由于是矢量图,所以下面为了让UI们能理解,全部按照1倍图说,也就是1dp == 1px。

svg的边框大小必须为108px,而图标的实际显示区域为72px,也就是说自适应图标周围要预留33px的空间用来兼容Android系统动效

具体示意如图

image
  • 图中灰色部分为预留空间。
  • 深粉色范围为图标实际显示范围,并不是背景范围,背景范围需要延伸到108px。
  • 浅粉色范围为标志SVG中图标的安全范围,防止被系统裁切

简单来说就是UI小姐姐需要提供2个大小为108px的svg文件,并且按照上图的要求制作对应的图层

★注意,UI小姐姐制作图标,一定不要使用蒙版,因为vector不支持svg的蒙版,vector只支持最基础的路径

image

实际效果就是UI小姐姐提供最左边那种样式的图标,我们写进项目以后,通过不同的系统的不同的蒙版,最终切出我们要的图标。

如果我是个人开发者怎么办?

上文说的是一个正常公司,有UI工程师与你配合才能完成Android Q适配,但是实际上,你可能只是个人开发者,并不会UI的制作,不可能自己制作矢量图标。更甚者,你们公司的UI工程师可能知识不足,AI的使用不熟练,造成无法与你配合。这就比较无解了,只能给UI小姐姐送一本AI从入门到精通了。

如果发生这种事,真的没办法适配Android Q了么,不,有办法,Google给我们留了一个备用的PNG适配的方法。我们马上来提到如何操作。

但是这里我想夹杂一点我个人的观点,这个方法在Google官网压根就没有被提及,仅仅是AndroidStudio为了开发人员做的一个备用方案,为了兼容Android各种尺寸分辨率的屏幕,Google从Android 5.0开始引入vector矢量图,这已经过去5年了,Google是肯定不推荐你是用PNG这种方式来兼容Android Q,所以根本就不会在官网提及如何操作。所以如果作为程序员你有条件进行自适应矢量图标适配,请一定要坚持用矢量图标,大家一起推动国内乃至世界的开发标准发展。国内太多人不按Google的要求写程序了,这回Android Q一定有他们受的!


那么开始,目前我们做适配一般就做到xxxhdpi,也就是2k的屏幕,所以我们需要准备上文提到的矢量图标的一个至少512px的PNG图片,因为432px就是2k屏幕要用到的图标大小,512px是Google商店需要用到的最小尺寸。如果使用的图片小于512px会造成高分辨率设备图标变虚。

image

在任意图标文件夹右键,按照图中路径,点击Image Asset

image

你会看到默认就是Launcher Icons(Adaptive and legacy)

这个就是导入PNG文件来适配的,这里分

Foreground Layer:标志层

Background Layer:背景层

Legacy:旧版图标

将准备好的512px的标志层,跟背景层选到对应的层中,legacy会自定给你生成老版本各分辨率需要的图片大小

image

这样就生成了一大堆png文件,这样PNG来适配Android Q就完成了。

你的图标也可以动起来了

已知问题:无论你使用矢量图标,还是PNG图标适配,在Flyme7上均无法正确显示,这是Flyme自己的问题,这个系统不遵照Google在Android 8.0发布的图标开发规范,除非他们自己改正,否则无解

image

后记

其实最开始是不准备写第二种PNG适配的方法的,因为感觉肯定有很多人为了凑合而使用第二种方法,不过作为程序员,你把一个5kb的vector就解决的适配,变成了每个分辨率文件夹里都有一个png文件,这至少是vector的5倍大。所以我们最好还是采取第一种矢量图标的方式来适配,这样才是正路,也避免以后设备参数的改变造成不必要的影响。

本文写到这里也就结束了,随后我会更新更多关于Android Q的新特性和适配方法,敬请期待!!!

如果看不懂或者我写的有问题的地方,欢迎在评论中指出,大家一切探究讨论!

svg的演示文件百度网盘,请不要违法使用,不要给双方找麻烦,实际项目的图标。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容