SwiftUI之AlignmentGuides
本质上，Alignment Guides属于SwiftUI中布局的知识点，在某些特殊场景下，使用Alignment Guides能起到事半功倍的效果，比如我们平时经常用的下边的这样的效果：
1
上图显示了，当切换背景容器的最大宽度时，使用Alignment Guides能够自动执行动画效果，这正是我们想要的，核心代码如下：
struct TestWrappedLayout: View {
let w: CGFloat
var texts: [String]
var body: some View {
self.generateContent(in: w)
}
private func generateContent(in w: CGFloat) -> some View {
var width = CGFloat.zero
var height = CGFloat.zero
return ZStack(alignment: .topLeading) {
ForEach(self.texts, id: \.self) { t in
self.item(for: t)
.padding([.trailing, .bottom], 4)
.alignmentGuide(.leading, computeValue: { d in
if (abs(width - d.width) > w)
{
width = 0
height -= d.height
}
let result = width
if t == self.texts.last! {
width = 0 //last item
} else {
width -= d.width
}
return result
})
.alignmentGuide(.top, computeValue: {d in
let result = height
if t == self.texts.last! {
height = 0 // last item
}
return result
})
}
}
}
func item(for text: String) -> some View {
Text(text)
.padding([.leading, .trailing], 8)
.frame(height: 30)
.font(.subheadline)
.background(Color.orange)
.foregroundColor(.white)
.cornerRadius(15)
.onTapGesture {
print("你好啊")
}
}
}
在本篇文章中，最核心的思想就是容器container中的每个View都有它的alignment guide。
Alignment Guide是什么？
说到对齐，大家头脑中一定要有一个组的概念，也就是group，如果只有一个view，那对齐就失去了意义，我们在设计对齐相关的ui的时候，是对一组中的多个view进行考虑的，这也恰恰和容器的概念对应上了，我这里说的容器指的是VStack,HStack,ZStack。
换句话说，我们对容器内的Views使用Alignment guide。
对齐共分为两种：水平对齐(horizontal),垂直对齐(vertical)
我们先以水平对齐为例，先看下图：
align-horizontal-1.png
有3个view，分别为A，B，C，他们alignment guide返回的值分别为0， 20， 10，从上图可以看出，他们的偏移关系正好和值对应上了，当值为正的时候，往左偏移，为负的时候，往右偏移。这里有下边几个概念，大家一定要理解，如果不理解这几个概念，就无法真正明白对齐的奥义：
- 我们把A，B，C放到了VStack中，VStack中使用的对齐方式是水平对齐，比如VStack(alignment: .center)`
- alignment guide返回的值表达的是这3个view的位置关系，并不是说A的返回值为0，A就不偏移，我们需要把他们作为一个整体来看，通过偏移量来描述他们之间的位置关系，然后让他们3个view在VStack中整体居中
上边的重点是，alignment guide描述的是views之间的位置关系，系统在布局的时候，会把他们看成一个整体，然后在使用frame alignment guide对整体进行布局。
同样的道理，下边图片展示的是垂直对齐，我们就不再多做解释了：
align-vertical.png
通过上边这两个例子，我们得出一个结论：VStack需要水平对齐，HStack需要垂直对齐，虽然这听上去有点怪，但只需在头脑中想一想他们中view的排列方式，就不难理解。至于ZStack，即需要水平对齐，也需要垂直对齐，这个我们在下边的小节中，详细解释。
Alignment Guide中的疑惑
相信大家在代码中的很多地方会用到.leading，在SwiftUI中，用到对齐的地方一共有下边几种：
alignment-confusion.png
这张图片覆盖了对齐所有的使用方式，现在大家可能是一脸茫然，但读完剩下的文章后，再回过头来看这张图片，就会发现，这张图片实在是太经典了，毫不夸张的说，你以后在SwiftUI中使用alignment guide的时候，头脑中一定会浮现出这张图片。
我们对上边的几个概念做个简单的介绍：
-
Container Alignment: 容器的对齐方式主要有2个目的，首先它定义了其内部views的隐式对齐方式，没有使用
alignmentGuides()modifier的view都使用隐式对齐，然后定义了内部views中使用了alignmentGuides()的view，只有参数与容器对齐参数相同，容器才会根据返回值计算布局 - Alignment Guide：如果该值和Container Alignment的参数不匹配，则不会生效
- Implicit Alignment Value：通常来说，隐式对齐采用的值都是默认的值，系统通常会使用和对齐参数相匹配的值
- Explicit Alignment Value：显式对齐跟隐式对齐相反，是我们自己用程序明确给出的返回值
- Frame Alignment：表示容器中views的对齐方式，把views看作一个整体，整体偏左，居中，或居右
- Text Alignment：控制多行文本的对齐方式
隐式和显式对齐的区别
每个view都有一个alignment，记住这一点非常重要，当我们使用.alignmentGuide()设置对齐方式时，我们称之为显式，相反则称之为隐式。隐式的情况下，.alignmentGuide()的返回值和它父类容器的对齐参数有关。
如果我们没有为VStack, HStack 和 ZStack提供alignment参数，默认值为center。
ViewDimensions
func alignmentGuide(_ g: HorizontalAlignment, computeValue: @escaping (ViewDimensions) -> CGFloat) -> some View
func alignmentGuide(_ g: VerticalAlignment, computeValue: @escaping (ViewDimensions) -> CGFloat) -> some View
我们已经知道了computeValue函数的返回值是一个CGFloat类型，但我们不太清楚ViewDimensions是个什么东西？很简单，我们可以直接查看它的系统定义：
public struct ViewDimensions {
public var width: CGFloat { get } // The view's width
public var height: CGFloat { get } // The view's height
public subscript(guide: HorizontalAlignment) -> CGFloat { get }
public subscript(guide: VerticalAlignment) -> CGFloat { get }
public subscript(explicit guide: HorizontalAlignment) -> CGFloat? { get }
public subscript(explicit guide: VerticalAlignment) -> CGFloat? { get }
}
很容易发现，通过width和height,我们很容易获得该view的宽和高，这在我们返回对齐值的时候非常有用，我们不做过多解释，我们往下看，subscript表明我们可以像这样访问：d[HorizontalAlignment.leading]。
那么这有什么用呢？ 我们先看段代码：
struct Example6: View {
var body: some View {
ZStack(alignment: .topLeading) {
Text("Hello")
.alignmentGuide(HorizontalAlignment.leading, computeValue: { d in return 0 })
.alignmentGuide(.top, computeValue: { d in return 0 })
.background(Color.green)
Text("World")
.alignmentGuide(.top, computeValue: { d in return 100 })
.alignmentGuide(HorizontalAlignment.leading, computeValue: { d in return 0 })
.background(Color.purple)
}
.background(Color.orange)
}
}
这段代码运行后的效果
1
由于我们给Text("World")设置了.alignmentGuide(.top, computeValue: { d in return 100 })，因此，它出现在hello的上边没什么问题，那么我如果把.alignmentGuide(HorizontalAlignment.leading, computeValue: { d in return 0 })改成.alignmentGuide(HorizontalAlignment.leading, computeValue: { d in return d[.top] })呢？
在设置leading对齐的时候使用了top对齐的数据，运行效果：
2
可以看出，完全符合我们的预期，world又向左偏移了100的距离，这就是我们上边说的用法，不过，通常情况下我们基本不需要这样操作。
类似d[HorizontalAlignment.leading]这样的参数，我们都可简写成d[.leading],Swift能够非常智能的识别这些类型，但是center除外，原因是HorizontalAlignment和VerticalAlignment都有center。
对齐类型
对于HorizontalAlignment来说，有下边几个参数：
extension HorizontalAlignment {
public static let leading: HorizontalAlignment
public static let center: HorizontalAlignment
public static let trailing: HorizontalAlignment
}
当我们使用下标访问数据的时候，有两种方式：
d[.trailing]
d[explicit: .trailing]
d[.trailing]表示获取d的隐式leading，也就是默认值，通常情况下，.leading的值为0，.center的值为width的一半，.trailing的值为width。
d[explicit: .trailing]表示获取d的显式的trailing，当没有通过.alignmentGuide()指定值的时候，它返回nil，就像上一小节讲的一样，在ZStack中，我们可以获取显式的对齐值
对于VerticalAlignment来说，基本用法跟HorizontalAlignment差不多，但它多了几个参数：
extension VerticalAlignment {
public static let top: VerticalAlignment
public static let center: VerticalAlignment
public static let bottom: VerticalAlignment
public static let firstTextBaseline: VerticalAlignment
public static let lastTextBaseline: VerticalAlignment
}
firstTextBaseline表示所有text的以各自最上边的那一行的base line对齐，lastTextBaseline表示所有text的以最下边的那一行的base line对齐。对于某个view而言，如果它不是多行文本，则firstTextBaseline和lastTextBaseline是一样的。
我们可以通过print(d[.lastTextBaseline])打印出这些值，他们都为正值。
我们先看个firstTextBaseline的例子：
HStack(alignment: .firstTextBaseline) {
Text("床前明月光")
.font(.caption)
.frame(width: 50)
.background(Color.orange)
Text("疑是地上霜")
.font(.body)
.frame(width: 50)
.background(Color.green)
Text("举头望明月")
.font(.largeTitle)
.frame(width: 50)
.background(Color.blue)
}
企业微信截图_b87e6bd8-84b4-4e49-9f44-3a88d13c64dc.png
可以看出来，这3个text都以他们各自的第一行的base line 对齐了，我们稍微改下代码：
HStack(alignment: .lastTextBaseline) {
...
}
企业微信截图_b92bc7fa-3042-4e7c-9026-7c0322ac19e7.png
他们以各自的最后一行的的base line对齐了，针对这3个text，上边的代码都使用了隐式的alignment guide，那么我们再进一步尝试，我们给第3个text一个显式的alignment guide会是怎么样的？
HStack(alignment: .lastTextBaseline) {
Text("床前明月光")
.font(.caption)
.frame(width: 50)
.background(Color.orange)
Text("疑是地上霜")
.font(.body)
.frame(width: 50)
.background(Color.green)
Text("举头望明月")
.font(.largeTitle)
.alignmentGuide(.lastTextBaseline, computeValue: { (d) -> CGFloat in
d[.firstTextBaseline]
})
.frame(width: 50)
.background(Color.blue)
}
企业微信截图_3aa000af-94ee-4224-9926-c6e220d4527a.png
重点来了，对齐描述的是容器内view之间的布局关系，由于computeValue函数的返回值都是CGFloat，因此不管是哪种对齐方式，最终都是得到一个CGFloat。
那么如果我们在text中间加入一个其他的view呢？
HStack(alignment: .firstTextBaseline) {
Text("床前明月光")
.font(.caption)
.frame(width: 50)
.background(Color.orange)
RoundedRectangle(cornerRadius: 3)
.foregroundColor(.green)
.frame(width: 50, height: 40)
Text("疑是地上霜")
.font(.body)
.frame(width: 50)
.background(Color.green)
Text("举头望明月")
.font(.largeTitle)
.alignmentGuide(.firstTextBaseline, computeValue: { (d) -> CGFloat in
return 0
})
.frame(width: 50)
.background(Color.blue)
}
企业微信截图_afa2d94f-7faf-4f70-bfe4-1f5ed7c41e2c_副本.png
- 除了text之外的其他view，都使用bottom对齐方式
- 不管是
lastTextBaseline还是firstTextBaseline,布局的算法都是.top + computeValue,也就是说以它的顶部为布局的基线 - alignment 描述的是view之间的关系，把他们作为一个整体或者一组来看待
这一块可能有点绕，但并不难理解，如果大家有问题，可以留言。
我们知道HStack使用VerticalAlignment，VStack使用HorizontalAlignment，他们只需要一种就行了，但是ZStack同时需要两种对齐方式，该如何呢？
这里引入Alignment类型，用法如下：
ZStack(alignment: Alignment(horizontal: .leading, vertical: .top)) { ... }
本质上，它把horizontal和vertical封装在了一起，我们平时经常用的是下边这个写法，只是写法不同而已：
ZStack(alignment: .topLeading) { ... }
Container Alignment
所谓的容器的对齐方式指的是下边这里：
VStack(alignment: .leading)
HStack(alignment: .top)
ZStack(alignment: .topLeading)
那么它主要有什么作用呢？
- 我们知道，容器中的view都能够用
.alignmentGuides()modifier来显式的返回对齐值，.alignmentGuides()的第一个参数如果与Container Alignment不一样，容器在布局的时候就会忽略这个view的.alignmentGuides() - 它提供了容器中view的隐式alignment guide
大家看这段代码：
struct Example3: View {
@State private var alignment: HorizontalAlignment = .leading
var body: some View {
VStack {
Spacer()
VStack(alignment: alignment) {
LabelView(title: "Athos", color: .green)
.alignmentGuide(.leading, computeValue: { _ in 30 } )
.alignmentGuide(HorizontalAlignment.center, computeValue: { _ in 30 } )
.alignmentGuide(.trailing, computeValue: { _ in 90 } )
LabelView(title: "Porthos", color: .red)
.alignmentGuide(.leading, computeValue: { _ in 90 } )
.alignmentGuide(HorizontalAlignment.center, computeValue: { _ in 30 } )
.alignmentGuide(.trailing, computeValue: { _ in 30 } )
LabelView(title: "Aramis", color: .blue) // use implicit guide
}
Spacer()
HStack {
Button("leading") { withAnimation(.easeInOut(duration: 2)) { self.alignment = .leading }}
Button("center") { withAnimation(.easeInOut(duration: 2)) { self.alignment = .center }}
Button("trailing") { withAnimation(.easeInOut(duration: 2)) { self.alignment = .trailing }}
}
}
}
}
它的运行效果如下图所示：
Kapture 2020-06-01 at 17.11.25.gif
可以很明显的看出当我们切换container alignment的参数时，它内部的view的alignment那些被忽略，那些被使用。
Frame Alignment
我一直在不断的强调，我们上边看到的对齐方式，都应该把容器中的所有view看作一个整体，alignment描述的是view之间的一种位置关系。
大家思考一下，即使.alignmentGuide中的computeValue返回值为0，也不能说明该view保持不动。
如果我们把容器内部的view看成一组，那么Frame Alignment就非常容易理解了：
VStack(alignment: .leading)
VStack(alignment: .center)
VStack(alignment: .trailing)
上边3张图片分别展示了VStack(alignment: .leading),VStack(alignment: .center)和VStack(alignment: .trailing)的情况，可以看出，他们内部图形的布局发生了变化，但是他们3个整体都是居中对齐的。
原因就是我们上一小节讲的，container alignment只影响容器内的布局，要让容器内的views整体左对齐或者居中，需要使用Frame Alignment.
.frame(maxWidth: .infinity, alignment: .leading)
Frame Alignment
关于Frame Alignment有一点需要特别注意，有时候看上去我们的设置没有生效，只要原因就是，在SwiftUI中，大多数情况下View的布局政策基于收紧策略，也就是View的宽度只是自己需要的宽度，这种情况下设置frame对齐当然就没有意义了。
Multiline Text Alignment()
多行文本对齐就比较简单了，大家直接看图就行了。
Multiline Text Alignment()
Interacting with the Alignment Guides
如果大家对上边讲的这些对齐方式还有疑惑，可以下载这里的代码https://gist.github.com/swiftui-lab/793ca53ad1f2f0d7eb07aa23b54d9cbf,自己动手做一些交互，就应该能够明白这些原理和用法了，放一张界面的截图：
交互
Custom Alignments
大多数情况，我们是不要自定义对齐的，使用系统提供的.leading，.center等等几乎可以实现所有的UI效果，在本小节中，大家应该重点关注第二个例子，基本上只有这种情况，我们优先考虑自定义对齐。
自定义对齐的基本写法如下：
extension HorizontalAlignment {
private enum WeirdAlignment: AlignmentID {
static func defaultValue(in d: ViewDimensions) -> CGFloat {
return d.height
}
}
static let weirdAlignment = HorizontalAlignment(WeirdAlignment.self)
}
- 决定是horizontal还是vertical
- 提供一个隐式对齐的默认值
我们小试牛刀，在上边代码中，我们自定义一个alignment，默认值返回view的高度，这样产生的效果如下：
weird-alignment.png
可以看出，每个view的偏移都是它自身的高度，这样的效果看上去还挺有意思。完整代码如下：
struct Example4: View {
var body: some View {
VStack(alignment: .weirdAlignment, spacing: 10) {
Rectangle()
.fill(Color.primary)
.frame(width: 1)
.alignmentGuide(.weirdAlignment, computeValue: { d in 0 })
ColorLabel(label: "Monday", color: .red, height: 50)
ColorLabel(label: "Tuesday", color: .orange, height: 70)
ColorLabel(label: "Wednesday", color: .yellow, height: 90)
ColorLabel(label: "Thursday", color: .green, height: 40)
ColorLabel(label: "Friday", color: .blue, height: 70)
ColorLabel(label: "Saturday", color: .purple, height: 40)
ColorLabel(label: "Sunday", color: .pink, height: 40)
Rectangle()
.fill(Color.primary)
.frame(width: 1)
.alignmentGuide(.weirdAlignment, computeValue: { d in 0 })
}
}
}
struct ColorLabel: View {
let label: String
let color: Color
let height: CGFloat
var body: some View {
Text(label).font(.title).foregroundColor(.primary).frame(height: height).padding(.horizontal, 20)
.background(RoundedRectangle(cornerRadius: 8).fill(color))
}
}
重点来了，我要说，使用自定义对齐最大的优势是：当在不同的view继承分支上使用自定义对齐，会产生理想的效果。
custom-alignment.gif
大家看上图，一个HStack包裹这一个Image和VStack，VStack中有一组Text，当点击某个Text的时候，Image可以和点击的Text对齐。
这就是我们上边说的，对于属于不同层次的view进行对齐，SwiftUI非常智能的知道我们想要这样的效果。完整代码如下：
extension VerticalAlignment {
private enum MyAlignment : AlignmentID {
static func defaultValue(in d: ViewDimensions) -> CGFloat {
return d[.bottom]
}
}
static let myAlignment = VerticalAlignment(MyAlignment.self)
}
struct CustomView: View {
@State private var selectedIdx = 1
let days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
var body: some View {
HStack(alignment: .myAlignment) {
Image(systemName: "arrow.right.circle.fill")
.alignmentGuide(.myAlignment, computeValue: { d in d[VerticalAlignment.center] })
.foregroundColor(.green)
VStack(alignment: .leading) {
ForEach(days.indices, id: \.self) { idx in
Group {
if idx == self.selectedIdx {
Text(self.days[idx])
.transition(AnyTransition.identity)
.alignmentGuide(.myAlignment, computeValue: { d in d[VerticalAlignment.center] })
} else {
Text(self.days[idx])
.transition(AnyTransition.identity)
.onTapGesture {
withAnimation {
self.selectedIdx = idx
}
}
}
}
}
}
}
.padding(20)
.font(.largeTitle)
}
}
如果要自定义ZStack的alignment，稍微麻烦一点，但原理都是一样的相信大家都能够理解，就直接上代码了：
extension VerticalAlignment {
private enum MyVerticalAlignment : AlignmentID {
static func defaultValue(in d: ViewDimensions) -> CGFloat {
return d[.bottom]
}
}
static let myVerticalAlignment = VerticalAlignment(MyVerticalAlignment.self)
}
extension HorizontalAlignment {
private enum MyHorizontalAlignment : AlignmentID {
static func defaultValue(in d: ViewDimensions) -> CGFloat {
return d[.leading]
}
}
static let myHorizontalAlignment = HorizontalAlignment(MyHorizontalAlignment.self)
}
extension Alignment {
static let myAlignment = Alignment(horizontal: .myHorizontalAlignment, vertical: .myVerticalAlignment)
}
struct CustomView: View {
var body: some View {
ZStack(alignment: .myAlignment) {
...
}
}
}
总结
通过这篇文章，大家应该对Alignment Guide有了一个全面的了解，它应该成为我们日常开发进行布局的强大工具，现在回过头来再看看这张图片，是不是有那么一点感觉了呢？
alignment-confusion.png
注：上边的内容参考了网站https://swiftui-lab.com/alignment-guides/，如有侵权，立即删除。
