web-dev-qa-db-ja.com

Cordova-Androidのアダプティブアイコン

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で言うと、アプリのアイコンは丸く、その電話ではアプリのアイコンが正しく表示されません。アイコンは円の内側に縮小され、周りに白い背景が表示されます。

enter image description here

質問：Image Asset Studioが生成した丸いアイコンをCordovaプロジェクトに設定するにはどうすればよいですか？

androidcordovaiconsfill
11
EDJ

以下は、本番環境にある私のプロジェクトのテスト済みで動作するソリューションです。

生成されたすべてのアイコンをプロジェクトのルートの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><widget> => <platform => <icon>として持っている場合。

上記の変更をconfig.xmlに追加した後、Androidプラットフォームをionic cordova platform remove AndroidまたはSudo ionic cordova platform remove Android（環境設定に応じて）で削除し、Androidを追加します_ ionic cordova platform add AndroidまたはSudo ionic cordova platform add Androidで再びプラットフォーム。

ビルドを作成し、インストールして、結果を確認します。

私は本番コードで上記の構成を使用し、結果は次のとおりです。

enter image description here

10
Vikasdeep Singh
<splash platform="Android" src="package-assets/splash_320_426.png" density="ldpi" width="320" height="426" orientation="portrait"/>

Android= iosに変更し、src = "path"を任意に変更し、密度を既知の設定の1つに変更し、画像の幅と高さ、および方向を設定できます。アイコンの方向は関係ありませんが、スプラッシュやその他の画像は関係ない場合があります。アイコンは次のように設定されます：

<icon platform="Android" src="package-assets/ldpi.png" density="ldpi" width="36" height="36"/>

もちろん、これはconfig.xmlで行われ、プラットフォームをタグで指定するため、プラットフォームセクション内に配置する必要はありません。

0
ppetree

このSOの投稿は、Googleで「Cordova Androidアダプティブアイコン」を検索したときのトップヒットです。ここで提案されている方法、特に@VicJordanの回答は完全なソリューションです。ただし、Cordova Androidの バージョン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"/>ディレクティブを提供する

ここで、? = l|m|h|x|xx|xxx

画像ではなくカラーの黒地を使用することもできます。このすべての詳細については、 Cordova 8のドキュメント を参照してください。

0
DroidOS

これを試すことができます：画像アセットからアプリアイコンの画像を選択した後、形状（画像アセットの[レガシー]タブにあります）のプロパティを[正方形]から[なし]に設定します。

0
Avilash