Xcode设置启动图-LaunchScreen.storyboard 替代LaunchImage启动图适配

前言

苹果提出从2020年4月份开始,所有支持iOS 13App必须提供LaunchScreen.storyboard,否则将无法提交到App Store进行审核。

因为最近提交AppApp Store,需要处理启动图,在这里总结记录一下。

方案

方案1:使用一张通用图片

这种方案没什么难度,主要是在LaunchScreen.storyboard中添加图片并设置好约束(和平常添加图片一样),然后将准备好的图片设置好即可。这种方案在不同设备上可能会出现不同程度的裁剪。简单粗暴处理。在Content Mode—>选择Scale To Fill或者Aspect Fill,让图片自己压缩。Scale To Fill会改变图片宽高比,Aspect Fill会造成图片显示不全。

方案2:将素材进行分割加载,当成普通的storyboard文件进行相关处理。

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

方案3:使用一套图片(实现LaunchnImage效果,适配不同屏幕)

目前市场上主要尺寸以及对应图片:

3.5寸的iPhone4s(640960)
4.0寸的iPhone5/5s/5c/SE(640
1136)
4.7寸的iPhone6/6s/7/8(7501334)
5.5寸的iPhone6p/6sp/7p/8p(1242
2208)
5.8寸的iPhoneX/XS/11Pro(11252436)
6.1寸的iPhoneXr/11(828
1792)
6.5寸的iPhone XS Max/11 Pro Max(1242*2688)

步骤:
一、设置图片资源
  1. 在Xcode的Assets.xcassets中创建图片组并且命名NewLaunchImage (随意)。
  2. 右键图片组 --> 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"
      }
    }

修改前效果:


修改后效果:


  1. 将对应图片添加进入图片组中(我这里美工少给了两张,大家按照尺寸放就可以了)
    注意⚠️:不要整体拖进去,不会自动识别,逐一添加。


二、设置Xcode
  1. 设置Launch Screen File 文件名称

2.将之前LaunchImage的设置去掉,否则会报错。(如果以前没用assert方式设置启动图,默认为空)


将上图位置清空

三、在LaunchScreen.storyboard上设置图片
  1. 选中LaunchScreen.storyboard,勾选Use as Launch Screen的选项,注意此时不要取消Use Safe Area Layout Guides选项。(尽管你的项目适配iOS9.0以下会报错,先不要管,如果取消了在后面布局设置中左右会有20像素的留白)

  2. 添加imageView控件


3.添加约束:设置图片约束,上下左右都为0
注意⚠️:上下要设置边界为View,否则会有白边


  1. 此时选中带刘海屏的手机模型,你会发现上下还是有留白


  2. 解决留白问题,在左窗口选中底部约束—>点击右侧的First item—>选择Superview—>将Constant设置为0,如下图所示:



    同样的方式,修改顶部约束:注意此时需要将 Second item—>选择Superview



    修改完的效果如下:
  3. 此时将1中提到的Use Safe Area Layout Guides选项取消勾选,然后再将自己的启动图名称添加上就可以了


  4. 将自己的启动图名称添加上,(在第一步中的1步骤取的名字)


四、重启Xcode,删除手机上原来的工程。重新编译安装就可以了

注意⚠️:如过没有重启Xcode,可能会没有效果。。

五:修改启动图

在原来的文件下面替换图片,不管沙盒删启动图缓存、删除app重装、清理Xcode、重启Xcode、重启电脑都没用,只有一个办法,重启手机。所以我更换启动图就是换一个图片名称,在Assets.xcassets里面重新建一个图片文件夹,重新添加图片。

六:iPhone12系列

因为我的方法是通过LaunchImage衍生出来的,iPhone12出来前LaunchImage已被禁用,所以Xcode没有iPhone12启动图对应的设置,故没办法在Contents.json文件进行相应的设置。(1x、2x、3x都可以传1242-2688px尺寸)

iPhone12用的都是3倍图,而在Contents.json文件中没有针对iPhone12的设置,所有,他会使用对应的3x图。可以发现3x图在以前机型是没有被使用的,所有可以通过3x图在进行iPhone12的启动图设置,而iPhone12机型的宽高比是固定的,所以这里面设置好也不会出现图片被拉伸或者显示不全等问题。

iPhone12系列开发尺寸:
12 min 375 * 812
12 AND 12 Pro 390 * 844
12 Pro Max 428 * 926

你可能感兴趣的:(Xcode设置启动图-LaunchScreen.storyboard 替代LaunchImage启动图适配)