Xcode11 Luanchscreen.storyboard 复杂元素屏幕适配

646 阅读3分钟

前言:

         最近在做项目的时候遇到了一个需求,需求内容就是更换Luanchscreen的图片。然鹅好久没做这块的我还理想的想使用LuanchImage来解决适配问题,结果Apple成功的恶心到我了,感冒发烧头晕想急着请假回家的我这时候内心是无比狂躁的,库克问候你全家!LuanchImage设置项那儿去了???


当时的心情啊,我也不知道该说什么了!

       在经历了没有选项后我开始使用谷歌大法,搜寻着我心仪的“小可爱❤”,结果现实再次打击了我。看看搜到的结果:


裤子都脱了,你给我看这个???

       都尼玛什么玩意儿,能适配么!除了第一个链接有一丢丢相关性外,其余的全是辣鸡!你没听错全是辣鸡!!!

      快速浏览了第一个搜索项,哎哟微博的耶!一溜烟的看完,大概就是说你用一张设计图,然后设置图片模式为Aspect Fill,OK你要得适配就出炉啦!(WTF完全不满足我的需求,我想要的是要么使用Lunchscreen进行多设备适配啊,通过提供lunchimage那种套图来,或者其他方式而不是这个。谷歌再次被我鄙视👎)!


官方简介

官方简介:Luanchscreen (可能是我🧠处于混沌中我是没找到有什么很好地说明,说白了对我而言没什么卵用这个东西!)


适配

Luanchscreen.storyboard 复杂元素屏幕适配

吐槽了这么多,接着进入正题,先看看需要的实现的页面:



元素拆分

要实现这个启动页首先需要将页面内元素进行拆分。

第一部分是背景:


第二部分是背景中的人物图像:


第三部分是底部白色背景:


第四部分是Logo:



约束

将页面拆分后对启动页进行自动布局约束添加。

人物约束如下:

PS:人物约束最开始使用的是顶部岁屏幕宽度进行动态变化进行适配,结果在测试中发现使用这种方法后会导致图片跳动,因此建议有类似的最好使用居中偏移方式,图片的高度使用了等比缩放,根据屏幕宽度来确定。

白色底和Logo约束:


PS:底部就很清爽了直接靠底部,加一点固定距离就完成了。

适配截图

整个适配完成,下面分别截取了4s、8p、11的截图:


iPhone 4S


iPhone 8Plus


总结

基本上这个适配达到了期望值。如果你有更好的适配方式,请务必告诉我。(这是欲望的小眼神👀)

题外话

掘金这是什么玩意,标签还不能自己设置,还得是系统准备好的,没用过这么难用的博客,这产品也是奇葩了,每一个提示,没选择,然后输入了正常标签逗号或者分好隔开叫我选着标签,试了三次才发现需要先随便输入,然后系统索引,没有的标签还不行。产品你出来,你写博客么,你不写博客你开发你M的产品啊,反人类么???