我目前正在尝试迁移到Cordova 11并掌握新的Splash Screen API,但我发现文档并不是完全清楚。如果有人能为我指明这方面的方向,我真的很感激
-
生成自适应图标的最佳方式是什么?
-
在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闪屏上进行更多定制