Cordova - Android 上的自适应图标

Question

Cordova - Android 上的自适应图标

13

我使用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项目中?

- EDJ

我上次没有使用Cordova，但是你试过这个吗？

- Gordio

@Gordio，是的。我正在使用Cordova应用程序图标文档中的确切代码。但是，我无法弄清楚如何使用从Android Image Asset Studio生成的圆形和其他形状的图标。 - EDJ

5个回答

3

当你在谷歌上搜索“Cordova Android自适应图标”时，这篇文章是排名第一的。这里提供的方法，特别是@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 您还可以使用颜色背景而不是图像。有关所有详细信息，请参阅Cordova 8文档。

- DroidOS

0

<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文件中，而不必把它放在平台部分内，因为你可以在标签中指定平台。

- ppetree

我已经完成了这个任务，并且在两个平台上都使图标正常工作。因此，由于我使用上述代码设置的所有图标都是方形图像，因此Android Oreo上的图标将显示为一个圆圈内的正方形，并带有白色背景 - 就像我在上面的图片中展示的那样。这就是我想要避免的。然而，我不知道如何将我使用Android Image Asset Studio生成的圆形图标设置到Cordova的config.xml中。 - EDJ

https://dev59.com/pVYN5IYBdhLWcg3wXnT7 - ppetree

是的，这就是VicJordan上面提供的代码。然而，当我尝试将其添加到我的项目中时，出现了问题。它说缺少以下内容：

C:\Users\Zi\Desktop\New folder\MyApp\platforms\android\app\src\main\res\mipmap-anydpi-v26\ic_launcher.xml:3: AAPT: error: resource mipmap/ic_launcher_background (aka com.MyApp:mipmap/ic_launcher_background) not found.

- EDJ

0

使用自适应矢量图标adaptive的方法如下。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开始受支持，因此我们应该在那里保留我们的默认/遗留icon.png格式为PNG。

- Velda

0

你可以尝试这样做：在从图像资源中选择应用程序图标的后，将形状属性（在图像资源下的Legacy选项卡中找到）从正方形更改为无。

- Avilash

我已经在Android Studio中从Image Asset生成了所有图标。然而，我不知道如何在Cordova的config.xml中正确设置它们。我没有使用Android Studio来设计我的应用程序。 - EDJ

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vikasdeep Singh · Accepted Answer

以下是我应用于生产项目并经过测试的解决方案。

将所有生成的图标复制到项目根目录下的 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>，并将其移到<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平台。

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

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