轻松学习Ionic (四) 修改应用图标及启动画面

应用图标:

1.在整个项目所在文件夹下创建res文件夹,里边再分别创建两个文件夹android和ios。

2.针对Android平台:将我们的要替换的启动图标放如android文件夹下。可以分别起名为:mdpi.png(48*48),hdpi(72*72)、xhdpi(96*96)、xxhdpi(144*144)
和 xxxhdpiI(192*192)。

针对ios的,待补充。

3.在config.xml中添加

 <platform name="android">              <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" /> </platform>

其中src中的图片路径就为整个项目的相对路径。
我这里偷了个懒,只搞了一个最高像素密度的应用图标(192px*192px)进去,安卓会自动进行压缩。 
这里顺便说一下如果要修改应用的名称,只要修改name标签里的内容即可。
这样在命令行中重新运行ionic run android,就能看到应用图标和名字已经被替换了。

启动画面:
    将启动画面的图片拷贝到之前的android文件夹下,splash-land-hdpi.png(640*480)splash-land-ldpi.png(426 × 320)splash-land-mdpi.png(470 × 320)splash-land-xhdpi.png(960 × 720)splash-port-hdpi.png(480*640)splash-port-ldpi.png(320*426)splash-port-mdpi.png(320*470)splash-port-xhdpi.png(720*960)
(名称可随意,只要和config.xml对应上即可)。
    在config.xml中添加
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
    <preference name="SplashScreen" value="screen"/>
    <preference name="SplashScreenDelay" value="10000" />

其中10000单位为毫秒,即10秒后隐藏启动画面。如果不写第三句,默认3秒隐藏。

   如下图所示:

我这里没有那么多分辨率下的图片,就随便找了一个稍大分辨率的,density也没写。它会自动将该图片拷贝到drawable文件夹。
这时候再重新运行程序,即可看到启动画面。
用以上的方法,启动画面的显示时长是固定的,很明显不太友好。
未完持续...
时间: 2024-10-15 05:41:49

轻松学习Ionic (四) 修改应用图标及启动画面的相关文章

Ionic系列——修改应用图标和启动页

1.在项目的根目录下创建resources文件夹. 2.在文件夹中都放入icon.png(应用图标,最小192x192px,不带圆角),splash.png(启动屏幕,最小2208x2208px,中间区域1200x1200px)(可以是png.psd.ai) 3.在cmd中进入项目所在文件夹执行: ionic resources --icon        ionic resources --splash 4.项目中的config文件中是这样 <platform name="android

30天轻松学习javaweb_Eclipse在修改了web.xml后将自动更新到tomcat服务器中

context.xml中增加<WatchedResource>WEB-INF/web.xml</WatchedResource>,Eclipse在修改了web.xml后将自动更新到tomcat服务器中. <?xml version='1.0' encoding='utf-8'?> <Context> <!-- Default set of monitored resources --> <WatchedResource>WEB-INF

[Phonegap+Sencha Touch] 移动开发36 Phonegap/Cordova项目的图标和启动画面(splashscreen)配置

Phonegap/Cordova项目中的config.xml文件,里面配置了下面的内容: <icon gap:platform="android" gap:qualifier="ldpi" src="res/icon/android/icon-36-ldpi.png" /> <icon gap:platform="android" gap:qualifier="mdpi" src=&quo

[转]轻松学习Ionic (四) 修改应用图标及添加启动画面(更新官方命令行工具自动生成)

本文转自:http://blog.csdn.net/zapzqc/article/details/42237935 由于Ionic更新了命令行工具,以后修改应用图标和添加启动画面就简单了,最新方法见最下方: 应用图标: 1.在整个项目所在文件夹下创建res文件夹,里边再分别创建两个文件夹android和ios. 2.针对Android平台:将我们的要替换的启动图标放如android文件夹下.可以分别起名为:mdpi.png(48*48),hdpi(72*72).xhdpi(96*96).xxhd

XE7 - 程序图标及启动画面图片的注意事项

还是继续昨晚写的,年前已经解决了这个问题,现在补记下.启动画面失真是本篇笔记的重点.搜索了很多文章,基本上大同小异,几乎都没怎么提及启动画面失真的问题.不知道是不是我的操作不对头,. Project - Options - Application: 从下截图中可以清楚的看到程序图标需要5种尺寸,启动画面需要4种尺寸.是否使用启动画面通过勾选Include Splash Image选项.启动画面所用的各尺寸的图片不是简单的png格式图片,而是要经过特殊处理的.9.png格式.至于.9.png格式,

[Xcode使用 2] 设置APP图标和启动画面

1.App Icon 把所有图标文件拖放到 "Images.xcassets" 的"AppIcon" 里面 应对非视网膜和视网膜屏,APP有时会提供两套不同大小的图片,1倍图和2倍图,它们的像素相差一倍. 命名规则:2倍图在1倍图的名字后加 @2x 普通:sample.png 2倍:[email protected] 系统用"sample"寻找图片的时候,会自动根据设备屏幕取对应的图片 2.修改启动画面 一个app在启动过程中会全屏显示叫做Def

ios 应用程序图标、启动画面、itune图标设置

http://blog.sina.com.cn/s/blog_4cd8dd1301014hfz.html 先说说应用程序图标,一般有下面几种: Icon.png(57x57) - Homescreen icon on iPhone/iPod touch [email protected](114x114) - Homescreen icon on iPhone 4 Icon-72(72x72) - Homescreen icon on iPad Icon-Small.png(29x29) - I

轻松学习Ionic (三) 安装sass并在webstorm中为scss添加watcher

1. 安装Ruby 最新为 2.1.5版本,不放心的话安装 Ruby 1.9.3-p551 安装过程中注意勾选上第二项!即将Ruby加入到可执行的环境变量中去. 安装结束后在命令行中运行 ruby -v 能看到对应的版本则说明安装正确. 2.通过Ruby安装Sass 启动Ruby中的"Start Command Prompt with Ruby" 在命令行中输入: gem sources --remove https://rubygems.org/ gem source -a http

轻松学习Ionic (二) 为Android项目集成Crosswalk

1.进入Crosswalk下载页面,下载其中的Cordova Android(x86)及Cordova Android(ARM),并将他们进行解压.目前稳定版版本号为:9.38.208.10 2.在命令提示符中先进入到项目所在文件夹下: a.移除项目中CordovaLib文件夹中的所有文件 rm -rf platforms/android/CordovaLib/* b.拷贝Crosswalk x86架构下的文件到CordovaLib文件夹中 cp -a E:\Study\CrossPlatfor