近几年,随着 iOS 的设备迭代屏幕尺寸的增多,使用静态图作为开屏已经变得越来越让人头疼。按照设备分辨率,开屏资源不区分横竖屏的尺寸就有以下 8 种:
设备 | 分辨率 |
---|---|
iPad @1x | 768 × 1024 |
iPad @2x | 1536 × 2048 |
iPhone 4 | 640 × 960 |
iPhone_retina 4.7 | 750 × 1334 |
iPhone_retina 5.5 | 1242 × 2208 |
iPhone XR | 828 × 1792 |
iPhone X | 1125 × 2436 |
iPhone XS Max | 1242 × 2688 |
自 iOS 8.0 更新后,系统默认优先选用 Launch Screen.storyboard 作为开屏解决方案,随后 WWDC 2019 开发者大会也明确表示 iPad OS 的应用需要支持横竖屏的适配,显然弹性布局落地方案是更合适不过了,整体的方案也是由响应式布局得到的灵感。
了解设备视图大小
要做响应式布局的前提,你需要了解设备屏幕的属性,官方 iOS 人机交互指南并没有按机型去定义,而是按照两类视图大小:正常(Regular)和紧凑(Compact),可以根据设备屏幕属性去适配开屏内容。
设备 | 竖屏 | 横屏 |
---|---|---|
12.9″ iPad Pro | Regular width, regular height | Regular width, regular height |
11″ iPad Pro | Regular width, regular height | Regular width, regular height |
10.5″ iPad Pro | Regular width, regular height | Regular width, regular height |
9.7″ iPad | Regular width, regular height | Regular width, regular height |
7.9″ iPad mini 4 | Regular width, regular height | Regular width, regular height |
iPhone XS Max | Compact width, regular height | Regular width, compact height |
iPhone XS | Compact width, regular height | Compact width, compact height |
iPhone XR | Compact width, regular height | Regular width, compact height |
iPhone X | Compact width, regular height | Compact width, compact height |
iPhone 8 Plus | Compact width, regular height | Regular width, compact height |
iPhone 8 | Compact width, regular height | Compact width, compact height |
iPhone 7 Plus | Compact width, regular height | Regular width, compact height |
iPhone 7 | Compact width, regular height | Compact width, compact height |
iPhone 6s Plus | Compact width, regular height | Regular width, compact height |
iPhone 6s | Compact width, regular height | Compact width, compact height |
iPhone SE | Compact width, regular height | Compact width, compact height |
简单总结其实分为以下 4 类视图:
- 正常宽度,正常高度: iPad 设备
- 紧凑宽度,紧凑高度:手机横屏
- 正常宽度,紧凑高度:大屏手机横屏
- 紧凑宽度,正常高度:手机竖屏
紧凑宽度,正常高度「手机」
开屏适配是根据视图大小决定,而不是设备分辨率或型号;为了让屏幕中的元素能够在各种设备体验一致,需要对布局位置和尺寸大小使用更加灵活的单位,以 Keep 开屏为例,我们通过百分比的弹性布局去解决适配:
由于手机的竖屏垂直高度不定,我们根据屏幕高度划分上下两个百分比视图去确定元素的位置,大小通过宽度的占比确定,以保证界面视觉大小的一致性。
以上布局的焦点内容(Slogan&Logo)按照百分比去适配屏幕,在「正常高度,紧凑宽度」也就是手机竖屏视图中能够保证相对占比和位置;但如果需要支持横屏宽度百分比会过大,所以就需要在宽度寻找方案,如果你的 App 无需适配横屏模式也就无需担心了,但接下来还是会一起看一下正常宽高视图的设备如何适配。
正常宽度,正常高度「iPad」
2020 年 iPad OS 会要求所有的应用不但支持横竖屏模式,并且界面元素和布局可以拆分视图,多任务处理。我们必须设计一个更弹性的界面,以 Keep 开屏为例:
对于 Regular width, regular height 的设备,我们在两侧增加 Margins 让视图变得更窄,以保证内容不被因设备的宽度过度放大。
以上就是使用 LaunchStoryboard 创建开屏的方法之一,也欢迎大家留言探讨更多动态布局的设计方法。
谢谢 😀
iOS 适配和布局设计指南
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/