iOS 13使用LaunchScreen.storyboard适配各尺寸启动图

最近搞FLutter, 基于Flutter的启动在做适配, 发现原来很久没有单独关注iOS的变化, 在启动图方面, 我们常用的iOS 的 launchImage, 已经不再被苹果推荐了…
而是全面转向统一的LaunchScreen.sb启动, 因此我们想要再去无脑的往LaunchImage里面丢图片是不再可行的方案, 需要自己去适配各个iOS设备,
具体的看这个文章比较全面…
这个世界变化真的快

iOS 13使用LaunchScreen.storyboard适配各尺寸启动图

iOS13最新LaunchScreen.storyboard 启动图屏幕适配

因为是使用Flutter, 我个人倾向于选择第三种方式, 即 依旧用多图来进行适配, 统一的原理还是可以适用于android,

多讲一句

想 继续用LaunchImage的思路来适配

会发现 LaunchScreen.storyboard中, 去加载资源其实读不出图片, 上面也有哥们说在json里面添加空格, 其实我发现没有用, 关键在于要放一张图 ,
在 contennts.json 中要配上这个, 才能让整个json 被加载读取

      "idiom" : "iphone",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "filename" : "640-1136.png",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x"
    },

Contents.json 可以这样搞

{
  "images" : [
    {
      "idiom" : "iphone",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "filename" : "640-1136.png",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "subtype" : "retina4",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "filename" : "640-1136.png",
      "subtype" : "retina4",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "subtype" : "retina4",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "1242-2208.png",
      "subtype" : "736h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "750-1334.png",
      "subtype" : "667h",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "filename" : "1125-2436.png",
      "subtype" : "2436h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "1242-2688.png",
      "subtype" : "2688h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "828-1792.png",
      "subtype" : "1792h",
      "scale" : "2x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

就可以读取到图片资源了

关于约束的问题…

因为有个刘海屏,有个大下巴的原因, 在iPhone X 的前后设备适配上, 确实要做一个选择…
如果说, 由于公司和业务 ,UI设计的Launch页面内容, 是那种四周留白比较多的, 其实约束倾向于使用iPhonex 一下设备的全屏约束,
缺点: iPhoneX以上设备 上下会有留白… 取巧的办法是讲LaunchScreen.sb的View的背景色设置成图片背景色一致

这里,约束的设置不能动态改变… (仅讨论sb, 不去涉及使用代码约束…)
目前, 我也采用的是依旧使用LaunchImage的思路, 进行多图适配, 由于launch页面的UI比较取巧, 都是白色,所有未覆盖部分, 就采用白色即可,
所以, 具体情况具体分析吧…

如果说,再过几年… 其实就倾向于在iPhoneX以上设备进行全屏约束, 毕竟以后刘海+下巴就是主流, 适配性更多一点

推荐的方式 - 放弃整图,改为页面布局Launch页面

对于我们开发者来说, 以后多一个机型,我们用LaunchIamge 再多放一张适配的图片就得了, 但是从苹果角度, 他们要做的支持我们很多看不见, 而且多放更多的适配图片, 也会造成App体积过大,我猜这才是苹果放弃LaunchIamge的主要原因
相比于苹果自己来完成更多LaunchImage功能的支持, 更多的图片体积,
改为让开发者 自己在LaunchScreen.storyboard上,自己进行launch页面的布局,
这个显然是对苹果自己有利的
反正适配工作都交由开发者去进行了

臭不要脸…我的内心是拒绝的