如何使用 LaunchStoryboard 设计开屏适配

近几年,随着 iOS 的设备迭代屏幕尺寸的增多,使用静态图作为开屏已经变得越来越让人头疼。按照设备分辨率,开屏资源不区分横竖屏的尺寸就有以下 8 种:

设备分辨率
iPad @1x768 × 1024
iPad @2x1536 × 2048
iPhone 4640 × 960
iPhone_retina 4.7750 × 1334
iPhone_retina 5.51242 × 2208
iPhone XR828 × 1792
iPhone X1125 × 2436
iPhone XS Max1242 × 2688

自 iOS 8.0 更新后,系统默认优先选用 Launch Screen.storyboard 作为开屏解决方案,随后 WWDC 2019 开发者大会也明确表示 iPad OS 的应用需要支持横竖屏的适配,显然弹性布局落地方案是更合适不过了,整体的方案也是由响应式布局得到的灵感。


了解设备视图大小

要做响应式布局的前提,你需要了解设备屏幕的属性,官方 iOS 人机交互指南并没有按机型去定义,而是按照两类视图大小:正常(Regular)和紧凑(Compact),可以根据设备屏幕属性去适配开屏内容。

设备竖屏横屏
12.9″ iPad ProRegular width, regular heightRegular width, regular height
11″ iPad ProRegular width, regular heightRegular width, regular height
10.5″ iPad ProRegular width, regular heightRegular width, regular height
9.7″ iPadRegular width, regular heightRegular width, regular height
7.9″ iPad mini 4Regular width, regular heightRegular width, regular height
iPhone XS MaxCompact width, regular heightRegular width, compact height
iPhone XSCompact width, regular heightCompact width, compact height
iPhone XRCompact width, regular heightRegular width, compact height
iPhone XCompact width, regular heightCompact width, compact height
iPhone 8 PlusCompact width, regular heightRegular width, compact height
iPhone 8Compact width, regular heightCompact width, compact height
iPhone 7 PlusCompact width, regular heightRegular width, compact height
iPhone 7Compact width, regular heightCompact width, compact height
iPhone 6s PlusCompact width, regular heightRegular width, compact height
iPhone 6sCompact width, regular heightCompact width, compact height
iPhone SECompact width, regular heightCompact width, compact height

简单总结其实分为以下 4 类视图:

  • 正常宽度,正常高度: iPad 设备
  • 紧凑宽度,紧凑高度:手机横屏
  • 正常宽度,紧凑高度:大屏手机横屏
  • 紧凑宽度,正常高度:手机竖屏
如图中所示,横竖屏共 4 种组合

紧凑宽度,正常高度「手机」

开屏适配是根据视图大小决定,而不是设备分辨率或型号;为了让屏幕中的元素能够在各种设备体验一致,需要对布局位置和尺寸大小使用更加灵活的单位,以 Keep 开屏为例,我们通过百分比的弹性布局去解决适配:

由于手机的竖屏垂直高度不定,我们根据屏幕高度划分上下两个百分比视图去确定元素的位置,大小通过宽度的占比确定,以保证界面视觉大小的一致性。

适配后 Demo 展示

以上布局的焦点内容(Slogan&Logo)按照百分比去适配屏幕,在「正常高度,紧凑宽度」也就是手机竖屏视图中能够保证相对占比和位置;但如果需要支持横屏宽度百分比会过大,所以就需要在宽度寻找方案,如果你的 App 无需适配横屏模式也就无需担心了,但接下来还是会一起看一下正常宽高视图的设备如何适配。


正常宽度,正常高度「iPad」

2020 年 iPad OS 会要求所有的应用不但支持横竖屏模式,并且界面元素和布局可以拆分视图,多任务处理。我们必须设计一个更弹性的界面,以 Keep 开屏为例:

对于 Regular width, regular height 的设备,我们在两侧增加 Margins 让视图变得更窄,以保证内容不被因设备的宽度过度放大。

适配后 Demo 展示

以上就是使用 LaunchStoryboard 创建开屏的方法之一,也欢迎大家留言探讨更多动态布局的设计方法。

谢谢 😀

iOS 适配和布局设计指南

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

发表评论