首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Cordova - Android上的自适应图标

Cordova - Android上的自适应图标
EN

Stack Overflow用户
提问于 2018-08-05 13:04:56
回答 4查看 5.9K关注 0票数 12

我使用Android Image Asset Studio生成了一组图标。然而,我不知道如何在Cordova中为我的应用程序设置这些图标。

在使用documentation regarding icons in Cordova时,我只使用以下代码为我的项目设置了方形图标:

代码语言:javascript
运行
复制
<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中,应用程序的图标是圆形的,它不能在手机上正确显示我的应用程序的图标。图标在圆圈内缩小,周围有白色背景。

Studio :如何将Image Asset Studio生成的圆角图标设置到我的Cordova项目中?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-08-08 09:13:51

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

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

代码语言:javascript
运行
复制
<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的安卓平台(取决于您的环境设置),然后再次添加带有ionic cordova platform add androidsudo ionic cordova platform add android的安卓平台。

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

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

票数 17
EN

Stack Overflow用户

发布于 2019-07-07 13:45:41

当你在谷歌上搜索"Cordova Android自适应图标“时,这篇文章是最热门的。这里建议的方法,特别是@VicJordan的答案是一个完整的解决方案。然而,应该注意的是,Cordova Android的version 8引入了自己的方式来支持不需要使用Android Asset Studio的自适应图标。

下面是你需要做的

  • 移除Cordova应用程序的<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"/>指令

where ? = l|m|h|x|xx|xxx

您也可以使用彩色blackgrounds而不是图像。有关所有这一切的完整详细信息,请参阅Cordova 8 documentation

票数 3
EN

Stack Overflow用户

发布于 2018-08-05 15:09:42

您可以尝试这样做:从image Asset中选择应用程序图标的图像后,将Shape (在Image Asset下的Legacy选项卡中找到)的属性从Square设置为None。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51691533

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档