Cordova

Question

我有一组使用 Android Image Asset Studio 生成的图标。但是，我不知道如何在 Cordova.

中将这些图标设置到我的应用程序

当遵循 documentation regarding icons in 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 中，应用程序的图标是圆形的，它无法在 phone 上正确显示我的应用程序图标。图标缩小到圆圈内，周围有白色背景。

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

Answer 1

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

Answer 2

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

下面是我正在生产的项目的经过测试和工作的解决方案。

将所有生成的图标复制到项目根目录下的 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 平台（取决于您的环境设置），然后添加 Android 平台再次 ionic cordova platform add android 或 sudo ionic cordova platform add android.

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

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

Answer 4

当你 Google 获得 "Cordova Android adaptive icons" 时，这个 SO post 是最热门的。这里建议的方法，特别是@VicJordan 的回答是一个完整的解决方案。但是，需要注意的是，Cordova Android 的 version 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

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

Cordova - Android 上的自适应图标

Cordova - Adaptive icons on Android

icons

android

fill