如何在使用Ionic\Cordova开发Android应用中设置应用图标和启动画面

16

我有一个使用Cordova的Android平台Ionic项目。我想在项目中设置一个图标和启动画面。对于图标,我已经创建了一个目录并添加了一个logo来显示。

res\android\pkLogo.png

我还在我的config.xml文件中添加了这一行。

 <icon src="res/android/pkLogo.png" platform="android" width="57" height="57" density="mdpi" />

但问题是Apache默认图标正在显示。我做错了什么,我从这里的cordova寻求帮助。

我想显示启动画面,有什么方法吗?我搜索了很多,找到了一些链接,但是我无法解决它。

如何使用ionic\cordova在Android中设置图标和启动画面

10个回答

62

在CLI中运行ionic cordova resources

之后会创建以下文件夹:

resources > android

resources > ios

icon.pngsplash.png文件添加到资源文件夹中,然后再次运行ionic cordova resources命令。或者您可以直接运行ionic cordova run <platform>,它将为该平台(ios、android等)生成资源文件。

它将自动创建图标和启动画面,并在config.xml文件中添加。无需手动操作,Ionic会为您自动完成一切。


在资源文件夹中意味着与android文件夹一起的资源文件夹。我把它放在android文件夹里,但Ionic找不到图标/启动画面。 - garg10may
你需要将其放入资源文件夹中,图标将在资源> Android文件夹中生成。 - Kamal Kumar

4

请进入项目目录 - /resources/android/icon/ ,按照下面所需的大小和名称添加你的图标。

drawable-hdpi-icon.png - 72*72

drawable-ldpi-icon.png - 36*36

drawable-mdpi-icon.png - 48*48

drawable-xhdpi-icon.png - 96*96

drawable-xxhdpi-icon.png - 144*144

drawable-xxxhdpi-icon.png - 192*192

如果需要,请将图标添加到以下目录中 - 项目目录-/platforms/android/res/ ,根据特定的文件夹将上述图标放置。

然后运行以下终端命令,它将更新你的图标,同样地,你也可以管理启动画面。

$ionic build android

$ionic run android


对我来说,文件夹名称类似于mipmap-hdpi,我替换了这些文件夹中的图标和ic-launcher。可能是由于Ionic版本的原因。无论如何,感谢你的方法起作用了,兄弟。 - Arjun Ajith

3

希望您一切都好。由于您询问更改闪屏和启动器图标,我也尝试着去做同样的事情。后来我从Ionic CLI找到了一种文档化的方法,这对我很有帮助,也节省了我的时间。

我们只需要三个简单的步骤:

1>创建一个大小为192x192像素的图标图像,并将其保存在项目根目录的资源目录中,文件名为icon.pngicon.psdicon.ai

2>创建一个大小为2208x2208像素的闪屏图像,并将其保存在项目根目录的资源目录中,文件名为splash.pngsplash.psdsplash.ai

3>这是主要的步骤,只需从终端运行以下命令:

ionic resources

然后您将在/demoApp/resources/android/icon/demoApp/resources/android/splash存储库中看到一些图像。

如果您只想更改闪屏屏幕,则必须按照步骤2以及命令ionic resources --splash来操作,然后您就可以看到您的闪屏屏幕。

或者只更改图标,则必须按照步骤1以及ionic resources --icon进行操作。

注意:如果您想单独创建闪屏和图标,请不要遵循步骤3,因为步骤3用于生成两者。


你好,我按照你的步骤上传了位于 /resources 文件夹中的 .ai 文件,但没有填充图标和启动画面目录。我已经从 IOS 和 Android 文件夹中删除了图标和启动画面目录的内容以生成新的目录,但是没有成功。 - domoindal

1

图标源图像 将icon.png、icon.psd或icon.ai文件保存在Cordova项目根目录的资源目录中。图标图像的最小尺寸应为192x192像素,并且不应有圆角。 然后在终端中运行此命令(cd到您当前的目录)

$ ionic resources --icon

启动画面源图像 在Cordova项目的根目录下的资源目录中有一个splash.png、splash.psd或splash.ai文件。每个平台、设备和方向的启动画面尺寸都不同,因此需要一个正方形的源图像来生成各种大小。源图像的最小尺寸应为2208x2208像素,其艺术作品应居中于正方形内。然后在终端中运行以下命令(cd到当前目录)

$ ionic resources --splash

我已完成。

请参考此链接 Ionic启动画面和图标生成器


1
从CLI运行ionic资源
之后将创建以下文件夹
resources> android
resources> ios
在资源文件夹中添加icon.png和splash.png文件,然后再次运行ionic资源命令。
它将自动创建图标和启动画面,并将其添加到config.xml文件中。无需手动操作。Ionic会为您自动完成所有操作。
它对我有用,只有一件事
在构建Android应用程序之前,请转到编辑platforms / android / AndroidManifest.xml
并转到 并添加下一个 问候!

0

您可以使用ionic cordova resources为您的Android应用程序生成启动画面和图标。此命令将在android文件夹下创建iconssplash屏幕。

icons文件夹包含:

drawable-hdpi-icon.png - 72*72

drawable-ldpi-icon.png - 36*36

drawable-mdpi-icon.png - 48*48

drawable-xhdpi-icon.png - 96*96

drawable-xxhdpi-icon.png - 144*144

drawable-xxxhdpi-icon.png - 192*192

如果你想创建仅限于 图标,那么可以使用

ionic cordova resources --icon

如果您想创建仅 splash 屏幕,则可以使用
ionic cordova resources --splash

0

编辑图片 如果运行此命令无法正常工作(也适用于iOS):

ionic cordova resources android --splash --force

然后再次运行命令 :)

这将解决这个"错误":

[OK] No need to regenerate images--source files unchanged.

提示:针对每个平台编辑图像(甚至可以将大小调整1px),否则Ionic不会检测到每个新命令中源文件的更改。

0

对于 Android,请查看 /platform/android/res 对于 iOS,请查看 /platform/ios/yourapp/Resources

希望能帮到你


启动画面也在那里,例如,在drawable-land-hdpi文件夹中查看,您会看到一个screen.png。希望这有所帮助。 - lukabers
我的标志正在显示为闪屏,我想要显示不同的图像作为闪屏。 - Muhammad Faizan Khan
好的,我会再试着回答一下。在 /platform/android/res/ 目录下,你会看到很多文件夹,只需进入每个文件夹并将 icon.png 替换为你的应用图标(不要更改名称),将 screen.png 替换为你的启动画面(也不要更改名称)。完成了。 - lukabers
非常抱歉,标志正在显示为闪屏:( - Muhammad Faizan Khan
让我们在聊天中继续这个讨论 - lukabers
显示剩余6条评论

0
创建您自定义的 icon.png 1024 *1024 像素和 splash.png 2732 *2732 像素,然后替换资源目录中的文件,接着运行 ionic cordova resources 命令。这样就会自动生成 iOS 和 Android 的启动画面和图标,并且配置文件也会被更改。
对于启动画面模板: https://code.ionicframework.com/resources/splash.psd(参考)

-1

当一个应用程序首次创建时,资源文件夹中有两个文件:icon.png和splash.png。

将这两个文件替换为您想要的图标和启动画面文件。

文件名必须相同 icon.png的大小必须至少为1024×1024,splash.png的大小必须至少为2732×2732 一旦替换了icon.png和splash.png文件,请按照以下步骤操作:

1)您必须拥有免费的Ionic帐户。这是因为图标和启动画面的生成/转换使用Ionic服务器。

2)在您的项目文件夹中,运行以下命令:

> ionic login

然后输入您的电子邮件和密码。

3)在项目文件夹中运行(如果您正在构建iOS或Android应用程序,则选择ios或android):

> ionic cordova resources ios

> ionic cordova resources android

Ionic将把您的图标和启动画面文件转换为目标平台所需的不同版本。 在此过程中,config.xml也将被更新。


1
所有内容都被删除了吗? - zardilior
这是一个stackoverflow的语法错误。 我编辑了我的评论,现在没问题了。 - SANA Abdoul Aziz

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接