文章

SwiftUI 自适应布局

SwiftUI Adaptive Layout

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

在 SwiftUI 中,Apple 引入了一个概念 Size Classes (尺寸类型),且在横向和竖向两个维度上分别有 Horizontal Size ClassVertical 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 进行授权