flutter Android SplashScreen 看我如何实现安卓精美的启动页(闪屏)

flutter Android SplashScreen 看我如何实现安卓精美的启动页(闪屏)

实现App的第一步要先实现一个欢迎界面。每次打开APP的时候欢迎界面基本上都是广告,广告就算了,还无比的丑陋,我肯定是不能忍受的,那么我们就学习一下安卓下的启动页制作。

1 、Android 12 以下启动闪屏

打开android\app\src\main\res\drawable\launch_background.xml对启动页背景进行设置。

将注释<!--去掉,android:src="@mipmap/launch_image"就是你设置背景图片的位置。将你想要的启动页图片的名字设置为launch_image,然后放到drawable文件下,启动页就设置好啦。然而,并没有那么顺利,我运行的时候出错了。

原来是因为启动页背景图片必须是png图片,我放的是jpeg图片,所以不行。换一个png图片再试试。然后成功的再次报错。。。。

经过一番查询,终于不再报错了。首先修改android\app\src\main\AndroidManifest.xml添加如下代码:

xml 复制代码
<meta-data
    android:name="io.flutter.embedding.android.SplashScreenDrawable"
    android:resource="@drawable/launch_background"
 />

然后将android\app\src\main\res\drawable\launch_background.xmlandroid\app\src\main\res\drawable-v21\launch_background.xml中的注释<!--去掉,然后修改代码为:

xml 复制代码
  <item>
        <bitmap
            android:gravity="fill"
            android:src="@mipmap/launch_image" />
    </item> 

接着将launch_image.png放入mipmap-hdpi中,现在启动就可以看到启动页了。

效果图:

可以看出来,还是有问题的,启动页前还是有默认的页面。同时会有提示A splash screen was provided to Flutter, but this is deprecated. See flutter.dev/go/android-splash-migration for migration steps.,翻译一下:Flutter提供了一个启动屏幕,但这是不推荐的。有关迁移步骤,请参阅flutter.dev/go/android-splash-migration。,那么我们就去这个地方看看吧,原来在Flutter 2.5以后已经弃用了这个方法。

2、Android 12 SplashScreen 安卓12以上闪屏

在 Android 中,你有两个可以分开控制的页面:在 Android 应用初始化时的启动页,以及在 Flutter 初始化时的 闪屏页。从 Flutter 2.5 开始,启动屏幕和闪屏页已经被合并。 Flutter 现在只会实现 Android 启动屏幕,它会一直显示到框架绘制的第一帧。从 Android 12 开始,在搭载 Android 12 或更高版本的设备上运行时,所有应用都将拥有启动动画。这包括启动时的进入应用动作、显示应用图标的启动画面,以及向应用本身的过渡。默认情况下,SplashScreen 使用主题的 windowBackground和启动器图标,通过向应用主题添加属性来完成启动画面的自定义。从 Android 12开始,必须有一个带图标的默认启动页面,无法更改,但是,我们可以美化这个启动页面,我们可以对android\app\src\main\res\values\styles.xml进行设置。

使用 windowSplashScreenAnimatedIcon 替换起始窗口中心的图标。如果该对象可通过 AnimationDrawable 和 AnimatedVectorDrawable 呈现动画效果和进行绘制,那么您还需要设置 windowSplashScreenAnimationDuration,以在显示起始窗口的同时播放动画。

使用 windowSplashScreenAnimationDuration 指示启动画面图标动画的时长。设置该时长对显示启动画面的实际时间不会产生任何影响,但您可以在自定义启动画面退出动画时使用SplashScreenView#getIconAnimationDuration 检索图标动画的时长。<item name="android:windowSplashScreenAnimationDuration">1000</item>

使用 windowSplashScreenIconBackgroundColor 设置启动画面图标后面的背景。当窗口背景与图标之间的对比度不够高时,这很有用。<item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>

您可以使用 windowSplashScreenBrandingImage 设置要显示在启动画面底部的图片。设计准则建议不要使用品牌图片。<item name="android:windowSplashScreenBrandingImage">@drawable/...</item>

我们在android\app\src\main\res\values\styles.xml中设置<item name="android:windowSplashScreenAnimatedIcon">@drawable/news_avd_v02</item>放入一个动画,news_avd_v02是动画形式的矢量可绘制对象 (AVD) XML文件,必须是这样的格式才能正确显示。我们也可以放置一个Gif作为开始动画。

效果图:

3、AE 与 BODYMOVIE 使用方法,导出AVD(xml)动画

上边在启动页导入gif动画后感觉效果不是很好,动画不是很流畅,那我们就自己制作一个(AVD) XML文件动画来吧,使用XML文件的话,感觉会流畅很多。AE(Adobe After Effects)是视频后期特效和动画制作的行家,结合插件Bodymovin可以导出xml文件格式动画,现在开始学习使用AE和Bodymovin吧。首先下载AE,大家要支持正版哦,不建议去百度搜索破解版使用。下载安装完AE,再下载一个Bodymovin插件,到GitHub的下载Bodymovin,插件地址:github.com/bodymovin/b...,在项目目录的"/build/extension"目录下找到"bodymovin.zxp"文件,为了安装bodymovin.zxp,还需要下载ZXP Installer,地址:aescripts.com/learn/zxp-i...,双击打开软件,点击"File">"Open"菜单项载入上述bodymovin.zxp插件包,ZXP Installer会自动开始安装。打开AE,点击"编辑">"首选项">"常规"菜单项,选中"允许脚本写入文件和访问网络",点击确定。点击"窗口">"扩展">"Bodymovin"菜单项,就可以打开Bodymovin的界面使用插件了。

开始点进这个界面,Render按钮是灰色的,需要做三件事情:找到并选择需要渲染的合成,点击最右边的三个点,选择导出的路径,点击设置按钮,找到AVD选项,选择并保存。此时回到外面Render按钮就可以点击了,点击就可以渲染了。在刚刚选择的路径找到渲染完成的AVD,直接拖进Android项目使用。

接下来使用AE制作一个载入动画图片吧。我们先下载一个lottie动画,使用bodymovin插件导入到AE中进行设置和修改制作。

导入json文件:

编辑动画:

导出AVD xml文件:

如果列表中没有你的项目,就点击refresh list刷新一下列表,然后选中selected,再点击列表后边三个小点,指定要导出的路径,最后点击render即可。

将导出的AVD xml动画文件放入flutter的Android的android\app\src\main\res\drawable目录中使用。

修改android\app\src\main\res\values\styles.xml对闪屏样式进行设置,完整配置代码如下:

xml 复制代码
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             the Flutter engine draws its first frame -->
           <!-- 启动画面中间显示的图标,默认使用应用图标 -->
        <item name="android:windowSplashScreenAnimatedIcon">@drawable/data</item>
         <!-- 启动画面底部的图片。 -->
         <item name="android:windowSplashScreenBrandingImage">@drawable/launch_background</item>
         <!-- 启动画面背景色。 -->
        <item name="android:windowSplashScreenBackground">@android:color/black</item>
         <!-- 启动画面在关闭之前显示的时长。最长时间为 1000 毫秒。 -->
       <item name="android:windowSplashScreenAnimationDuration">1000</item> 
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.

         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

效果图:

4、总结

实现到现在,我发现,虽然Flutter是跨平台框架,但是并不像我想的那样,只会Flutter知识就可以了,还需要掌握Android和IOS以及其他平台的相关知识,是我太天真了。

相关推荐
东方翱翔4 分钟前
CSS的三种基本选择器
前端·css
Fan_web27 分钟前
JavaScript高级——闭包应用-自定义js模块
开发语言·前端·javascript·css·html
yanglamei196235 分钟前
基于GIKT深度知识追踪模型的习题推荐系统源代码+数据库+使用说明,后端采用flask,前端采用vue
前端·数据库·flask
千穹凌帝35 分钟前
SpinalHDL之结构(二)
开发语言·前端·fpga开发
dot.Net安全矩阵1 小时前
.NET内网实战:通过命令行解密Web.config
前端·学习·安全·web安全·矩阵·.net
Reese_Cool1 小时前
【C语言二级考试】循环结构设计
android·java·c语言·开发语言
Hellc0071 小时前
MacOS升级ruby版本
前端·macos·ruby
前端西瓜哥1 小时前
贝塞尔曲线算法:求贝塞尔曲线和直线的交点
前端·算法
又写了一天BUG1 小时前
npm install安装缓慢及npm更换源
前端·npm·node.js
平凡シンプル1 小时前
安卓 uniapp跨端开发
android·uni-app