Cordova-Android上的自适应图标 [英] Cordova - Adaptive icons on Android

问题描述

我使用 Android图片资产生成了一组图标工作室. 但是，我不知道如何在Cordova中将这些图标设置为我的应用程序.

I have a generated set of icons using Android Image Asset Studio. However, I do not know how I can set those icons to my app in Cordova.

遵循关于Cordova中图标的文档时，我只能使用以下代码为我的项目设置方形图标:

When following the documentation regarding icons in Cordova, I only managed to set the square icons to my project using the following code:

<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中说应用程序的图标是圆形的，并且不能在该手机上正确显示我的应用程序的图标.图标在圆圈内缩小，周围带有白色背景.

However, say in Android Oreo the icons of apps are round and it does not display my app's icon properly on that phone. The icon is shrank inside the circle and has white background around it.

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

Question: How can I set the rounded icons that Image Asset Studio generated to my Cordova project?

推荐答案

以下是针对我的正在生产中的项目的经过测试且可以正常工作的解决方案.

Below is a tested and working solution for my project that is in production.

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

Copy all the generated icons to res/android at the root of your project (Same level as resources or platforms folders) and add the below configuration to config.xml file:

<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>).

Remove <icon> if you have one as <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平台.

After adding above changes to your config.xml, remove your Android platform with ionic cordova platform remove android or sudo ionic cordova platform remove android (depending upon your environment settings) and then add Android platform again with ionic cordova platform add android or sudo ionic cordova platform add android.

创建版本，安装并检查结果.

Create build, install and check the results.

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

I used above configurations in my production code and here are the results:

这篇关于Cordova-Android上的自适应图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！