整站seo优化推广,个人网页制作多少钱,政务信息系统网站建设规范,国内做医疗耗材的网站一、Alignment Guide 简介
Alignment guides 是一个强大的布局工具#xff0c;但通常未被充分利用。在很多情况下#xff0c;它们可以帮助我们避免更复杂的选项#xff0c;比如锚点偏好。如下所示#xff0c;对对齐的更改也可以自动#xff08;并且容易地#xff09;动画…一、Alignment Guide 简介
Alignment guides 是一个强大的布局工具但通常未被充分利用。在很多情况下它们可以帮助我们避免更复杂的选项比如锚点偏好。如下所示对对齐的更改也可以自动并且容易地动画化 如果您曾经尝试过使用 alignment guides那么可能会对结果感到困惑。它们倾向于做期望它们做的事直到它们不做。在花了一些时间测试对齐指南的限制后可以得出结论它们确实有效。然而我们对它们的期望是困惑的。这种混淆来自于没有意识到有一整套隐式 alignment guides 在起作用当忽视它们时事情就不会如我们所愿容器中的每个 View 都有 alignment guides。alignment guides 基本上是一个数值它在视图中设置一个点该点决定了该视图相对于其他视图的位置。注意对齐可以是垂直的也可以是水平的。假设有三个视图A, B 和 C它们的水平导线分别为0零、20 和 10视图将被定位使视图 A 的起始点从起始点算零与视图 B 的第 20 个水平点和视图 C 的第 10 个水平点对齐 同样的概念适用于垂直对齐 从这些例子中可以看到垂直容器VStack需要水平对齐而水平容器HStack需要垂直对齐。乍一看可能很奇怪但如果仔细看这些图片就会意识到这完全有道理。首先要说明的是可以指定像 .leading 开头然而在每种情况下它都有完全不同的含义 分析说明 Container Alignment规定哪些 alignmentGuides() 可以忽略哪些可以不忽略但是它还为所有包含的视图定义了隐式 alignment guides这些视图没有 explicit guide Alignment Guide除非此值与 Container Alignment 参数匹配否则在布局期间将忽略此指南 Implicit Alignment Value它是一个数值指示它所修改的视图的指南的位置有一些方便的预设值如 d.width、d[.leading]、d[.center] 等但最终返回的是一个数值这是与给定指南关联的默认隐式值 Explicit Alignment Value它是一个数值指示它所修改的视图的指南的位置这是一个显式值即由以编程方式定义的值 Frame Alignment指示容器内所有包含的视图如何对齐作为一个唯一的组 Text Alignment对于多行文本视图它指定文本行如何在文本视图内对齐。
二、Implicit Alignments 和 Explicit Alignments
容器中的每个视图都有对齐方式之所以强调它是因为它是需要记住的最重要的概念之一。当通过调用 .alignmentGuide() 定义对齐方式时对齐方式是显式的。当不指定它时它是隐式的隐式对齐的值将由容器视图中的对齐参数提供例如 VStack(alignment: .leading))。你可能想知道如果不为 VStack、HStack 或 ZStack 指定对齐参数会发生什么它们确实有违约所有情况下都是 .center。
三、ViewDimensions
到目前为止已经看到在. alignmentguide() 修饰符的 computeValue 闭包中将对齐指南指定为 CGFloat它是一个必须返回的任意数。如果没有数据的话计算这样的数字是很有挑战性的。来看看 .alignmentGuide() 方法的声明
func alignmentGuide(_ g: HorizontalAlignment, computeValue: escaping (ViewDimensions) - CGFloat) - some View
func alignmentGuide(_ g: VerticalAlignment, computeValue: escaping (ViewDimensions) - CGFloat) - some View这是一个重载方法有两个版本一个用于水平参考线一个用于垂直参考线。但是这个方法最有趣的地方是 computeValue 闭包为我们提供了一个 ViewDimensions 类型的参数。这个类型是一个结构体包含一些关于创建对齐指南的视图的有用信息
public struct ViewDimensions {public var width: CGFloat { get } // The views widthpublic var height: CGFloat { get } // The views heightpublic 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 }
}最容易算出的是宽度和高度它们控制着正在处理的视图的宽度和高度。但是有那些令人费解的下标方法它们接收一个 HorizontalAlignment 或 VerticalAlignment 值作为它们的索引来看看如何访问它们
Text(Hello).alignmentGuide(HorizontalAlignment.leading, computeValue: { d in return d[HorizontalAlignment.leading] d.width / 3.0 - d[explicit: VerticalAlignment.top]})当探索 HorizontalAlignment VerticalAlignment 和 align 类型时将会看到这些值是什么。
四、Alignment 的歧义使用
大多数情况下不需要像这样指定对齐方式的全名
d[HorizontalAlignment.leading] d.width / 3.0 - d[explicit: VerticalAlignment.top]编译器可以推断出是在谈论水平对齐还是垂直对齐因此可以简单地使用
d[.leading] d.width / 3.0 - d[explicit: .top]然而在某些情况下编译器可能会抱怨对对齐的模糊使用特别是在使用 .center 值时这是因为 .center 值有两种类型HorizontalAlignment.center 和 VerticalAlignment.center。当编译器无法推断正在使用的类型时可能需要指定全名。
五、HorizontalAlignment 和 VerticalAlignment 的类型
当一个 ViewDimension 值被一个类型为 HorizontalAlignment 的索引访问时可以获得视图的前缘视图的中心或视图的后缘
extension HorizontalAlignment {public static let leading: HorizontalAlignmentpublic static let center: HorizontalAlignmentpublic static let trailing: HorizontalAlignment
}索引可以通过两种方式指定
d[.trailing]
d[explicit: .trailing]第一个是隐式值这意味着给定对齐类型的默认值。对于 .center 的 .leading, width/2.0 通常为 0对于 .trailing它是宽度。VerticalAlignment 就像 HorizontalAlignment但它有更多的兴趣点除了 .top、.center 和 .bottom也可以得到 firstTextBaseline最上面的文本基线和 lastTextBaseline最下面的文本基线。
extension VerticalAlignment {public static let top: VerticalAlignmentpublic static let center: VerticalAlignmentpublic static let bottom: VerticalAlignmentpublic static let firstTextBaseline: VerticalAlignmentpublic static let lastTextBaseline: VerticalAlignment
}如前所述ZStack 容器需要一种方法来指定两种对齐方式一个 horizontal 对齐一个 vertical 对齐。为此有了 Alignment 类型它结合了这两者。例如如果想要顶部垂直对齐和顶部水平对齐有两个选择
ZStack(alignment: Alignment(horizontal: .leading, vertical: .top)) { ... }ZStack(alignment: .topLeading) { ... }当开始使用自定义对齐指南时第一个选项将是有意义的。
六、Container Alignment 和 Frame Alignment
① Container Alignment
容器视图VStack、HStack 或 ZStack 中的对齐参数有两个效果 确定哪些 .alignmentguides() 与布局相关所有与容器参数中的对齐方式不同的对齐指南将在布局期间被忽略 它为那些没有显式对齐集的视图提供隐式对齐指南。 在下面的动画中可以看到如何更改容器中的对齐参数将在布局期间改变有效的对齐参考线 如果更改 withAnimation 块中的对齐方式视图将移动到它们的新位置。
② Frame Alignment
到目前为止看到的所有对齐都是关于如何定位视图一旦确定了这一点布局系统需要将整个组定位在容器内。通过提供frame(alignment:)正在告诉系统如何这样做。如果不指定则该组将在其容器内居中。 通常情况下改变框架对齐不会产生任何影响这不是一个 bug。在大多数情况下容器是紧的也就是说容器足够大可以容纳所有视图但不能再多一个像素。因此在 frame() 修饰符中使用.leading, .center 或 .trailing 将不起作用因为视图组已经使用了所有的空间。它不能移动到任何一边因为没有空间。
七、Multiline Text Alignment()
这个很简单也很直接当有一个包含多条行的 Text 视图时它将决定行之间如何对齐 八、与 Alignment Guides 交互
为了本文创建一个有用的学习工具它将探索到目前为止学到的东西最好在 iPad上 以横向模式运行代码如果没有 iPad可以使用模拟器 使用“Show in Two Phases”选项来了解对齐是如何工作的可以看到对齐指南如何移动到它的新位置然后如何移动视图以使所有指南实际对齐。需要注意的是通常情况下所有这些都是同时发生的。但是为了更好地理解这个过程这个选项将其分为两个部分。尝试方法如下 试试 frame(alignment:) 参数看看它是如何在窄容器和宽容器中工作的应该注意到当我们的容器是紧的时这个参数将不起作用 更改容器的对齐方式注意只要对齐指南的类型相同更改就不会产生任何影响唯一会移动的视图是具有隐式对齐的视图这是因为它是唯一具有不同对齐值的视图 通过与视图交互测试不同的预设对齐值可以将对齐参考线设置为 .leading按 L 键.center按 C 键.trailing按 T 键 通过与视图交互测试不同的任意对齐值点击黄色条选择对齐点 测试小于零或大于视图宽度的对齐值要做到这一点请延长黄色条当测试不同的值时试着在点击屏幕之前预测会发生什么。
九、自定义 Alignments
现在我们知道标准对齐是如何工作的创建一个自定义对齐来看看第一个例子的代码并分析它的作用
extension HorizontalAlignment {private enum WeirdAlignment: AlignmentID {static func defaultValue(in d: ViewDimensions) - CGFloat {return d.height}}static let weirdAlignment HorizontalAlignment(WeirdAlignment.self)
}当定义自定义对齐时正在做两件事 确定它是水平的还是垂直的 为隐式对齐即没有显式调用. alignmentguide() 的视图提供默认值。 通过使用高度作为默认对齐方式它创造了一种有趣的效果 struct CustomView: View {var body: some View {VStack(alignment: .weirdAlignment, spacing: 10) {Rectangle().fill(Color.primary).frame(width: 1).alignmentGuide(.weirdAlignment, computeValue: { d in d[.leading] })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 d[.leading] })}}
}struct ColorLabel: View {let label: Stringlet color: Colorlet height: CGFloatvar body: some View {Text(label).font(.title).foregroundColor(.primary).frame(height: height).padding(.horizontal, 20).background(RoundedRectangle(cornerRadius: 8).fill(color))}
}十、Aligning Non-Siblings
在前面的示例中已经看到了如何创建自定义对齐但这有什么意义呢没有自定义对齐也可以实现相同的结果使用自定义对齐的真正好处是使用它们来对齐位于视图层次结构不同分支上的视图。来看下一个例子 如果分析这个视图的组件将意识到我们需要将图像与文本视图对齐但它们不属于同一个容器 图像和文本视图都有一个共同的容器HStack因此将创建一个自定义对齐以匹配它们的中心点。重要的是要记住适当地设置公共容器的对齐参数。
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 1let 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 inGroup {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)}
}您可能想知道所有没有明确指定垂直对齐的文本视图怎么办它们不打算用隐式值吗如果是这样它们不都是一个叠在另一个上面吗都是有效的问题。这是对齐指南的另一个令人困惑的事实。然而在这种情况下我们处理的是 VStack而不是 ZStack这意味着它里面的所有视图都必须垂直堆叠。Alignment guides 不会破坏这一点布局系统将使用所选视图中的显式对齐来对齐箭头图像其他没有明确指南的文本视图将相对于有明确指南的文本视图进行定位。
十一、ZStack 自定义对齐 Alignment
如果需要为 ZStack 创建自定义对齐这里有一个模板
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 guides 是多么强大一旦了解了它们能提供什么它们就会变得更有意义。为了获得更好的体验应该记住以下几点 容器中的每个视图都有 alignment guides如果未显式指定则由容器的对齐参数确定 在布局期间与容器对齐参数中指定的类型不同的 alignment guides 将被忽略。 VStack 使用水平对齐而 HStacks 使用垂直对齐 如果容器是紧密的则 frame 方法中的对齐参数将没有视觉效果 当来自视图层次结构不同分支的两个视图需要彼此对齐时需要自定义 alignment guides。 本文中的大多数示例使用水平对齐但是相同的概念也适用于垂直对齐。
