美文网首页
adaptive-icon 自适应图标

adaptive-icon 自适应图标

作者: 肖散 | 来源:发表于2022-09-21 15:50 被阅读0次

先看效果

平移 放大 裁剪原理
1 2 示意图

官方文档
范例
测试工具
直接理解就是,通过一张 前景图 +一张 背景图 +(系统的遮罩裁剪+对前景图做动画 )最后实现app图标的动画效果
最最最关键,要看效果必须launcher支持,一般launcher都没这些个功能,所以,这里可以通过上面提供的测试工具来看效果。

创建步骤

1. 创建2张图,一个前景,一个背景

2. 创建adaptive-icon,指定上面创建的图

    <?xml version="1.0" encoding="utf-8"?>
    <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
        <background android:drawable="@drawable/ic_launcher_background" />
        <foreground android:drawable="@drawable/ic_launcher_foreground" />
    </adaptive-icon>

由于是Android8之后才有的所以,文件路径如下。为了能兼容低版本最好在默认的文件中放一个同名。不然launcher识别不到图标。
res/mipmap-anydpi-v26/ic_launcher.xml

3.在Manifest的android:icon中使用你创建的这个adaptive-icon

    <application
        …
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        …>
    </application>

图片要求

imag1.png

1.两张图大小都是108dpX108dp的

2.内容区域为72dpX72dp,多的部分会被系统遮盖了,也就动画的时候可能漏一下

3. 关键icon的区域最好在那个66dp直径的圆中,不然动画会超出

最后,动画实际上是通过两张图差(一般是前景放大移动,背景图不动)动来完成的,只要2个图配合好就行。


前景作为镂空 效果

相关文章

网友评论

      本文标题:adaptive-icon 自适应图标

      本文链接:https://www.haomeiwen.com/subject/qnabortx.html