LaunchScreen.storyboard启动图适配

前言

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(随意)。

创建图片组g

右键图片组 --> 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作为启动图。

设置LaunchScreen.storyboard作为启动图

注意⚠️：

LaunchScreen.storyboard布局的时候，上下需要选择边界view，默认是SafeArea。
需要将LaunchImage的设置去掉，否则会报错。
设置完成后重启下Xcode，否则设置没有效果，感觉是Xcode的一个Bug。

效果

下面展示不同机型的启动效果：

iPhone 6sp

iPhone 8

iPhone 8p

iPhone Xʀ

iPhone Xs Max

iPhone 11 Pro Max

方案3：将素材进行分割加载，当成普通的`storyboard`文件进行相关处理。

这里就是将需要的启动图中的元素，包括logo，文字，图片等单独切出来，然后跟普通页面那样加载UI控件等。这就可以解决了不同尺寸屏幕的适配问题以及包资源体积增大的问题。好处就是包体积小了适配各种机型更灵活（但是背景图还是不可避免的要失去部分显示效果），不好的地方就是以后要是换开屏图，那么就要开发者有一定的工作量进行处理。

LaunchScreen.storyboard启动图适配