当前位置: 首页 > news >正文

oreo自适应图标

何为自适应图标

官方介绍
自适应图标是在oreo上加入的新特性。我也不是UI设计师,关于设计方面也不懂。从一个android开发者角度来看的话,大概就是一个系统平台级的裁剪,来保持app icon显示的统一协调。代码层面操作起来也比较简单,这么说是因为我觉得吧设计一个好看的图标还是挺费神的。

应用适配

对于app来说,适配之一特性并不麻烦。
AndroidManifest.xml
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round" //这是一个可选值,当你需要给app设定一个圆形图标时附上一个圆形资源文件,实际上,若你设置了上面的属性,且配置合理,系统平台是可以切割成圆形或其他形状的。
旧版本上,android:icon=""都是直接赋值图片资源或者图像资源。
对于自适应图标,需要定义一个drawable资源文件,用来设置前景和背景。

ic_launcher.xml
ic_launcher.xml 内设置 background 和 foreground
这是AS3.0上默认创建的图标资源文件,也可以用图片代替
至此,图片的适配做完了。剩下的就交由所安装到的系统平台来处理。

launcher适配

在launcher3上,可以更改桌面上的图标的形状(只会影响到桌面,在系统其他地方看到的图标形状,还是系统默认形状)。
用API26的模拟器来演示下
可以看到系统现在默认的图标形状是圆形,屏幕中央是新建的app,是适配了自适应图标。

那么现在,打开 开发者选项之后,稍等一会(模拟器慢一点,真机的话基本上不需要等待),在桌面长按,点击“主屏幕设置”,可以看到“更改图标形状”的选项,这在未打开 开发者修选项 前是看不到的。

那么这时候,更换成方形看下效果

可以看到桌面的图标都变成方形

那这时到系统设置-应用和通知-查看全部应用,会发现这里面的应用图标会是圆形包括Demo App,因为之前launcher的设置只对launcher有效,并不会更改系统平台的默认app icon形状。

那么在这里注意到,launcher3支持4种(系统默认不算了吧)形状的更改。那么去launcher3代码里看下。 打开 packages/apps/Launcher3/res/values/config.xml 各种形状和对应的形状配置值。

按照上面顺序显示。

系统平台设定

更改系统平台的默认图标形状,这在网络上的说明很少,也是这篇文章的目的。其实在aosp是有说明的。
代码示例: platform/development/samples/AdaptiveIconSample/ 开发者文档:

https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive https://developer.android.com/reference/android/graphics/drawable/AdaptiveIconDrawable.html https://developer.android.com/reference/android/graphics/drawable/Icon.html#createWithAdaptiveBitmap(android.graphics.Bitmap)
源代码: platform/frameworks/base/graphics/java/android/graphics/drawable/AdaptiveIconDrawable.java

要更改平台上图标的形状,请替换 framework/base/core/res/res/values/config.xml 中的一个字符串,如下所示:

<!-- Specifies the path that is used by AdaptiveIconDrawable class to crop launcher icons. -->
    <string name="config_icon_mask" translatable="false">"M50,0L100,0 100,100 0,100 0,0z"</string>
复制代码

该字符串的格式和语法均遵循路径定义的 W3-SVG 标准。Android 矢量可绘制资源也支持 PathData 的这种格式。

这个路径应该是上凸的,且应考虑视图边界范围内的安全区 (66/71 = 91%)。此要求在其中一项 CTS 测试中强制执行。

如果您决定使用圆形作为平台遮罩,请确保也要替换 config_useRoundIcon = true。否则,请将此配置值设为 false 或不指定此配置值。

以上是官方的说明,简化点就是说,想要改平台的默认图标形状,找到
framework/base/core/res/res/values/config.xml
打开后,里面有2个值需要改动

<!-- Flag indicating whether round icons should be parsed from the application manifest. -->
    <bool name="config_useRoundIcon">false</bool>
    
<!-- Specifies the path that is used by AdaptiveIconDrawable class to crop launcher icons. -->
    <string name="config_icon_mask" translatable="false">"M50,0L92,0C96.42,0 100,4.58 100 8L100,92C100, 96.42 96.42 100 92 100L8 100C4.58, 100 0 96.42 0 92L0 8 C 0 4.42 4.42 0 8 0L50 0Z"</string>

复制代码

以上是AOSP的默认值 config_useRoundIcon = false 即不为圆形。
config_icon_mask 的值其实我也没看懂,说是按照上面的W3-SVG标准来写,太长了没看。反正吧,你知道这里的默认值是方的就行了。

那么敲黑板,你想设置成圆的要怎么办?
其实细心地话,就会发现模拟器默认是圆的,但是AOSP代码里是方的。因为模拟器也预置了GMS,而GMS包里面的overlay将上面两个值覆盖成圆形的设定了.

<bool name="config_useRoundIcon">true</bool>
<string name="config_icon_mask" translatable="false">"M50 0C77.6 0 100 22.4 100 50C100 77.6 77.6 100 50 100C22.4 100 0 77.6 0 50C0 22.4 22.4 0 50 0Z"</string>
复制代码

将2个值得属性值设置为上面就可以让系统默认图标显示为圆形了,和上面模拟器截图一样。当然前提是app有做图标自适应。如果想换成其他形状,可以参考下launcher3的值,或者自行研究写一个形状。

<!-- Values for icon shape overrides. These should correspond to entries definedin icon_shape_override_paths_names -->
    <string-array translatable="false" name="icon_shape_override_paths_values">
        <item></item>
        <item>M50,0L100,0 100,100 0,100 0,0z</item>
        <item>M50,0 C10,0 0,10 0,50 0,90 10,100 50,100 90,100 100,90 100,50 100,10 90,0 50,0 Z</item>
        <item>M50 0A50 50,0,1,1,50 100A50 50,0,1,1,50 0</item>
        <item>M50,0A50,50,0,0 1 100,50 L100,85 A15,15,0,0 1 85,100 L50,100 A50,50,0,0 1 50,0z</item>
    </string-array>

    <string-array translatable="false" name="icon_shape_override_paths_names">
        <!-- Option to not change the icon shape on home screen. [CHAR LIMIT=50] -->
        <item>@string/icon_shape_system_default</item>
        <item>@string/icon_shape_square</item>
        <item>@string/icon_shape_squircle</item>
        <item>@string/icon_shape_circle</item>
        <item>@string/icon_shape_teardrop</item>
    </string-array>
复制代码

相关文章:

  • 容器服务--如何在阿里云容器服务上运行基于TensorFlow的Alexnet
  • centos6.x完全禁用IPv6的方法
  • 细说地方门户网站运营的六大经验
  • 列表常用方法
  • 点击按钮,删除数组-对象中的数据
  • 【Spark】RDD操作具体解释4——Action算子
  • DevOps、敏捷开发、云计算,三剑客的小时代
  • 相对和绝对路径及命令cd、mkdir、rmdir、rm
  • 命令+mybatis-generator插件自己主动生成Mapper映射文件
  • Shell笔记4——if条件语句的知识和实践
  • JavaWeb页面添加隐藏版权信息
  • jQuery中的:input选择器
  • 雷军用小米8在微博上公然开车,这成像效果你满意吗
  • laravel blog edit
  • ios UI控件的简单整理
  • Babel配置的不完全指南
  • bearychat的java client
  • CAP理论的例子讲解
  • CSS3 变换
  • docker容器内的网络抓包
  • Electron入门介绍
  • Intervention/image 图片处理扩展包的安装和使用
  • java小心机(3)| 浅析finalize()
  • JWT究竟是什么呢?
  • Linux后台研发超实用命令总结
  • Linux下的乱码问题
  • 多线程事务回滚
  • 基于Volley网络库实现加载多种网络图片(包括GIF动态图片、圆形图片、普通图片)...
  • 基于Vue2全家桶的移动端AppDEMO实现
  • 记一次用 NodeJs 实现模拟登录的思路
  • 巧用 TypeScript (一)
  • 线性表及其算法(java实现)
  • 小程序 setData 学问多
  • 因为阿里,他们成了“杭漂”
  • linux 淘宝开源监控工具tsar
  • 支付宝花15年解决的这个问题,顶得上做出十个支付宝 ...
  • 昨天1024程序员节,我故意写了个死循环~
  • ​​快速排序(四)——挖坑法,前后指针法与非递归
  • ​第20课 在Android Native开发中加入新的C++类
  • #git 撤消对文件的更改
  • #微信小程序(布局、渲染层基础知识)
  • (10)ATF MMU转换表
  • (day 2)JavaScript学习笔记(基础之变量、常量和注释)
  • (二开)Flink 修改源码拓展 SQL 语法
  • (附源码)php投票系统 毕业设计 121500
  • (原創) 博客園正式支援VHDL語法著色功能 (SOC) (VHDL)
  • (转) Face-Resources
  • (转)C#调用WebService 基础
  • (转)C#开发微信门户及应用(1)--开始使用微信接口
  • (转)平衡树
  • .Net Core与存储过程(一)
  • .Net Memory Profiler的使用举例
  • .NET 自定义中间件 判断是否存在 AllowAnonymousAttribute 特性 来判断是否需要身份验证
  • .Net下C#针对Excel开发控件汇总(ClosedXML,EPPlus,NPOI)
  • @requestBody写与不写的情况