Flutter android和ios闪屏页配置

一.概念理解

闪屏页

1.当点击app开始的一瞬间，所呈现出来的页面就是闪屏页。
2.为什么会有闪屏也，由于app启动需要加载代码，这个过程需要耗时，在没有加载完成之前，是看不到app真正的页面。所以app在没有完全加载完时，系统会默认显示一个页面。
3.通常这个闪屏页如果没有进行配置，能看到的就是白屏页或黑屏页。另外在闪屏页期间程序是无法控制的，所以在这个阶段所看到的页面都是静态页面。

启动页

1.启动页是在闪屏页之后，app真正加载完成了。这个时候程序是可控制的，一般用于广告图的展示，或者引导图的展示。
2.启动页也不是必须的，如果不加启动页，就直接显示首页了。

二．显示方式

1.闪屏页

主流app展示方式如下：分别是在默认模式和深色模式下的呈现方式
在这里插入图片描述上边页面配置拆解：
上边展示的页面就是闪屏页，主要分为两个部分，背景色+前景图
背景色：一般都为单色，可根据系统主题适配，比如深色模式。
前景图：一般都为logo图标+文字。图片是分开展示的，分为上中下，可适当配置。
为什么要这样配置：程序推荐的方式，适配率比较高，比如说安卓大部分机型都能适配。

不推荐直接展示一整张图片

更多内容可看一下文章：https://zhuanlan.zhihu.com/p/342038493

如下图：这是在大屏端（pad）的呈现方式，很明显图片被裁减缺失了一部分。
图片为什么被裁减了：由于图片是整个屏幕显示，需要适配不同机型，会对图片进行等比例缩放，超出的部分会被裁减。

这就是为什么不推荐显示一整张图的原因，有没有解决的办法呢，简单来说可以在做图片的时候，主要的内容信息不要显示在图片的边缘。这样即使被裁减了，也不会丢失图片主要信息，看起来图片还是完整的。

在这里插入图片描述

3.启动页如下图

在这里插入图片描述上边图片就是启动页的展示方式：启动页一般是广告推广和进行用户引导。另外还能起到预加载的作用，比如项目功能多，上来就需要加载很多模块，如果不加个启动页，用户等待的时候过长，体验不好。当然也可以不加启动页，直接显示首页。

三.闪屏页配置

1.android端配置

在项目res中drawable目录中创建splash.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"><!--闪屏页背景色--><item><shape><solid android:color="@color/color_FFFFFF" /></shape></item><!--中间前景图--><item><bitmapandroid:tint="@color/color_title_bar"android:gravity="center"android:src="@drawable/ic_splash_center" /></item><!--底部前景图--><item android:bottom="@dimen/space_70"><bitmapandroid:gravity="bottom"android:src="@drawable/ic_splash_bottom" /></item></layer-list>

最后在主题中引入：

   <style name="welcomeTheme" parent="AppTheme"><item name="android:windowBackground">@drawable/splash</item></style>

这是安卓通用的配置方式，不过这里还有个问题。

android 12上的闪屏页配置
在这里插入图片描述

主题配置如下：

 implementation "androidx.core:core-splashscreen:1.0.0-beta02"

<?xml version="1.0" encoding="utf-8"?>
<resources><style name="Theme.App" parent="@android:style/Theme.NoTitleBar.Fullscreen"><item name="android:statusBarColor">@android:color/transparent</item><item name="android:navigationBarColor">@android:color/transparent</item><item name="android:windowDrawsSystemBarBackgrounds">true</item></style><style name="LaunchTheme" parent="Theme.SplashScreen"><item name="windowSplashScreenBackground">@color/splashScreenBackground</item><item name="windowSplashScreenAnimatedIcon">@drawable/splashscreen_icon</item><item name="windowSplashScreenAnimationDuration">2000</item><item name="postSplashScreenTheme">@style/Theme.App</item></style><style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar"><item name="android:windowBackground">?android:colorBackground</item></style>
</resources>

splashscreen_icon文件如下：是个小动画


<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"xmlns:aapt="http://schemas.android.com/aapt"><aapt:attr name="android:drawable"><vectorandroid:width="108dp"android:height="108dp"android:viewportHeight="432"android:viewportWidth="432"><!--Scale down the icon and translate if to fitwithin the inner 2/3 (scale <= 0.67) or the viewport.--><groupandroid:translateX="97"android:translateY="97"android:scaleX="0.55"android:scaleY="0.55"><clip-path android:pathData="m322.02,167.89c12.141,-21.437 25.117,-42.497 36.765,-64.158 2.2993,-7.7566 -9.5332,-12.802 -13.555,-5.7796 -12.206,21.045 -24.375,42.112 -36.567,63.166 -57.901,-26.337 -127.00,-26.337 -184.90,0.0 -12.685,-21.446 -24.606,-43.441 -37.743,-64.562 -5.6074,-5.8390 -15.861,1.9202 -11.747,8.8889 12.030,20.823 24.092,41.629 36.134,62.446C47.866,200.90 5.0987,267.15 0.0,337.5c144.00,0.0 288.00,0.0 432.0,0.0C426.74,267.06 384.46,201.32 322.02,167.89ZM116.66,276.03c-13.076,0.58968 -22.531,-15.277 -15.773,-26.469 5.7191,-11.755 24.196,-12.482 30.824,-1.2128 7.8705,11.451 -1.1102,28.027 -15.051,27.682zM315.55,276.03c-13.076,0.58968 -22.531,-15.277 -15.773,-26.469 5.7191,-11.755 24.196,-12.482 30.824,-1.2128 7.8705,11.451 -1.1097,28.027 -15.051,27.682z" /><pathandroid:fillColor="#3ddc84"android:pathData="m322.02,167.89c12.141,-21.437 25.117,-42.497 36.765,-64.158 2.2993,-7.7566 -9.5332,-12.802 -13.555,-5.7796 -12.206,21.045 -24.375,42.112 -36.567,63.166 -57.901,-26.337 -127.00,-26.337 -184.90,0.0 -12.685,-21.446 -24.606,-43.441 -37.743,-64.562 -5.6074,-5.8390 -15.861,1.9202 -11.747,8.8889 12.030,20.823 24.092,41.629 36.134,62.446C47.866,200.90 5.0987,267.15 0.0,337.5c144.00,0.0 288.00,0.0 432.0,0.0C426.74,267.06 384.46,201.32 322.02,167.89ZM116.66,276.03c-13.076,0.58968 -22.531,-15.277 -15.773,-26.469 5.7191,-11.755 24.196,-12.482 30.824,-1.2128 7.8705,11.451 -1.1102,28.027 -15.051,27.682zM315.55,276.03c-13.076,0.58968 -22.531,-15.277 -15.773,-26.469 5.7191,-11.755 24.196,-12.482 30.824,-1.2128 7.8705,11.451 -1.1097,28.027 -15.051,27.682z"android:strokeWidth="1.93078" /><group android:name="anim"><pathandroid:fillAlpha="0.999"android:fillColor="#979797"android:fillType="nonZero"android:pathData="m-197.42,638.59c0.0,0.0 -5.9627,-259.30 46.113,-215.87 32.895,27.437 76.838,-65.597 91.553,-46.592 2.7119,-7.7182 95.045,109.16 139.74,17.953 10.678,-21.792 43.788,-64.489 78.236,-16.164 54.226,76.069 110.90,-100.75 179.84,-17.966 36.393,43.701 96.377,-23.605 148.05,19.889 42.614,35.869 83.166,3.7255 109.76,61.101 24.321,52.465 35.893,197.64 35.893,197.64L631.77,92.867L-197.42,92.867Z"android:strokeAlpha="1"android:strokeColor="#00000000"android:strokeWidth="12" /></group></group></vector></aapt:attr><target android:name="anim"><aapt:attr name="android:animation"><objectAnimatorandroid:duration="1000"android:propertyName="translateY"android:repeatCount="0"android:valueFrom="0"android:valueTo="-432"android:valueType="floatType"android:interpolator="@android:interpolator/accelerate_decelerate" /></aapt:attr></target><target android:name="anim"><aapt:attr name="android:animation"><objectAnimatorandroid:duration="500"android:propertyName="translateX"android:repeatCount="-1"android:repeatMode="reverse"android:valueFrom="-162"android:valueTo="162"android:valueType="floatType"android:interpolator="@android:interpolator/accelerate_decelerate" /></aapt:attr></target>
</animated-vector>

在AndroidManifest中引用

        <activityandroid:name=".MainActivity"android:exported="true"android:launchMode="singleTop"android:theme="@style/LaunchTheme"android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"android:hardwareAccelerated="true"android:windowSoftInputMode="adjustResize"><!-- Specifies an Android theme to apply to this Activity as soon asthe Android process has started. This theme is visible to the userwhile the Flutter UI initializes. After that, this theme continuesto determine the Window background behind the Flutter UI. --><meta-dataandroid:name="io.flutter.embedding.android.NormalTheme"android:resource="@style/NormalTheme"/><intent-filter><action android:name="android.intent.action.MAIN"/><category android:name="android.intent.category.LAUNCHER"/></intent-filter></activity>

2.ios端配置

关于ios端的配置，比较简单，利用Xcode工具，不需要写代码。

设置图标（Icon）

打开 Assets.xcassets，将项目结构中的图片拉入 AppIcon 中的相应位置，如下图所示。最后，在你的 xcodeproj 中将 App Icons Source 设为 AppIcon，接下来重新 Build 即可。
在这里插入图片描述
设置启动页面（Launch Screen）

在我当前的 Xcode 版本（13.0）中，要设置启动页面需要有 Launch Screen File，事实上，这个文件可以使用 .storyboard。

我们在项目中创建 .storyboard文件，我将其命名为 “Launch Screen.storyboard”。

打开我们的 storyboard，然后在里面设计即可。

最后，在我们的 xcodeproj 中将 Launch Screen File 设置为 “Launch Screen.storyboard”。

这样就完成了。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/135727.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Yakit工具篇：WebFuzzer模块之序列操作

Yakit工具篇：WebFuzzer模块之序列操作

简介 Web Fuzzer 序列就是将多个 Web Fuzzer 节点串联起来&#xff0c;实现更复杂的逻辑与功能。例如我们需要先进行登录&#xff0c;然后再进行其他操作&#xff0c;这时候我们就可以使用 Web Fuzzer 序列功能。或者是我们在一次渗透测试中需要好几个步骤才能验证是否有漏洞这…
阅读更多...
vue中实现千位分隔符

vue中实现千位分隔符

vue中实现千位分隔符有两种&#xff0c;一种是某一个字段转换&#xff0c;一种是表格table中的整列字段转换 比如将3236634.12&#xff0c;经过转换后变为 3,236,634.12 1. 某一个字段转换 写js方法&#xff1a; export function numberExchange(value){if (!value) return…
阅读更多...
高压放大器在铁电测试中的用途有哪些

高压放大器在铁电测试中的用途有哪些

高压放大器在铁电测试中有多种重要用途。铁电材料是指具有自发极化的晶体材料&#xff0c;具有一系列特殊的电学和物理性质。铁电测试是研究铁电材料性质的关键实验手段之一。下面安泰电子将介绍高压放大器在铁电测试中的几个主要用途。 极化场施加&#xff1a;铁电材料的最显著…
阅读更多...
【Mac开发环境搭建】安装HomeBrew、HomeBrew安装Docker、Docker安装Mysql5.7和8

【Mac开发环境搭建】安装HomeBrew、HomeBrew安装Docker、Docker安装Mysql5.7和8

文章目录 HomeBrew安装相关命令安装包卸载包查询可用的包更新所有包更新指定包查看已经安装的包查看包的信息清理包查看brew的版本更新brew获取brew的帮助信息 Brew安装DockerDocker常用命令镜像相关查看已经拉取的所有镜像删除镜像 容器相关停止运行容器启动容器重启容器删除容…
阅读更多...
【第2章 Node.js基础】2.2 Node.js回调函数

【第2章 Node.js基础】2.2 Node.js回调函数

学习目标 &#xff08;1&#xff09;理解Node.js的回调函数&#xff1b; &#xff08;2&#xff09;掌握回调函数的使用。 什么是回调函数 回调函数是一种特殊的函数&#xff0c;它作为参数传递给另一个函数&#xff0c;并在特定的事件或条件发生时被调用。回调函数通常用于异…
阅读更多...
kotlin 基本语法

kotlin 基本语法

const val INFO "ZZZ is Success Result" fun main(){ var name: String? "zzz" name null name?.capitalize() //?问号的意思是如果name是null ,后面的方法不执行&#xff0c;如果name不是null&#xff0c;后面方法执行 var name: String? &q…
阅读更多...
内网可达网段探测netspy- Mac环境

内网可达网段探测netspy- Mac环境

netspy是一款快速探测内网可达网段工具 当我们进入内网后想要扩大战果&#xff0c;那我们可能首先想知道当前主机能通哪些内网段。 netspy正是一款应用而生的小工具&#xff0c;体积较小&#xff0c;速度极快&#xff0c;支持跨平台&#xff0c;支持多种协议探测&#xff0c;…
阅读更多...
GNU ld链接器 lang_process()(二）

GNU ld链接器 lang_process()(二）

一、ldemul_create_output_section_statements() 位于lang_process()中11行 。 该函数用于创建与目标有关的输出段的语句。这些语句将用于描述输出段的属性和分配。 void ldemul_create_output_section_statements (void) {if (ld_emulation->create_output_section_sta…
阅读更多...
接口测试 Mock 实战(二) | 结合 jq 完成批量化的手工 Mock

接口测试 Mock 实战(二) | 结合 jq 完成批量化的手工 Mock

因为本章的内容是使用jq工具配合完成&#xff0c;因此在开始部分会先花一定的篇幅介绍jq机器使用&#xff0c;如果读者已经熟悉jq&#xff0c;可以直接跳过这部分。 先来看应用场景&#xff0c;App 经常会有一些信息展示的列表页&#xff0c;比如商家的菜品、股票的公司、文章的…
阅读更多...
uni-app：js实现数组中的相关处理-数组复制

uni-app：js实现数组中的相关处理-数组复制

一、slice方法-浅拷贝 使用分析 创建一个原数组的浅拷贝&#xff0c;对新数组的修改不会影响到原数组slice() 方法创建了一个原数组的浅拷贝&#xff0c;这意味着新数组和原数组中的对象引用是相同的。因此&#xff0c;当你修改新数组中的对象时&#xff0c;原数组中相应位置的…
阅读更多...
【网络】UDP协议

【网络】UDP协议

UDP协议 一、传输层1、再谈端口号2、两个命令 二、UDP协议1、UDP协议格式2、UDP的解包和分用3、UDP的特点4、UDP使用注意事项5、基于UDP的应用层协议 一、传输层 我们以前在学习HTTP等应用层协议时&#xff0c;为了便于理解&#xff0c;简单的认为HTTP协议是将请求和响应直接发…
阅读更多...
如何使用 NFTScan NFT API 在 Arbitrum 网络上开发 Web3 应用

如何使用 NFTScan NFT API 在 Arbitrum 网络上开发 Web3 应用

Arbitrum 是以太坊的 Layer 2 扩容方案&#xff0c;为以太坊面临的高 gas 费和网络拥堵问题&#xff0c;提供了一个解决方案。作为 Layer 1 的以太坊基础层受每秒只能验算 15 笔交易的限制&#xff0c;在目前以太坊使用需求庞大的情况下&#xff0c;局限了以太坊的可扩展性。Ar…
阅读更多...
使用 Threejs 从基础开始构建 3D 地球

使用 Threejs 从基础开始构建 3D 地球

需求 threejs学习-3D 地球 实现&#xff1a; 1、使用粒子效果模拟宇宙星空 2、贴图、模型等资源的加载 3、加载资源的监听 4、效果合成器 EffectComposer 的初级使用 5、在地球上设置坐标以及坐标涟漪动画 6、标点间建立飞线 7、简单动画建议先浏览一遍git地址上代码&#xff…
阅读更多...
【论文笔记】UniPAD: A Universal Pre-training Paradigm for Autonomous Driving

【论文笔记】UniPAD: A Universal Pre-training Paradigm for Autonomous Driving

原文链接&#xff1a;https://arxiv.org/pdf/2310.08370.pdf 1. 引言 过去的3D场景理解预训练方法多采用2D图像领域中的想法&#xff0c;可大致分为基于对比的方法和基于MAE的方法。 基于对比的方法通过对比损失&#xff0c;在特征空间中将相似的3D点拉进而将不相似的点分开…
阅读更多...
这些机器视觉工程师犯法了，竟然在闲鱼或淘宝上卖公司的机器视觉程序架构源码

这些机器视觉工程师犯法了，竟然在闲鱼或淘宝上卖公司的机器视觉程序架构源码

目录 ​从个人层面来讲&#xff1a;从公司层面来讲&#xff1a; ​从个人层面来讲&#xff1a; 个人是法盲&#xff0c;法律意识淡薄只是一方面&#xff0c;另外一个方面就是对于代码的所有权&#xff0c;以及代码的安全性重视不够。把机器视觉程序架构源码打包在闲鱼或淘宝上…
阅读更多...
CCF ChinaSoft 2023 论坛巡礼 | NASAC青年软件创新奖论坛

CCF ChinaSoft 2023 论坛巡礼 | NASAC青年软件创新奖论坛

2023年CCF中国软件大会&#xff08;CCF ChinaSoft 2023&#xff09;由CCF主办&#xff0c;CCF系统软件专委会、形式化方法专委会、软件工程专委会以及复旦大学联合承办&#xff0c;将于2023年12月1-3日在上海国际会议中心举行。 本次大会主题是“智能化软件创新推动数字经济与社…
阅读更多...
云安全—Dashboard 攻击面

云安全—Dashboard 攻击面

0x00 前言 众所周知&#xff0c;如果只是一味的REST接口或者命令行话的操作方式&#xff0c;就会变相的提高操作门款&#xff0c;并且不会有很好的呈现方式&#xff0c;所以就有了web ui的方式&#xff0c;也就是Dashboar面板&#xff0c;本篇主要讨论一下关于Dashboar面板的概…
阅读更多...
asp.net人事管理信息系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

asp.net人事管理信息系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

一、源码特点 asp.net 人事管理信息系统是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c#语言 开发 asp.net 人事管理系统1 应用技术…
阅读更多...
adb and 软件架构笔记

adb and 软件架构笔记

Native Service&#xff0c;这是Android系统里的一种特色&#xff0c;就是通过C或是C代码写出来的&#xff0c;供Java进行远程调用的Remote Service&#xff0c;因为C/C代码生成的是Native代码&#xff08;机器代码&#xff09;&#xff0c;于是叫Native Service。 native服务…
阅读更多...
怎么调整excel表里面所有单元格中，某个相同字体大小，单元格中其他文字大小不变？

怎么调整excel表里面所有单元格中，某个相同字体大小，单元格中其他文字大小不变？

环境： excel 2021 python3.8 问题描述： 怎么调整excel表里面所有单元格里面1这个字体大小，单元格里面其他文字不变？ excel表里面。很多单元格都有1，1和文字都是10号字体，现在想把全部1字字体调整为16号其他字大小都不变 解决方案： 一、使用python来实现，经过测…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023