Flutter android和ios闪屏页配置

news2024/10/6 12:34:35

一.概念理解

闪屏页

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>
        <bitmap
            android:tint="@color/color_title_bar"
            android:gravity="center"
            android:src="@drawable/ic_splash_center" />

    </item>
    <!--底部前景图-->
    <item android:bottom="@dimen/space_70">
        <bitmap
            android: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">:color/transparent</item>
        <item name="android:navigationBarColor">:color/transparent</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    </style>

    <style name="LaunchTheme" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">/splashScreenBackground</item>
        <item name="windowSplashScreenAnimatedIcon">/splashscreen_icon</item>
        <item name="windowSplashScreenAnimationDuration">2000</item>
        <item name="postSplashScreenTheme">/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">
    <vector
        android:width="108dp"
        android:height="108dp"
        android:viewportHeight="432"
        android:viewportWidth="432">
      <!--
       Scale down the icon and translate if to fit
       within the inner 2/3 (scale <= 0.67) or the viewport.
      -->
      <group
          android: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" />
        <path
            android: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">
          <path
              android: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">
      <objectAnimator
          android: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">
      <objectAnimator
          android: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中引用

        <activity
            android: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 as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
                android: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.coloradmin.cn/o/1187136.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

22款奔驰GLE450升级23P驾驶辅助 智能L2领航

驾驶辅助和自动驾驶的区别就是需要人为去接管&#xff0c;虽然车辆会根据道路自己行驶&#xff0c;弯道上也能居中自动修正行驶&#xff0c;长时间不接管方向盘&#xff0c;系统会提示人为接管&#xff0c;这就是奔驰的23P驾驶辅助系统&#xff0c; 很多车友升级23P驾驶辅助系统…

Power Apps-创建表头样式

点击上方插入中的文本标签&#xff0c;双击编辑文字&#xff0c;右侧边栏可以编辑样式&#xff08;颜色中第一个选择字体颜色&#xff0c;第二个选择组件背景色&#xff09;

PTA_乙级_1001_C++

思路&#xff1a;使用判断语句即可&#xff0c;使用while进行循环&#xff0c;终止条件是n不等于1&#xff0c;然后用if-else判断奇数偶数 #include <iostream> using namespace std;int main(){int n;int count0;cin>>n;while(n!1){if(n%20){n/2;}else{n3*n1;n/2…

画图、图片处理

这里写目录标题 画图问题代码d2l.plt.subplots返回值axes d2l.plt.subplots(num_rows, num_cols, figsizefigsize&#xff09;subplot()、subplots()python内置函数&#xff1a;zip()函数搭配enumerate函数使用&#xff0c;用在for循环中简介enumerate()简介zip() transforms.…

PHP代码示例

我们需要使用PHP的curl库来发送HTTP请求。以下是一个基本的示例&#xff1a; php <?php // 初始化curl $ch curl_init(); // 设置代理 curl_setopt($ch, CURLOPT_PROXY, ""); // 设置URL curl_setopt($ch, CURLOPT_URL, ""); // 执行请求 $respon…

使用request库的get方法发起GET请求

// 导入所需的库 const request require(request); const cheerio require(cheerio);// 设置代理信息&#xff0c;proxy_host: www.duoip.cn, proxy_port: 8000 const proxy {host: jshk.com.cn,port: 1234 };// 定义要爬取的URL const url http://localhost:9200/_cat/ind…

Mysql配置主从复制-GTID模式

目录 主从复制 主从复制的定义 主从复制的原理 主从复制的优势 主从复制的形式 主从复制的模式 主从复制的类型 GTID模式 GTID的概念 GTID的优势 GTID的原理 GTID的配置 Mysql主服务器 ​编辑 Mysql从服务器 ​编辑 主从复制 主从复制的定义 是指把数据从一个…

rank()、row_number()、dense_rank()用法详解

建表测试 测试表数据&#xff1a;test1 CREATE DATABASE /*!32312 IF NOT EXISTS*/db_test /*!40100 DEFAULT CHARACTER SET utf8 */; USE db_test; /*Table structure for table test1 */ DROP TABLE IF EXISTS test1; CREATE TABLE test1 ( id int(10) NOT NULL, score i…

Go语言的Json序列化与反序列化、Goto语法、Tcp Socket通信

目录标题 一、Json序列化与反序列化1. 序列化2. 反序列化 二、Goto语法三、Tcp Socket1. 单客户端发送信息到服务端2. 服务端客户端通信 一、Json序列化与反序列化 1. 序列化 package mainimport ("encoding/json""fmt")type Person struct {Name string…

【uniapp】六格验证码输入框实现

效果图 代码实现 <view><view class"tips">已发送验证码至<text class"tips-phone">{{ phoneNumber }}</text></view><view class"code-input-wrap"><input class"code-input" v-model"…

fpga时序相关概念与理解

一、基本概念理解 对于数字系统而言&#xff0c;建立时间&#xff08;setup time&#xff09;和保持时间&#xff08;hold time&#xff09;是数字电路时序的基础。数字电路系统的稳定性&#xff0c;基本取决于时序是否满足建立时间和保持时间。 建立时间Tsu&#xff1a;触发器…

【第2章 Node.js基础】2.1 JavaScript基本语法

文章目录 学习目标JavaScript版本与JavaScript运行环境JavaScript版本JavaScript运行环境 JavaScript语句与注释语句语句块注释 变量变量的命名变量的声明与赋值变量提升变量泄露全局作用域和函数作用域块级作用域与let关键字使用const关键字声明只读常量注意 数据类型数值&…

【C++】万字一文全解【继承】及其特性__[剖析底层化繁为简](20)

前言 大家好吖&#xff0c;欢迎来到 YY 滴C系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; 目录 一.继承&复用&组合的区别1&…

EXCEL函数判断一个字符串是否包含

IF(ISNUMBER(SEARCH("批发",$E$2)),1,IF(ISNUMBER(SEARCH("零售",$E$2)),1,0))

Python高级语法----Python的元编程

文章目录 装饰器元类反射使用 `__getattr__`, `__setattr__`, 和 `__delattr__`元编程是一种编程技术,它允许程序员在运行时修改、增加或操作程序的结构。在Python中,元编程通常涉及到对类和函数的动态创建和修改,这是通过使用诸如装饰器、元类和反射等高级功能来实现的。 …

《网络协议》02. 物理层 · 数据链路层 · 网络层

title: 《网络协议》02. 物理层 数据链路层 网络层 date: 2022-08-31 22:26:48 updated: 2023-11-08 06:58:52 categories: 学习记录&#xff1a;网络协议 excerpt: 物理层&#xff08;数据通信模型&#xff0c;信道&#xff09;、数据链路层&#xff08;封装成帧&#xff0c…

不止于“初见成效”,阿斯利康要让数据流转,以 AI 带动决策智能

“阿斯利康数字化成果在进博会上引人注目&#xff0c;令我感到非常高兴。”这是阿斯利康代表的感慨。 数字化建设目标是利用先进技术来提高企业运营效率&#xff0c;降低成本。在第六届进博会的7.2 B2-01展区&#xff0c;阿斯利康不仅展示了全球领先的生物医药和医疗器械成果&a…

NSSCTF逆向题解

[SWPUCTF 2021 新生赛]简简单单的逻辑 直接把key打印出来&#xff0c;然后整理一下result&#xff0c;让key和result进行异或 key[242,168,247,147,87,203,51,248,17,69,162,120,196,150,193,154,145,8] data[0xbc,0xfb,0xa4,0xd0,0x03,0x8d,0x48,0xbd,0x4b,0x00,0xf8,0x27,0x…

ue rpg学习截图(p1-p59)

学习到59节了&#xff0c;几个ui都有了&#xff0c;

达梦数据库答案

1、 创建数据库实例&#xff0c;到/dm8/data下&#xff0c;数据库名&#xff1a;DEMO&#xff0c;实例名DEMOSERVER&#xff08;10分&#xff09; [dmdbadmServer ~]$ cd /dm8/tool [dmdbadmServer tool]$ ./dbca.sh1、 簇大小32&#xff0c;页大小16&#xff0c;登录密码&…