Cordova 11 - 启动屏幕 - flashscreen.xml 中的内容

问题描述 投票:0回答:7

我目前正在尝试迁移到 Cordova 11 并掌握新的 Splash Screen API,但我发现文档在所有方面并不完全清楚。如果有人能为我指出其中一些内容的方向,我将非常感激。

  1. 生成自适应图标的最佳方法是什么?

  2. 在启动屏幕文档中,它在Android 特定文档中特别提到您可以为自适应图标创建 XML 文件:

<platform name="android">
    <!-- Default -->
    <preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/screen/android/splashscreen.xml" />
</platform>

但我不知道这个

splashscreen.xml
文件中应该包含什么内容,而且我似乎找不到任何与之相关的具体文档 - 有什么想法应该放在这里吗?我们以前从未需要创建这个,因为
config.xml
中的所有属性都足够了。

谢谢, 班格拉

cordova splash-screen
7个回答
18
投票

为了在 cordova-android 11.0.0 应用程序中生成用于初始屏幕的 XML 文件,我在 Android Studio 中创建了一个示例 Android 应用程序,并按照 这些说明 向示例应用程序添加图标,指定了前景层成为我想要的闪屏图标的 SVG 文件。我指定背景层为白色。 然后我复制了新生成的文件

MyApplication/app/src/main/res/drawable/ic_launcher_foreground.xml
进入我的 Cordova 应用程序并将其重命名为
resources/android/splash/splashscreen.xml

最后,我更新了我的 Cordova 应用程序的

config.xml
文件,如下所示:

<platform name="android">
    <preference name="AndroidWindowSplashScreenAnimatedIcon" value="resources/android/splash/splashscreen.xml" />
    <preference name="AndroidWindowSplashScreenBackground" value="#FFFFFF" />
</platform>

可能值得注意的是,我的图标没有以任何方式动画。


5
投票

经过大量的尝试和错误,我在这方面取得了一些进展。首先,我使用 Android Studio 创建了一个自适应图标。 Livecode.com 有一个关于如何执行此操作的非常好的指南。生成资产后,这将创建一个新的

res
文件夹,其中包含以下内容:

C:\MyApplication\app\src\main\res>tree /f
Folder PATH listing for volume Windows
Volume serial number is E47A-1E3F
C:.
├───drawable
├───drawable-v24
│       ic_launcher_foreground.xml
│
├───layout
│       activity_main.xml
│
├───mipmap-anydpi-v26
│       ic_launcher.xml
│       ic_launcher_round.xml
│
├───mipmap-hdpi
│       ic_launcher.png
│       ic_launcher.webp
│       ic_launcher_foreground.png
│       ic_launcher_round.png
│       ic_launcher_round.webp
│
├───mipmap-mdpi
│       ic_launcher.png
│       ic_launcher.webp
│       ic_launcher_foreground.png
│       ic_launcher_round.png
│       ic_launcher_round.webp
│
├───mipmap-xhdpi
│       ic_launcher.png
│       ic_launcher.webp
│       ic_launcher_foreground.png
│       ic_launcher_round.png
│       ic_launcher_round.webp
│
├───mipmap-xxhdpi
│       ic_launcher.png
│       ic_launcher.webp
│       ic_launcher_foreground.png
│       ic_launcher_round.png
│       ic_launcher_round.webp
│
├───mipmap-xxxhdpi
│       ic_launcher.png
│       ic_launcher.webp
│       ic_launcher_foreground.png
│       ic_launcher_round.png
│       ic_launcher_round.webp
│
├───values
│       colors.xml
│       ic_launcher_background.xml
│       strings.xml
│       themes.xml
│
└───values-night
        themes.xml

接下来,我更新了 Cordova 项目的

config.xml
文件,特别是 AndroidWindowSplashScreenAnimatedIcon 属性,以指向刚刚生成的 activity_main.xml 文件:

<platform name="android">
   <preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/screen/android/layout/activity_main.xml" />
</platform>

最后,如果您查看 activity_main.xml 文件,它将包含一些引用 约束布局 的标记。如果您此时构建应用程序,您可能会收到如下错误:

错误:找不到属性layout_constraintBottom_toBottomOf(又名com.yjr.jinguantong:layout_constraintBottom_toBottomOf)。

您的项目似乎缺少依赖项,您可以通过打开

project.properties
并添加以下属性来添加该依赖项:

cordova.system.library.2=com.android.support.constraint:constraint-layout:1.1.3

在此 Github 问题页面 上找到了更多信息 - 当然,将其添加到 project.properties 意味着如果您删除 platforms 文件夹,则必须手动重新添加它。我无法找到一种方法来简单地添加此依赖项。我确实通过从 activity_main.xml 文件中删除一些 constraint 标记来解决这个问题。我的项目是这样构建的:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" />

</androidx.constraintlayout.widget.ConstraintLayout>

希望这对其他正在挣扎的人有帮助。

本格拉


3
投票

我不确定这是否是最好的解决方案,但如果像我一样您只是想要快速简单的东西,您可以指向现有的图标文件之一(而不是新的 .xml),如下所示:

<platform name="android">
    <!-- Default -->
    <preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/android/screen/splash-port-xxxhdpi.png"/>
</platform>

我的图标文件是矩形的,在启动画面中它是圆形的,而且很小。不过,对我来说已经足够了


3
投票

我终于知道xml文件里应该有什么了! 你要做的就是,用 android studio 创建一个像 Bengrah 所说的那样的图像。但是,您使用的是 .SVG 文件,而不是 .png。这会生成一个 icon.xml 文件,然后您可以将其添加到 cordova 项目中并在 config.xml 中引用。

这对于我的应用程序来说看起来仍然很糟糕。我认为让它与 pgn 一起工作可能更容易。据我现在的理解,您需要一个大小为 288dp 的正方形图标,并且图标本身需要居中并适合 192dp 的圆。 (假设你不使用背景)

我还不确定如何确保你的图像是 dp 而不是像素。或者如果这是自动完成的。


0
投票

我从最大的 PNG 图像在线创建了矢量 xml 文件 使用网站 https://svg2vector.com/ 我删除了下面的所有行:

<platform name="android">
    <splash density="land-hdpi" src="res/screens/android/screen-hdpi-landscape.png" />
    <splash density="land-ldpi" src="res/screens/android/screen-ldpi-landscape.png" />
    <splash density="land-mdpi" src="res/screens/android/screen-mdpi-landscape.png" />
    <splash density="land-xhdpi" src="res/screens/android/screen-xhdpi-landscape.png" />
    <splash density="port-hdpi" src="res/screens/android/screen-hdpi-portrait.png" />
    <splash density="port-ldpi" src="res/screens/android/screen-ldpi-portrait.png" />
    <splash density="port-mdpi" src="res/screens/android/screen-mdpi-portrait.png" />
    <splash density="port-xhdpi" src="res/screens/android/screen-xhdpi-portrait.png" />
</platform>

并输入这一行:

<platform name="android">
     <preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/screens/android/splashscreen.xml"/>
</platform>

它解决了我的问题


0
投票

谢谢@Zvika,你的回答对我来说已经足够好了。我添加了 .png 而不是 .xml,还添加了背景颜色、启动画面延迟和淡入淡出。

<platform name="android">
   ...
   <preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/screen/android/ic_launcher-gelb-192.png"/>
   <preference name="AndroidWindowSplashScreenBackground" value="#155169" />
   <preference name="SplashScreenDelay" value="1000" />
   <preference name="AutoHideSplashScreen" value="true" />
   <preference name="FadeSplashScreen" value="true"/>
   <preference name="FadeSplashScreenDuration" value="2000"/>
   ...
</platform>

0
投票

Livecode 创建图像资源,如本网站所示。然后创建文件夹 res/screen/android(和 ios)/

创建splashscreen.xml 文件 插入以下代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>

<TextView  
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:text="Loading...."
/>
</LinearLayout>

保存它。

终于

<preference name="AndroidWindowSplashScreenAnimatedIcon"  
value="res/screen/android/splashscreen.xml" /> 

将此添加到配置 xml。现在开始构建

Cordova 初始屏幕上进行更多自定义

© www.soinside.com 2019 - 2024. All rights reserved.