Cordova-Android上的自适应图标

时间:2018-08-05 05:04:56

标签: android cordova icons fill

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

enter image description here

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

4 个答案:

答案 0 :(得分:9)

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

将所有生成的图标复制到项目根目录的res/android(与resourcesplatforms文件夹相同的级别)中,并将以下配置添加到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 androidsudo ionic cordova platform remove android删除您的Android平台(取决于您的环境设置),然后使用ionic cordova platform add android重新添加Android平台或sudo ionic cordova platform add android

创建版本,安装并检查结果。

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

enter image description here

答案 1 :(得分:0)

您可以尝试以下操作:从“图像资产”中为应用程序图标选择图像后,将“形状”(在“图像资产”下的“旧版”选项卡中找到)属性设置为“无”。

答案 2 :(得分: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中,因为您在标记中指定了平台,所以不必将其放置在平台部分中。

答案 3 :(得分:0)

当您在Google上搜索“ Cordova Android自适应图标”时,此SO帖子是热门话题。这里建议的方法,尤其是@VicJordan的答案是一个完整的解决方案。但是,应该注意,Cordova Android的version 8引入了自己的支持自适应图标的方式,这些图标不需要您使用Android Asset Studio。

这是您需要做的

  • 为您的Cordova应用删除export default { data: { visible: false, }, components: { selectpersons }, methods: { selectPerson(param1, param2){ this.visible = true }, } 文件中的旧样式<icon density="?dpi" src = "path/to/icon/resource"/>语句
  • 提供config.xml指令
  • 提供匹配的<icon density = "?dpi" background = "path/to/icon/background"/>指令

其中<icon density = "?dpi" background="path/to/icon/foreground"/>

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