Кордова - Адаптивные значки на Android - программирование
Подтвердить что ты не робот

Кордова - Адаптивные значки на 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?

4b9b3361

Ответ 1

Ниже приводится проверенное и рабочее решение для моего проекта, который находится в производстве.

Скопируйте все сгенерированные иконки в 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

Ответ 2

Вы можете попробовать следующее: после выбора изображения для значка приложения из Image Asset, установите свойство Shape (находящееся на вкладке Legacy в разделе "Объект изображения") с Square на None.

Ответ 3

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

Вы можете изменить андроид на ios, изменить src="путь" на все, что хотите, изменить плотность на одну из известных настроек, установить ширину и высоту изображения и ориентацию. Ориентация значков не имеет значения, но всплеск и другие изображения могут отсутствовать. Значки задаются следующим образом:

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

Конечно, это происходит в файле config.xml, и вам не нужно размещать его внутри разделов платформы, так как вы указываете платформу в теге.

Ответ 4

Этот пост является самым популярным, когда вы пользуетесь Google для "адаптивных иконок Cordova для Android". Методы, предложенные здесь, в частности, ответ @VicJordan, являются полным решением. Однако следует отметить, что в 8-й версии Cordova Android появился собственный способ поддержки адаптивных иконок, который не требует использования Android Asset Studio.

Вот что вам нужно сделать

  • Удалите устаревшие инструкции <icon density="?dpi" src= "path/to/icon/resource"/> в файле config.xml для вашего приложения Cordova
  • Укажите директиву <icon density = "?dpi" background = "path/to/icon/background"/>
  • Укажите соответствующую директиву <icon density = "?dpi" background="path/to/icon/foreground"/>

где ? = l|m|h|x|xx|xxx ? = l|m|h|x|xx|xxx

Вы также можете использовать цветные черные фоны, а не изображения. Для получения полной информации обо всем этом обратитесь к документации Cordova 8.