iOS LaunchScreen.storyboard 的使用和适配

一、苹果审核新规

背景:WWDC在2019有session提出。到2020年4月,上架APP的启动页必须使用launchscreen.storyboard,不能再使用assert方式了,后面延迟到了2020年6月,现在6月已过,就来说下launchscreen.storyboard的使用以及里面遇见的坑。

二、使用LaunchScreen.storyboard搭建启动图

1、首先,要在项目中进行配置。在General—> App Icons and Launch Images—>Launch Screen File中选择LaunchScreen


项目设置

2、然后,在Build Settings—>Asset Catalog Launch Image Set Name 中将值置空(如果以前没用assert方式设置启动图,默认为空)


Build Settings设置

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

4、添加UIImageView控件

添加UIImageView控件

5、为新添加的UIImageView


添加约束

6、选中上下左右的约束(点击短横线),并将数值都设为0,最后点击下面的Add按钮,如下图所示:

设置约束

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

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

底部约束

修改完的效果如下图所示:


修改完的效果

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

9、此时将3中提到的Use Safe Area Layout Guides选项取消勾选,然后再将自己的启动图名称添加上就可以了

整体效果

三、图片适配

以前使用LaunchImage方式的时候,使用LaunchImage可以根据不同的屏幕设置不同的图片,现在只能用1倍、2倍、3倍图了,但是8P和11P max都是3倍图,高度却不一样了,如果不做处理用同一张图片会出现留白情况。
1、简单粗暴处理。在Content Mode—>选择Scale To Fill或者Aspect Fill,让图片自己压缩。Scale To Fill会改变图片宽高比,Aspect Fill会造成图片显示不全。

2、类似LaunchImage适配。

2.1、选择Assets.xcassets—>左下角+号—>New Image Set.然后自己命一个名字


自定义图片

2.2、修改图片的Contents.json文件,修改内容如下(双击图片,选择Show in Finder,文件夹里面有一个Contents.json文件,双击打开)

{
  "images" : [
    {
      "idiom" : "iphone",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "scale" : "1x",
      "subtype" : "retina4"
    },
    {
      "idiom" : "iphone",
      "scale" : "2x",
      "subtype" : "retina4"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "subtype" : "retina4"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "subtype" : "736h"
    },
    {
      "idiom" : "iphone",
      "scale" : "2x",
      "subtype" : "667h"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "subtype" : "2436h"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "subtype" : "2688h"
    },
    {
      "idiom" : "iphone",
      "scale" : "2x",
      "subtype" : "1792h"
    }
  ],
  "info" : {
    "author" : "xcode",
    "version" : 1
  }
}

2.3、此时就可以根据不同屏幕适配不同的启动图了


屏幕适配

四:启动图没出来

可以尝试重启Xcode、删除app重装等。

五:修改启动图

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

\color{red}{鉴于比较多读者反馈图片显示不了,于是写了一个demo供参考}demo

\color{red}{注意,如果图片显示不了}

  • retina4是对4寸屏幕的适配,也就是苹果5系列和第一代se, 这类机型只有2x图,但是这种写法会默认生成1x、2x、3x,直接用320*568图片去适配
  • 查看自己是否有步骤缺失
  • 查看自己项目以前是否使用LaunchImage,如果是,是否将LaunchImage相关已经全部删除
  • 重启手机试下

六:iPhone12系列

因为我的方法是通过LaunchImage衍生出来的,iPhone12出来前LaunchImage已被禁用,所以Xcode没有iPhone12启动图对应的设置,故没办法在Contents.json文件进行相应的设置。
\color{red}{iPhone12系列解决方案(比较投机)}
iPhone12用的都是3倍图,而在Contents.json文件中没有针对iPhone12的设置,所有,他会使用对应的3x图。可以发现3x图在以前机型是没有被使用的,所有可以通过3x图在进行iPhone12的启动图设置,而iPhone12机型的宽高比是固定的,所以这里面设置好也不会出现图片被拉伸或者显示不全等问题。

3x图

\color{red}{iPhone12系列开发尺寸}
12 min                 375 * 812
12 AND 12 Pro   390 * 844
12 Pro Max          428 * 926

七:iOS15 问题解决

最近看到好多伙伴反馈升级iOS15后,有问题,自测下确实在iOS15上有问题。下面总结下原因和解决办法。

2020年开始6月开始,苹果规定不能再使用assert方式,然后在苹果12上,LaunchImage里面就没有苹果12的相关配置了,然后在上面补充了苹果12的解决办法,结果在iOS15后,苹果不仅没有增加13系列LaunchImage的相关适配,还将以前刘海屏幕LaunchImage里面相关适配做了处理,导致在iOS15上,使用我提供的方法不起作用,也就是一些小伙伴反馈的X系列和11系列启动图出不来。

经测试发现,以前在Contents.json通过设置图片的subtype去适配,但是iOS15后通过subtype设置刘海系列手机无效,但是8和8P系列还是有效的。

启动图之所以要适配,主要原因就是刘海系列和非刘海系列宽高比差距比较大,用同一套图会产生图片拉伸,影响界面效果,所以此次适配就分成两类去适配就行了。首先上面说了,8和8P系列(非刘海系列)通过subtype设置还是有效的,因此非刘海系列还可以通过subtype去设置。在以前适配12系列的时候说过,因为找不到12系列的subtype值,没有设置,就会直接使用对应的3x图,因此刘海系列的subtype值都不去设置了,在Contents.json里面设置对应的2x图和3x图,刘海系列就会使用对应的2x图和3x图了,而且刘海系列宽高比基本一致,用同一套图就行了,demo已经更新。亲测有效。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,219评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,363评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,933评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,020评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,400评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,640评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,896评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,597评论 0 199
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,327评论 1 244
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,581评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,072评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,399评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,054评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,083评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,849评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,672评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,585评论 2 270