苹果设计开发加速器线上活动

受疫情影响，今年设计开发加速器活动改为线上形式，本次参与的活动课题是《为 iPhone 和 iPad 搭建灵活适配的用户界面》。新出的几款 iPhone 和 iPad 设备尺寸和旧设备都不同，造成适配成本增加，本次活动目的是向开发者分享高效而灵活的适配方案。

避免屏幕分辨率硬编码

常见陷阱：对硬件设备型号做特殊判断

适配方面

• 启动屏
• 安全区和布局边框
• 尺寸类
• 动态字体

启动屏

用 Storyboard 启动屏，不建议用图片作为启动页，详见官方设计指南：

安全区和布局边框

安全区

UIScreen & UIWindow 获得布局尺寸进行排版不适用于 iPhone X 以及以后机型

要使用安全区来进行布局（安全区是动态的，不同设备、横竖屏、子视图都不相同）

.safeAreaInsets
.safeAreaLayoutGuide

还可以根据需要定制安全区（例如定制工具栏）

.additionalSafeAreaInsets

安全区发生变化时：

.viewSafeAreaInsetsDidChange()

布局边框

.layoutMargins
.directionalLayoutMargins
.layoutMarginsGuide
.layoutMarginsDidChange()

与安全区配合使用

子视图传递

布局边框会根据设备宽度、动态字体而自动调整，能够自动适配。

尺寸类

sizeClasses

• C 紧凑型（iPhone竖屏，iPad分屏）
• R 常规型（iPad竖屏，12.9‘iPad等宽分屏）

动态字体

.large
.title1
...

label.font = UIFont.preferred...

自定义字体

metrics = UIFontMetrics(...)

more at WWDC2017

后记

参考资料

• Apple Developer: Human Interface Guidelines

• 设计开发加速器（上海）

许可协议

本文由 Mr. X 原创，采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。

分享文章