iOS13 / iPhone12---LaunchScreen.storyboard 启动图屏幕适配「一」

从2020年4月开始,所有使⽤ iOS13 SDK的 App将必须提供 LaunchScreen,
LaunchImage即将退出历史舞台

2020年2月10号更新
评论里很多兄弟反映了几个问题
1,ios13系统有问题
2,刘海屏上下有黑边
3,文章的demo是白图,看不出来是否适配。
本人今天恰逢有新项目,顺道来看一下我这个配置,本人未发现有这三个问题,尤其是第三个,其实看一下准备>的图就发现上面的白边是少了一部分的,说明并没有留白。
放上xs max的截图,其他的就懒得放了

1229008-dd504fb8fd741fc7.png

今天拿到新启动项目的启动图,突然想到这条iOS13的要求,恰好最近在适配公司其他的工程到iOS13。像在下这个菜鸡当然是先百度为敬。


1229008-19373cfe8fca080d.png

然后吃了一惊,网上竟然几乎没有这方面的资料(可能菜到不会百度)即便是有,也是将图片直接放在LaunchScreen.storyboard进行粗暴的拉伸,就目前苹果这个机器越来越复杂的情况,很明显粗暴的拉伸是绝对满足不了需求的。
1229008-7fd1964cb31c2c46.png

肿么办呢?通过查阅各方资料,再加上自己思考(自闭)终于找到一个方法,也不知道是不是正规操作,总之是完成了适配。

准备图片

1229008-5679f8befe8067dd.jpg.png

1229008-75cf05911e52e2ae.jpg.png

我们准备了目前市场占比较高的手机尺寸的图片

  • 4.0寸的iPhone5 / 5S / 5C / SE
  • 4.7寸的iPhone6 / 6S / 7 / 8
  • 5.4寸的iPhone12 mini
  • 5.5寸的iPhone6P / 6SP / 7P / 8P
  • 5.8寸的iPhoneX / XS / 11 Pro
  • 6.1寸的iPhoneXR / 11 / 12 / 12 Pro
  • 6.5寸的iPhoneXS Max / 11 ProMax
  • 6.7寸的iPhone12 ProMax
    (后面的命名规则在欺负强迫症的人)


    手机型号 屏幕尺寸 屏幕密度 开发尺寸 像素尺寸 倍图
    12 ProMax 6.7 inch 458 ppi 428*926 pt 1284*2778 px @3x
    XR/11 6.1 inch 326 ppi 414*896 pt 828*1792 px @2x
    12/12 Pro 6.1 inch 460 ppi 390*844 pt 1170*2532 px @3x
    XS Max/11 ProMax 6.5 inch 458 ppi 414*896 pt 1242*2688 px @3x
    X/XS/11 Pro 5.8 inch 458 ppi 375*812 pt 1125*2436 px @3x
    6P/6SP/7P/8P 5.5 inch 401 ppi 414*736 pt 1242*2208 px @3x
    12 mini 5.4 inch 460 ppi 360*780 pt 1080*2340 @3X
    6/6S/7/8 4.7 inch 326 ppi 375*667 pt 750*1334 px @2x
    5/5S/5C/SE 4.0 inch 326 ppi 320*568pt 640*1136 px @2x
    4/4S 3.5 inch 326 ppi 320*480 pt 640*960 px @2x

为了区分每个手机屏幕,在图片上做了标记。

Xcode创建图片



将所有尺寸的图片拖入到当前图片的文件夹下



xcode会自动同步,但是会出现不识别的警告。

然后用编辑器打开Contents.json文件


1229008-dd19c95cadcafc4c.png

将三个数组字典删除掉,更换成
    {
      "idiom" : "iphone",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone4.png",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "subtype" : "retina4",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone5s.png",
      "subtype" : "retina4",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone8P.png",
      "subtype" : "736h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone8.png",
      "subtype" : "667h",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "filename" : "IPhoneX.png",
      "subtype" : "2436h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone XS Max.png",
      "subtype" : "2688h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone XR.png",
      "subtype" : "1792h",
      "scale" : "2x"
    }

这时我们的xcode就变成了这样


操作LaunchScreen.storyboard

注意: 布局的时候,上下需要选择边界view,默认是SafeArea
然后图片image填上我们刚才创建的图片名。


注意:在我们敲入名字的时候,可能会出现图片不识别的情况,xcode11现在敲入图片的时候已经会提示了,也不会出现提示,在json文件中加上前面这段空状态或者有一张图就行,意思一下,原理是什么不知道,大佬可以评论一下解答,多谢

    {
      "idiom" : "iphone",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone4.png",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "subtype" : "retina4",
      "scale" : "1x"
    }

这样就会有提示,且图片不在为大问号。


运行测试






iPhone12系列启动页适配(仅供参考)

在 iPhone 12 以前,content.json中配置好相应的屏幕尺寸之后(如上),Xcode 会自动匹配相应的设备。而到目前为止,Xcode 12.2 不会对iPhone 12,iPhone 12 Pro, iPhone 12 Pro Max 这三个机型做自动精准匹配。所以,只能加入通用 2X、3X 图。
具体做法:
1、选中对应的imageSet,展开右侧栏,勾选 “Universal”;
2、图片区域会多出一组 Universal 的图片位置,拖入对应的图片;12系列的尺寸在上方有


🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉鼓掌鼓掌🎉🎉🎉🎉🎉🎉🎉🎉🎉

附:【使用lunchScreen.xib清除之前的缓存】

作者邮件:zhangxmsy@163.com, 有问题联系。

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

推荐阅读更多精彩内容