前言
iOS 8
之前我们都是通过LaunchImage
来设置启动图,随着苹果设备的更新,尺寸也越来越多,这时候我们需要设置各种设备的启动图,而且每次增加新的尺寸的设备都需要添加相应尺寸的启动图,这个比较麻烦。因此iOS 8
苹果引入了LaunchScreen.storyboard
,支持了AutoLayout
和 SizeClass
,这样能够更加方便的适配各种屏幕。
注意⚠️:苹果提出内容从2020年4月份开始,所有支持iOS 13
的App
必须提供LaunchScreen.storyboard
,否则将无法提交到App Store
进行审核。
因为最近提交App
到App Store
提示2020年4月份必须适配iOS 13
,所以就适配iOS 13的同时,把LaunchScreen.storyboard
也给处理了。
方案
方案1:使用一张通用图片
这种方案没什么难度,主要是在LaunchScreen.storyboard
中添加图片并设置好约束,然后将准备好的图片设置好即可。这种方案在不同设备上可能会出现不同程度的裁剪。
方案2:使用一套图片(主要介绍)
因为公司项目需要,不希望出现裁剪的效果,因此要做成LaunchImage
的效果。
iPhone尺寸如下图:
目前市场上主要尺寸以及对应图片:
- 3.5寸的iPhone4s
(640*960)
- 4.0寸的iPhone5/5s/5c/SE
(640*1136)
- 4.7寸的iPhone6/6s/7/8
(750*1334)
- 5.5寸的iPhone6p/6sp/7p/8p
(1242*2208)
- 5.8寸的iPhoneX/XS/11Pro
(1125*2436)
- 6.1寸的iPhoneXr/11
(828*1792)
- 6.5寸的iPhone XS Max/11 Pro Max
(1242*2688)
步骤
- 在
Xcode
的Assets.xcassets
中创建图片组并且命名Image_qidong
(随意)。
-
右键图片组 -->
Show in Finder
--> 进入修改Contents.json
--> 修改相应图片组信息//修改前 { "images" : [ { "idiom" : "universal", "scale" : "1x" }, { "idiom" : "universal", "scale" : "2x" }, { "idiom" : "universal", "scale" : "3x" } ], "info" : { "version" : 1, "author" : "xcode" } }
//修改后
{
"images" : [
{
"idiom" : "iphone",
"scale" : "1x"
},
{
"idiom" : "iphone",
"scale" : "2x"
},
{
"idiom" : "iphone",
"scale" : "3x"
},
{
"idiom" : "iphone",
"subtype" : "retina4",
"scale" : "1x"
},
{
"idiom" : "iphone",
"subtype" : "retina4",
"scale" : "2x"
},
{
"idiom" : "iphone",
"subtype" : "retina4",
"scale" : "3x"
},
{
"idiom" : "iphone",
"subtype" : "736h",
"scale" : "3x"
},
{
"idiom" : "iphone",
"subtype" : "667h",
"scale" : "2x"
},
{
"idiom" : "iphone",
"subtype" : "2436h",
"scale" : "3x"
},
{
"idiom" : "iphone",
"subtype" : "2688h",
"scale" : "3x"
},
{
"idiom" : "iphone",
"subtype" : "1792h",
"scale" : "2x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
-
将对应图片添加进入图片组中
注意⚠️:不要整体拖进去,不会自动识别,逐一添加。
- 设置
LaunchScreen.storyboard
,并将图片设置成刚刚的image_qidong
- 设置用
LaunchScreen.storyboard
作为启动图。
注意⚠️:
-
LaunchScreen.storyboard
布局的时候,上下需要选择边界view
,默认是SafeArea
。 - 需要将
LaunchImage
的设置去掉,否则会报错。 -
设置完成后重启下
Xcode
,否则设置没有效果,感觉是Xcode
的一个Bug
。
效果
下面展示不同机型的启动效果:
方案3:将素材进行分割加载,当成普通的storyboard
文件进行相关处理。
这里就是将需要的启动图中的元素,包括logo
,文字
,图片
等单独切出来,然后跟普通页面那样加载UI
控件等。这就可以解决了不同尺寸屏幕的适配问题以及包资源体积增大的问题。好处就是包体积小了适配各种机型更灵活(但是背景图还是不可避免的要失去部分显示效果),不好的地方就是以后要是换开屏图,那么就要开发者有一定的工作量进行处理。