阅读 951

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>
复制代码
文章分类
Android