Cordova - Android 上的自适应图标

Question

我有一组使用Android Image Asset Studio生成的图标。 但是，我不知道如何在Cordova中将这些图标设置为我的应用程序。

在遵循有关 Cordova 中图标的文档时，我只设法使用以下代码将方形图标设置为我的项目：

<platform name="android">
    <!--
        ldpi    : 36x36 px
        mdpi    : 48x48 px
        hdpi    : 72x72 px
        xhdpi   : 96x96 px
        xxhdpi  : 144x144 px
        xxxhdpi : 192x192 px
    -->
    <icon src="res/android/ldpi.png" density="ldpi" />
    <icon src="res/android/mdpi.png" density="mdpi" />
    <icon src="res/android/hdpi.png" density="hdpi" />
    <icon src="res/android/xhdpi.png" density="xhdpi" />
    <icon src="res/android/xxhdpi.png" density="xxhdpi" />
    <icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
</platform>

但是，假设在 Android Oreo 中，应用程序的图标是圆形的，并且在该手机上无法正确显示我的应用程序图标。 图标在圆圈内缩小，周围有白色背景。

问题：如何将 Image Asset Studio 生成的圆形图标设置到我的 Cordova 项目？

Answer 1

以下是我正在生产的项目的经过测试且有效的解决方案。

将所有生成的图标复制到项目根目录下的res/android中（与resources或platforms文件夹相同级别），并将以下配置添加到config.xml文件中：

<widget xmlns:android="http://schemas.android.com/apk/res/android">
    <platform name="android">
        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
            <application android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" />
        </edit-config>
        <resource-file src="res/android/drawable/ic_launcher_background.xml" target="app/src/main/res/drawable/ic_launcher_background.xml" />
        <resource-file src="res/android/mipmap-hdpi/ic_launcher.png" target="app/src/main/res/mipmap-hdpi/ic_launcher.png" />
        <resource-file src="res/android/mipmap-hdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_round.png" />
        <resource-file src="res/android/mipmap-mdpi/ic_launcher.png" target="app/src/main/res/mipmap-mdpi/ic_launcher.png" />
        <resource-file src="res/android/mipmap-mdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_round.png" />
        <resource-file src="res/android/mipmap-xhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher.png" />
        <resource-file src="res/android/mipmap-xhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_round.png" />
        <resource-file src="res/android/mipmap-xxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher.png" />
        <resource-file src="res/android/mipmap-xxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png" />
        <resource-file src="res/android/mipmap-xxxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher.png" />
        <resource-file src="res/android/mipmap-xxxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png" />
    </platform>    
</widget>

不要忘记将xmlns:android="http://schemas.android.com/apk/res/android"添加到您的<widget>中。

如果您有一个<icon>作为<widget> => <platform => <icon> ，请删除。

将上述更改添加到您的config.xml后，使用ionic cordova platform remove android或sudo ionic cordova platform remove android删除您的 Android 平台（取决于您的环境设置），然后使用ionic cordova platform add android或sudo ionic cordova platform add android再次添加 Android 平台sudo ionic cordova platform add android 。

创建构建，安装并检查结果。

我在生产代码中使用了上述配置，结果如下：

Answer 2

当您在 Google 上搜索“Cordova Android 自适应图标”时，这篇 SO 帖子是最热门的。 这里建议的方法，特别是@VicJordan 的回答是一个完整的解决方案。 但是，应该注意的是，Cordova Android 版本 8引入了自己的支持自适应图标的方式，不需要您使用 Android Asset Studio。

这是您需要做的

• 删除 Cordova 应用程序的config.xml文件中的旧样式<icon density="?dpi" src = "path/to/icon/resource"/>语句
• 提供<icon density = "?dpi" background = "path/to/icon/background"/>指令
• 提供一个匹配的<icon density = "?dpi" background="path/to/icon/foreground"/>指令

在哪里? = l|m|h|x|xx|xxx ? = l|m|h|x|xx|xxx

您也可以使用彩色背景而不是图像。 有关所有这些的完整详细信息，请参阅Cordova 8 文档。

Answer 3

您可以试试这个：从 Image Asset 中选择应用程序图标的图像后，将 Shape 的属性（位于 Image Asset 下的 Legacy 选项卡中）从 Square 设置为 None。

Answer 4

<splash platform="android" src="package-assets/splash_320_426.png" density="ldpi" width="320" height="426" orientation="portrait"/>

您可以将 android 更改为 ios，将 src="path" 更改为您想要的任何内容，将密度更改为已知设置之一，设置图像的宽度和高度以及方向。 图标方向无关紧要，但飞溅和其他图像可能不相关。 图标设置如下：

<icon platform="android" src="package-assets/ldpi.png" density="ldpi" width="36" height="36"/>

当然，这在 config.xml 中，您不必将其放在平台部分中，因为您在标签中指定了平台。

Answer 5

使用自适应矢量图标的方法如下。 Asset Studio 将创建 3 个文件（在平台res层次结构中），我们必须将其复制到 Cordova 项目根目录中的文件夹。 让我们以android-res/为例。 我们正在寻找的文件是： ic_launcher.xml 、 ic_launcher_background.xml和ic_launcher_foreground.xml 。

这些资源文件应该添加到config.xml中：

<icon src="icon.png" platform="android" />

<platform name="android">
    <!-- Adaptive icon -->
    <resource-file src="android-res/ic_launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
    <resource-file src="android-res/ic_launcher_background.xml" target="app/src/main/res/values/ic_launcher_background.xml" />
    <resource-file src="android-res/ic_launcher_foreground.xml" target="app/src/main/res/drawable/ic_launcher_foreground.xml" />

    <!-- rest of Android platform stuff ...  -->
</platform>

这种方式假设一个人想要对普通图标和圆形图标使用相同的图标。 请记住，自适应图标不必是圆形的！ 这取决于启动器。 API 26 支持自适应图标，因此我们应该保留 PNG 格式的 default/legacy icon.png 。