只是想知道是否有人能够在Cordova for Android Oreo上设置自适应图标?我正在使用android 6.4.0,我的方形图标缩小以适应圆圈。我只是想让它不缩水。我不在乎是否将圆角从圆角上剪下来。
答案 0 :(得分:28)
我按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>
答案 1 :(得分:12)
因此,尽管以上答案帮助我找到了答案,但它们要么过时,要么不完整。因此,为了帮助任何人前进,这是我能想到的所有细节的完整答案。
第1步:创建图标
您将要使用Image Asset Studio(https://developer.android.com/studio/write/image-asset-studio)进行此操作。关于此操作,有很多指南。
第2步:将图标移至您的ionic / cordova项目
将整个res
文件夹复制到您的项目中。以下示例适用于离子v1。
cp -a AndroidStudioProjects/MyApplication4/app/src/main/res MyIonicProject/myapp/resources/android/adaptiveicon
第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">
接下来,您需要调整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>
最后,对于新resources/android/adaptiveicon
文件夹中的每个文件,您都需要添加以下行:
<resource-file src="resources/android/adaptiveicon/<folder>/<file>" target="app/src/main/res/<folder>/<file>" />
确保每个文件都被表示!最后的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>
第4步:安全运行,清洁Android平台
运行以下命令以清理平台。
cd myapp
rm -rf platforms/android
ionic cordova prepare
为了更好地解决此问题,请在ionic中通过Android仿真器启动修复错误:
wget https://raw.githubusercontent.com/gegenokitaro/cordova-android/8d497784ac4a40a9689e616cd486c4ed07d3e063/bin/templates/cordova/lib/emulator.js -O platforms/android/cordova/lib/emulator.js
第5步:构建!
内部版本:
ionic cordova build android
或模拟:
ionic cordova emulate android --consolelogs --serverlogs --target "Android8"
答案 2 :(得分:3)
Cordova Android 8.0.0现在支持此功能。请参见announcement和documentation。
例如,在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>
colors.xml如下所示:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="background">#FFFFFF</color>
</resources>
答案 3 :(得分:2)
据我所知,Cordova尚未设置自适应图标。但是,在运行Cordova构建之后,手动完成很容易。
将AndroidManifest.xml中的android:icon更改为:
<application android:hardwareAccelerated="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:supportsRtl="true">
使用以下命令在res / drawable中创建ic_launcher.xml:
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@drawable/ic_launcher_background"/>
<foreground android:drawable="@drawable/ic_launcher_foreground"/>
</adaptive-icon>
然后在res / drawable中添加两个矢量文件ic_launcher_background.xml和ic_launcher_foreground.xml。可以使用此工具创建这些:http://inloop.github.io/svg2android/
远离你!我希望科尔多瓦很快把它加入到它们的构建中。
答案 4 :(得分:2)
因此,这是Ionic v4和Cordova Android的更新:6.4.0。 train_input_reader: {
tf_record_input_reader {
input_path: r'C:\Users\Tensorflow_model_master\models-master\models-master\research\object_detection\training1\data\train.record'
}
label_map_path: r'C:\Users\Tensorflow_model_master\models-master\models-master\research\object_detection\training1\data\label_map.pbtxt'
}
eval_input_reader: {
tf_record_input_reader {
input_path: r'C:\Users\Tensorflow_model_master\models-master\models-master\research\object_detection\training1\data\test.record'
}
label_map_path: r'C:\Users\Tensorflow_model_master\models-master\models-master\research\object_detection\training1\data\label_map.pbtxt'
shuffle: false
num_readers: 1
}
的答案的显着变化是:
0x6368656174
。app/src/main
文件夹中(我使用png时没有前景)values
清单文件的位置在同一目录edit-config
我奋斗了几天,但这对我有用:
config.xml
file="AndroidManifest.xml"
PHEW
答案 5 :(得分:2)
我可能参加聚会的时间很晚,但是我很难做到这一点,因为(a)使用PhoneGap Build,并且(b)手动执行操作,而不使用Android Studio。因此,对于那些在家中玩耍的人来说,我要做的就是让自适应图标正常工作:
<platform name="android">
中的config.xml
里面,我设置: <resource-file src="www/pwa/android/icon-bg.png" target="app/src/main/res/mipmap/ic_bg.png" />
<resource-file src="www/pwa/android/icon-fg.png" target="app/src/main/res/mipmap/ic_fg.png" />
<resource-file src="www/pwa/ic/mipmap-xxxhdpi/ic_launcher.png" target="app/src/main/res/mipmap/ic_launcher.png" />
<resource-file src="www/pwa/ic/mipmap-xxxhdpi/ic_launcher.png" target="app/src/main/res/mipmap/ic_launcher_round.png" />
<resource-file src="www/pwa/android/ic_launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
<resource-file src="www/pwa/android/ic_launcher_round.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml" />
<!-- Per https://forums.adobe.com/thread/2576077 -->
<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>
ic_launcher.xml
和ic_launcher_round.xml
的XML文件是相同的,我只是在源位置创建了此文件,并通过上面的资源标签将其复制了进来。这是这两个XML文件的内容,分别称为src public/pwa/android/ic_launcher.xml
和ic_launcher_round.xml
:<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@mipmap/ic_bg"/>
<foreground android:drawable="@mipmap/ic_fg"/>
</adaptive-icon>
注意,我针对的是Phonegap版本8.1.1(<preference name="phonegap-version" value="cli-8.1.1" />
)https://forums.adobe.com/thread/2576077上的帖子有助于阐明您必须使用不同的{{1 }}标签上的路径,具体取决于您使用的target
版本。
希望这会有所帮助,如果我错过了任何事情,请向我提问。干杯!
答案 6 :(得分:2)
最近的Android使用自适应图标,该图标具有背景图像和前景图像以及一些xml文件。这是我在离子应用程序中设置自适应图标的步骤:
config.xml
中,我将android-minSdkVersion
设置为版本26。<preference name="android-minSdkVersion" value="26" />
<preference name="android-targetSdkVersion" value="28" />
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" />
接下来,我必须创建Android自适应图标。为此,我使用了Android Studio附带的Image Assets。首先,我从Photoshop中创建了2个背景图像和仅透明图标图像用作png格式的前景。之后,我执行了以下步骤来生成图标:
打开Android Studio并创建一个新项目或打开现有项目。
单击左侧栏中的app-> res。右键单击res-> New-> Image Assets
my-app/resources/android/adaptiveicon/
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" />
就这样。现在,该应用将具有自适应图标。
答案 7 :(得分:0)
Android icon-android-foreground.png 432 * 432像素 72dpi
iOS png不透明 72dpi
Android参考 https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive
const CordovaRes = require('cordova-res');
const iconFolder = {
dev: 'test',
test: 'test',
beta: 'beta',
betaInternal: 'beta',
betaRelease: 'beta',
production: 'production'
}[ENV];
const sourcePath = `resources/_environments/${iconFolder}/`;
const options = {
resourcesDirectory: 'resources',
platforms: {
ios: { icon: { sources: [`${sourcePath}/icon-ios.png`] } },
android: {
'adaptive-icon': {
icon: { sources: [`${sourcePath}/icon-android.png`] },
foreground: { sources: [`${sourcePath}/icon-android-foreground.png`] },
background: {
sources: [{ type: 'color', color: '#b5c429' }]
}
}
}
}
};
CordovaRes(options);
答案 8 :(得分:-4)
您首先需要将Cordova更新到7.0。 Cordova 7.0支持Android Oreo。使用Cordova 7创建应用程序后,您必须使用本机Android代码手动创建自适应图标。这Medium blog将帮助您。创建Adaptive Icons后,您可以将其添加到config.xml
这样的内容 -
<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>