美文网首页Android开发Android开发经验谈Android技术知识
flutter 如何快速的做好APP的图标适配

flutter 如何快速的做好APP的图标适配

作者: 0d1ea6d041fa | 来源:发表于2020-07-14 22:25 被阅读0次

    我收集了一些学习用的资料,其中包含了很多学习,面试,中高进阶fluuter资料,还有很多视频详解,如果有同学想进一步了解,详情请看文末。也欢迎各路大神门前来装X。

    接触Flutter一年多的时间,作为一名之前只做H5前端开发的老司机,对类原生App开发还是挺有兴趣的,一点小小的发现和提升都会惊喜,希望能和大家一起学习进步,提升自己的能力,做出更好更优秀的APP应用。今天跟大家一起来学习如何做好Flutter App应用图标的适配。

    Android 8.0 后App图标开始变成圆形的图标了

    如果不进行图标适配的话,那么显示的图标将异常丑

    那么怎么用一套图标,既可以兼容安卓8之前的版本矩形/圆角矩形图标,也可以兼容8之后的圆形图标版本呢?

    在此之前我们得先了解一项Android 8.0以后应用图标上的区别(老司机可以无视)。

    Android 8.0(API 级别 26)引入了自适应启动器图标,可以在不同设备模型中显示各种形状。先来看下官方酷炫动态图:

    Android 8.0 以上可以通过定义 2 层来控制自适应启动器图标的外观,包括背景层和前景层,就如我们在做PS多图层叠加一个道理。您必须提供图标的背景图层(也可以是单独的一个Hex色值),前景层的图标轮廓周围不能有蒙版或背景阴影。这里前后图层还需注意以下两点:

    1、图层大小以 324*324 (单位px)为佳;

    2、前景层即图标层的图标主体部分应居中且不应超过图层大小的66.6%,以324宽高为例,主体图标部分大小不应超过 215*215 大小,否则图标的主体会被遮罩部分挡住。

    好了到此处我们的Flutter图标适配就完成了90%了。啥?我们不是什么都还没做吗?对于剩下的步骤工具一个命令就能能完成的事,那不叫事,嘿嘿。

    首先准备好我们要用的图层和图标,如下:

    兼容Android 8.0之前应用图标 ic_launcher.png

    背景图层 ic_launcher_background.png

    前景图层 ic_launcher_foreground.png

    万事俱备只欠东风,要快速实现自适应图标,还得请出我们的主角,那就是Flutter的插件:flutter_launcher_icons

    flutter_launcher_icons 提供了adaptive_icon_background 和 adaptive_icon_foreground 指定这两个属性,即可实现安卓8以上版本的图标自适应工作。安装好依赖之后需要做简单的配置即可,如下

    #App 应用适配图标配置

    flutter_icons:

    android: "ic_launcher"

    ios: true

    image_path: "assets/icon/ic_launcher.png"

    only available for Android 8.0 devices and above

    adaptive_icon_background: "assets/icon/ic_launcher_background.png"

    only available for Android 8.0 devices and above

    adaptive_icon_foreground: "assets/icon/ic_launcher_foreground.png"

    具体详细的配置参数可以去官方插件地址了解,在这里就不详细介绍了.

    https://shimo.im/docs/dYkqrQcyr98jPKYX/ 《android学习面试fulutter进阶资料免费获取》,可复制链接后用石墨文档 App 或小程序打开。

    相关文章

      网友评论

        本文标题:flutter 如何快速的做好APP的图标适配

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