如何在iOS App中添加启动画面

如何在iOS App中添加启动画面,第1张

准备你的启动画面

我们知道iPhone 4/4S支持更高分辨率(也就是所谓的视网膜显示器-Retina Display)。为了同时支持2中分辨率,我们需要准备2个版本的启动画面

320 x 480 (for iPhone 2G / 3G / 3GS)

640 x 960 (for iPhone 4 / 4S)

为了简单一点,我这里演示如何为iPhone App添加启动画面,针对iPad App的 *** 作,请参考Apple的 iOS Human Interface Guideline文档 – 关于启动图像大小和命名规范。

启动图像必须为PNG格式。默认情况下,你可将低分辨率图像文件命名为 Default.png,对高分辨率的图像,用于Retina屏幕的(640*960分辨率)图像文件命名为 Default@2x.png,@2x是iOS中一种标准的分辨率修饰符。所有用于在Retina屏幕显示的图像都应采用 @2x 字符串。

你也可以不是有Default 作为启动图像文件名,使用其他你喜欢的文件名。启动图像文件定义在App的Info.plist文件中。以我们创建的Simple Table应用程序为例,在SimpleTable-Info.plist文件中,添加一个新的属性命名为 – Launch image,并指定你偏爱的文件名(如 MyLaunchImage)。

上述 *** 作指示iOS 使用 MyLaunchImage.png 和 MyLaunchImage@2x.png 文件作为启动画面。

你可以设计你自己的启动画面。基于测试的需要,你可以到这里下载启动画面。

在Xcode中添加你的启动图像

在准备好启动图像之后,回到Xcode,打开你的Xcode项目,我们继续使用Simple Table项目。右击 SimpleTable项目,选择 Add Files to SimpleTable,同时添加 Default.png 和 Default@2x.png 到项目中。

在你完成上述 *** 作之后,你会在项目中看到这两个文件,同时Xcode 自动识别文件作为启动图像。

开始测试!

再次运行App,这次在App运行的时候,你将会看到一个启动画面立即显示。因为在App启动的时候没有太多东西加载,因此启动画面仅显示1秒,并消失。

APP启动页,即LaunchImages,需要五张不同尺寸大小的图,切记一定要选择png格式,否则打包时报错,导致APP适配失败。

五张图的大小即:320×480、640×960、640×1136、750×1334、1242×2208

分别对应的iphone屏幕尺寸:iphone 3GS、iphone4(s)、iphone5(c、s)、iphone6(s)、iphone 6(s) plus

具体步骤:

Step1:

1.点击工程目录中的Images.xcassets,点击左侧边栏的LaunchImages(如果没有,在空白处右击创建一个)

2.然后在xcode最右侧的边栏处选择你的APP是否要对ipad、横竖屏、以及低版本的iOS系统做支持。

启动页图片1.png

step2:

LaunchImages选择框中不同图片的选择

iPhone Portrait iOS 8-Retina HD 5.5 (1242×2208) @3x

iPhone Portrait iOS 8-Retina HD 4.7 (750×1334) @2x

iPhone Portrait iOS 7,8-2x (640×960) @2x

iPhone Portrait iOS 7,8-Retina 4 (640×1136) @2x

iPhone Portrait iOS 5,6-1x (320×480) @1x

iPhone Portrait iOS 5,6-2x (640×960) @2x

iPhone Portrait iOS 5,6-Retina4 (640×1136) @2x

启动页图片2.png

step3:

将填好的图片配置到工程中的启动页选项中

点击项目目录的工程 ->target ->General ->App Icons And Launch Images

将Launch Images Source的选项设置为LaunchImages,切记当APP不是用LaunchScreen.xib来配置启动页时,LaunchScreen File的选择状态一定为空!!!!

启动页图片3.png

step4:

设置完毕


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11630259.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存