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

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

推荐阅读更多精彩内容