[转]轻松学习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)、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文件夹。
这时候再重新运行程序,即可看到启动画面。
用以上的方法,启动画面的显示时长是固定的,很明显不太友好。
未完持续...

以上方法已经可以使用Ionic命令行工具来自动生成了,步骤如下:

1.在项目的根目录下创建resources文件夹。

2.在文件夹中都放入icon.png(应用图标,最小192x192px,不带圆角),splash.png(启动屏幕,最小2208x2208px,中间区域1200x1200px)(可以是png、psd、ai)

3.在cmd中进入项目所在文件夹执行:

[html] view plain copy print?

  1. ionic resources
ionic resources

执行该命令后,会自动在resources文件夹下创建已添加的平台名称的文件夹,如:android,其中会自动将图片进行缩放、裁剪,生成不同分辨率的图片,并在config.xml中添加相应内容。

也可分开执行:

[html] view plain copy print?

  1. ionic resources --icon
  2. ionic resources --splash
ionic resources --icon
ionic resources --splash

注意:执行以上命令时需在线!

时间: 2024-10-25 11:14:34

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

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

npm学习(四)之如何安装全局包、更新全局安装的包、卸载全局安装的包

如何安装全局包 有两种方式用来安装 npm 包:本地安装和全局安装.选用哪种方式来安装,取决于你如何使用这个包. 如果你想将其作为一个命令行工具,那么你应该将其安装到全局.这种安装方式后可以让你在任何目录下使用这个包.比如 grunt 就应该以这种方式安装. 如果您希望依赖于来自您自己模块的包,那么请在本地安装它.例如,如果您正在使用require语句,您将使用这个选项. 将包安装到全局,你应该使用 npm install -g <package> 命令,例如:npm install -g j

SQLite学习手册(命令行工具)

工欲善其事,必先利其器.学好SQLite的命令行工具,对于我们学习SQLite本身而言是非常非常有帮助的.最基本的一条就是,它让我们学习SQLite的过程更加轻松愉快.言归正传吧,在SQLite的官方下载网站,提供了支持多个平台的命令行工具,使用该工具我们可以完成大多数常用的SQLite操作,就像sqlplus之于Oracle.以下列表给出了该工具的内置命令: 命令名 命令说明 .help 列出所有内置命令. .backup DBNAME FILE 备份指定的数据库到指定的文件,缺省为当前连接的

利用ADB和Settings命令行工具轻松的攻击Android手机

从4.2开始,Android提供了一个命令行工具settings.这个工具用于帮助构造SettingProvider的客户端代理,从而可以方便的进行系统设置项的读取和设置. 但是这个工具和adb配合起来,将对Android的安全构成极大的威胁.因为通过adb来执行settings时的时候,uid是shell,而shell拥有非常多的特权. 当然,问题的根源在于adb的shell权限太高,毕竟即使没有settings这个工具(或者说没有/system/framework/settings.jar文

轻松学习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">     

轻松学习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 (一) 搭建开发环境,并创建工程

1.准备工作 下载 Ant(打包使用),Node.js(下载包),HBuilder(IDE,编写代码,真机调试),Android SDK (Android编译) 2.配置环境变量: ANDROID_HOME    D:\Program Files\adt\sdk                              (对应sdk路径) Path            ;D:\Program Files\apache-ant-1.9.4\bin                (对应ant下bi

java学习总结(16.05.08)在windows下使用cmd命令行对java文件进行编译和执行

windows下利用cmd命令行可以调用jdk里的javac.exe和java.exe对java文件进行编译和执行,前提是jdk已成功安装并正确配置相关环境变量(jdk安装与环境变量的配置方法:http://blog.csdn.net/qq_32099621/article/details/51339868) 下面来说一下windows下如何使用cmd命令行来编译执行java文件 首先找到需要编译和执行的java文件 这里我要编译和执行这个java文件 按组合键win+r调出"运行",

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