美文网首页iOS收藏iOS进阶+实战
LaunchScreen.storyboard启动图适配

LaunchScreen.storyboard启动图适配

作者: HF_K | 来源:发表于2020-03-19 16:55 被阅读0次

    前言

    iOS 8之前我们都是通过LaunchImage来设置启动图,随着苹果设备的更新,尺寸也越来越多,这时候我们需要设置各种设备的启动图,而且每次增加新的尺寸的设备都需要添加相应尺寸的启动图,这个比较麻烦。因此iOS 8苹果引入了LaunchScreen.storyboard,支持了AutoLayoutSizeClass,这样能够更加方便的适配各种屏幕。

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

    因为最近提交AppApp Store提示2020年4月份必须适配iOS 13,所以就适配iOS 13的同时,把LaunchScreen.storyboard也给处理了。

    方案

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

    这种方案没什么难度,主要是在LaunchScreen.storyboard中添加图片并设置好约束,然后将准备好的图片设置好即可。这种方案在不同设备上可能会出现不同程度的裁剪。

    方案2:使用一套图片(主要介绍)

    因为公司项目需要,不希望出现裁剪的效果,因此要做成LaunchImage的效果。

    iPhone尺寸如下图:

    手机尺寸

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

    1. 3.5寸的iPhone4s(640*960)
    2. 4.0寸的iPhone5/5s/5c/SE(640*1136)
    3. 4.7寸的iPhone6/6s/7/8(750*1334)
    4. 5.5寸的iPhone6p/6sp/7p/8p(1242*2208)
    5. 5.8寸的iPhoneX/XS/11Pro(1125*2436)
    6. 6.1寸的iPhoneXr/11(828*1792)
    7. 6.5寸的iPhone XS Max/11 Pro Max(1242*2688)

    步骤

    1. XcodeAssets.xcassets中创建图片组并且命名Image_qidong(随意)。
    创建图片组g
    1. 右键图片组 --> 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. 将对应图片添加进入图片组中

      注意⚠️:不要整体拖进去,不会自动识别,逐一添加。

    添加对应图片
    1. 设置LaunchScreen.storyboard,并将图片设置成刚刚的image_qidong
    设置LaunchScreen.storyboard
    1. 设置用LaunchScreen.storyboard作为启动图。
    设置LaunchScreen.storyboard作为启动图

    注意⚠️:

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

    效果

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


    iPhone 6sp iPhone 8 iPhone 8p iPhone Xʀ iPhone Xs Max iPhone 11 Pro Max

    相关文章

      网友评论

        本文标题:LaunchScreen.storyboard启动图适配

        本文链接:https://www.haomeiwen.com/subject/yfmlyhtx.html