美文网首页
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