Android Oreo - 如何在Cordova中设置自适应图标？

Question

Android Oreo - 如何在Cordova中设置自适应图标？

只是想知道是否有人能够在Cordova for Android Oreo上设置自适应图标？我正在使用android 6.4.0,我的方形图标缩小以适应圆圈.我只是想让它不缩水.我不在乎是否将圆角从圆角上剪下来.

Answer 1

我按照https://developer.android.com/studio/write/image-asset-studio.html#create-adaptive中所述创建了图标,将它们复制到res/android并使用以下配置:

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/drawable/ic_launcher_foreground.xml" target="app/src/main/res/drawable/ic_launcher_foreground.xml" />
        <resource-file src="res/android/mipmap-anydpi-v26/ic_launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
        <resource-file src="res/android/mipmap-anydpi-v26/ic_launcher_round.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.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>

Run Code Online (Sandbox Code Playgroud)

我不得不将`xmlns:android ="http://schemas.android.com/apk/res/android"添加到config.xml的widget标签中以使其工作. (5认同)
如果选择背景颜色而不是图像,则第一个资源文件将是`<resource-file src ="res/android/values/ic_launcher_background.xml"target ="app/src/main/res/values/ic_launcher_background.xml "/>`(值而不是drawable).感谢您发布此解决方案,真的帮助了我! (4认同)
我不得不从`target`中删除`app/src/main`以使其正常工作. (3认同)

Answer 2

Fms*_*rat 18

因此,虽然上述答案帮助我得到了答案,但它们要么过时,要么不完整.所以,为了帮助任何前进的人,这是我能想到的所有细节的完整答案.

第1步:创建图标

您需要使用Image Asset Studio(https://developer.android.com/studio/write/image-asset-studio)执行此操作.这方面有很多指南.

第2步:将图标移动到离子/ cordova项目

将整个res文件夹复制到项目中.以下示例适用于离子v1.

cp -a AndroidStudioProjects/MyApplication4/app/src/main/res MyIonicProject/myapp/resources/android/adaptiveicon

Run Code Online (Sandbox Code Playgroud)

第3步:编辑config.xml

首先,要使用图标(其他答案中缺少这些图标),您需要更改顶widget行.你想要添加xmlns:android="schemas.android.com/apk/res/android"它,所以看起来如下所示.这允许系统更改AndroidMenifest.xml文件.

<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:android="schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Run Code Online (Sandbox Code Playgroud)

接下来,您需要调整您的平台部分config.xml.

首先删除<icon density= ... />该<platform name="android">部分的任何实例.

然后,添加对Android Manifest文件的更改:

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

Run Code Online (Sandbox Code Playgroud)

最后,对于新resources/android/adaptiveicon文件夹中的每个文件,您需要添加如下所示的行:

<resource-file src="resources/android/adaptiveicon/<folder>/<file>" target="app/src/main/res/<folder>/<file>" />

Run Code Online (Sandbox Code Playgroud)

确保每个文件都有代表!你的最后platform一部分可能看起来像这样(这个例子适用于PNG用于前景和背景的情况):

<platform name="android">
    <allow-intent href="market:*" />
    <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
    <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
    <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
    <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
    <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
    <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
    <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
    <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
    <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
    <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
    <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
    <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    <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="resources/android/adaptiveicon/drawable/ic_launcher_background.xml" target="app/src/main/res/drawable/ic_launcher_background.xml" />
    <resource-file src="resources/android/adaptiveicon/drawable-v24/ic_launcher_foreground.xml" target="app/src/main/res/drawable-v24/ic_launcher_foreground.xml" />
    <resource-file src="resources/android/adaptiveicon/mipmap-anydpi-v26/ic_launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
    <resource-file src="resources/android/adaptiveicon/mipmap-anydpi-v26/ic_launcher_round.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml" />
    <resource-file src="resources/android/adaptiveicon/mipmap-hdpi/ic_launcher.png" target="app/src/main/res/mipmap-hdpi/ic_launcher.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-hdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-hdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_background.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-hdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_round.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-mdpi/ic_launcher.png" target="app/src/main/res/mipmap-mdpi/ic_launcher.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-mdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-mdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_background.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-mdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_round.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xhdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_background.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_round.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xxhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xxhdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xxxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xxxhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xxxhdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.png" />
    <resource-file src="resources/android/adaptiveicon/mipmap-xxxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png" />
</platform>

Run Code Online (Sandbox Code Playgroud)

第4步:安全播放,清理Android平台

运行以下命令清理平台.

cd myapp
rm -rf platforms/android
ionic cordova prepare

Run Code Online (Sandbox Code Playgroud)

为了更好的衡量,使用离子的Android模拟器启动修复错误:

wget https://raw.githubusercontent.com/gegenokitaro/cordova-android/8d497784ac4a40a9689e616cd486c4ed07d3e063/bin/templates/cordova/lib/emulator.js -O platforms/android/cordova/lib/emulator.js

Run Code Online (Sandbox Code Playgroud)

第5步:构建!

建立:

ionic cordova build android

Run Code Online (Sandbox Code Playgroud)

或模仿:

ionic cordova emulate android --consolelogs --serverlogs --target "Android8"

Run Code Online (Sandbox Code Playgroud)

Answer 3

Nee*_*eel 13

警告：不要使用这个答案。从 Cordova 9 开始，现在支持开箱即用。请参阅/sf/answers/3861851521/

最近的 Android 使用具有背景和前景图像以及一些 xml 文件的自适应图标。这就是我在 ionic 应用程序中设置自适应图标时所做的：

在中config.xml，我设置android-minSdkVersion为版本 26。

<preference name="android-minSdkVersion" value="26" />
<preference name="android-targetSdkVersion" value="28" />

Run Code Online (Sandbox Code Playgroud)

在中config.xml，删除icon density标签并删除这些行：

        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />

Run Code Online (Sandbox Code Playgroud)

接下来，我必须创建 Android 自适应图标。为此，我使用了作为 Android Studio 一部分的图像资源。首先，我创建了 2 个背景图像和仅透明图标的图像，以用作 photoshop png 格式的前景。之后，我执行了以下步骤来生成图标：

打开 Android Studio 并创建一个新项目或打开现有项目。
单击左侧栏中的应用程序-> res。右键单击 res -> New -> Image Assets

选定的前景层 -> 资产类型“图像”和选定的路径，仅带有图标徽标图像和透明背景。然后选择修剪为是并根据需要调整大小。

选定的背景层 -> 资产类型“图像”和选定的路径。（或者，您甚至可以设置“颜色”）

单击下一步，然后单击“完成”。

现在，我右键单击 res 文件夹并选择“在 Finder 中显示”。

我复制了 res 文件夹中的所有文件夹并将其放入： my-app/resources/android/adaptiveicon/

接下来，我只需要将以下代码添加到 config.xml 中。确保文件adaptiveicon夹中的每个文件都正确链接到此处，否则它会在构建过程中抛出“未找到”错误。

        <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="resources/android/adaptiveicon/mipmap-anydpi-v26/ic_launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
        <resource-file src="resources/android/adaptiveicon/mipmap-anydpi-v26/ic_launcher_round.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml" />
        <resource-file src="resources/android/adaptiveicon/mipmap-hdpi/ic_launcher.png" target="app/src/main/res/mipmap-hdpi/ic_launcher.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-hdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-hdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_background.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-hdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-mdpi/ic_launcher.png" target="app/src/main/res/mipmap-mdpi/ic_launcher.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-mdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-mdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_background.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-mdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xhdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_background.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xxhdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xxhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xxxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xxxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xxxhdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.png" />
        <resource-file src="resources/android/adaptiveicon/mipmap-xxxhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png" />

Run Code Online (Sandbox Code Playgroud)

就是这样。现在该应用程序将具有自适应图标。

非常感谢您的详细解释。信息：如果您选择仅背景颜色方式，请从 config.xml 中删除“ic_launcher_background_png”条目。此外，您还需要添加以下行以使构建正常工作 `<resource-file src="resources/android/adaptiveicon/values/ic_launcher_background.xml" target="app/src/main/res/values/ic_launcher_background.xml ” />` (4认同)
我很感激@StefanRein 如果我的回答有帮助，我很高兴。 (3认同)
只需删除这里的 Source/platforms/android/app/src/main/res 以下目录： `mipmap-ldpi`, `mipmap-ldpi-v26`, `mipmap-mdpi-v26`, `mipmap-hdpi-v26`, ` mipmap-xhdpi-v26`、`mipmap-xxhdpi-v26`、`mipmap-xxxhdpi-v26` (2认同)

Answer 4

Dom*_*nic 11

Cordova Android 8.0.0 现在支持此功能。请参阅公告和文档。

例如，在 config.xml 中定义如下图标：

<platform name="android">
        <resource-file src="res/icons/android/colors.xml" target="/app/src/main/res/values/colors.xml" />
        <icon density="ldpi" background="@color/background" foreground="res/icons/android/ldpi-foreground.png" />
        <icon density="mdpi" background="@color/background" foreground="res/icons/android/mdpi-foreground.png" />
        <icon density="hdpi" background="@color/background" foreground="res/icons/android/hdpi-foreground.png" />
        <icon density="xhdpi" background="@color/background" foreground="res/icons/android/xhdpi-foreground.png" />
        <icon density="xxhdpi" background="@color/background" foreground="res/icons/android/xxhdpi-foreground.png" />
        <icon density="xxxhdpi" background="@color/background" foreground="res/icons/android/xxxhdpi-foreground.png" />
    </platform>

Run Code Online (Sandbox Code Playgroud)

color.xml 看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="background">#FFFFFF</color>
</resources>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，6 月前
查看次数：	12807 次
最近记录：	6 年，10 月前