文章

SwiftUI 自适应布局

SwiftUI Adaptive Layout

使用 UIKit 写一套能够根据屏幕尺寸和方向自动更换布局的代码是比较麻烦的(至少从我目前的经验来看~),但是用 SwiftUI 来实现就会轻松一点。

在 SwiftUI 中,Apple 引入了一个概念 Size Classes (尺寸类型),且在横向和竖向两个维度上分别有 Horizontal Size Class 和 Vertical Size Class. Size Classes 可进一步分为两种:regular (标准) 和 compact (紧凑). 而设备的 Size Classes 由它的屏幕尺寸和屏幕方向决定,目前常见的设备 Size Classes 如下表所示,

Horizontal Size Class (Width)
Vertical Size Class (Height)Regular (标准)Compact (紧凑)
Regular (标准) iPad Portrait
iPad Landscape
iPhone Portrait
Compact (紧凑) iPhone 6/7/8 Plus
iPhone XR/XS Max
iPhone 11/11 Pro Max/ 12 Pro Max/13 Pro Max
上述机型的 Landscape
iPhone SE/6/7/8
iPhone XS/11 Pro
iPhone 12/12 Pro/13/13 Pro
上述机型的 Landscape

可以看到所有的 iPhone 在竖屏的时候都是 compact 紧凑型,而所有的 ipad 不管是横屏还是竖屏都是 regular 标注型

Usage

利用 SwiftUI 关键词 @Environment 可以监听横屏或者竖屏时的尺寸类型的变化,再根据这个变化来确定布局

1
2
3
4
5
6
7
8
9
10
11
@Environment(\.verticalSizeClass) var verticalSizeClass

...

if verticalSizeClass == .compact {
    HSignButtonExtractedView()
} else {
    VSignButtonExtractedView()
}

...

swiftui-adaptive-layout-screenshot

本文由作者按照 CC BY-NC-SA 4.0 进行授权