Cordova 11-Splash Screen-splashscreen.xml中的内容



我目前正在尝试迁移到Cordova 11并掌握新的Splash Screen API,但我发现文档并不是完全清楚。如果有人能为我指明这方面的方向,我真的很感激

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

  2. 在Splash Screen文档中,它在Android特定文档中特别提到,您可以为自适应图标创建一个XML文件:

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

但我不知道这个splashscreen.xml文件中应该包含什么,而且我似乎找不到任何与之相关的文档——有什么想法吗?我们以前从未创建过这个,因为config.xml中的所有属性都足够了。

谢谢,bengrah

为了在我的cordova android 11.0.0应用程序中生成用于splashscreen的XML文件,我在android Studio中创建了一个示例android应用程序,并按照这些向示例应用程序添加图标的说明,将Foreground Layer指定为我所需splashscree图标的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>

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

经过大量的尝试和错误,我在这方面取得了一些进展。首先,我使用安卓工作室创建了一个自适应图标。Livecode.com有一个非常好的指南来指导如何做到这一点。生成资产后,创建了一个新的res文件夹,其中包含以下内容:

C:MyApplicationappsrcmainres>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文件,特别是AndroidWindowSplashScreenAnimatedCon属性,以指向刚刚生成的activity_main.xml文件:

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

最后,如果您签出activity_main.xml文件,其中会有一些引用约束布局的标记。如果你在这个时候构建应用程序,你可能会得到如下错误:

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

您的项目似乎缺少一个依赖项,您可以通过打开project.properties并添加以下属性来添加该依赖项:

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

在这个Github问题页面上可以找到更多信息-当然,将其添加到项目中。属性意味着如果您删除平台文件夹,则必须手动重新添加。我没能找到一种简单地添加这种依赖关系的方法。我确实通过从activity_main.xml文件中删除一些约束标记来绕过它。我的项目是这样构建的:

<?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>

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

bengrah

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

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

我的图标文件是矩形的,在飞溅中是圆形的,而且很小。然而,这对我来说已经足够好了。

我终于找到了xml文件中应该包含的内容!你所做的是,你用android工作室创建一个像Bengrah所说的那样的图像。但是,您使用的是.SVG文件,而不是.png。这会产生一个icon.xml文件,然后您可以将其添加到您的cordova项目中,并在config.xml中引用。

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

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

谢谢@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>

我用我最大的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>

它解决了我的问题

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" /> 

将其添加到configxml中。现在构建

在Cordova闪屏上进行更多定制

相关内容

最新更新