SwiftUI之深入解析布局如何自定义AlignmentGuides

SwiftUI 提供了视图不同边缘的对齐指南（.leading、trailing、top 等）以及 .center 和两个基线选项来帮助文本对齐。然而，当处理在不同视图之间分割的视图时，如果必须使在用户界面完全不同的两个视图部分对齐，这些方法都不能很好地很好解决问题。
为了解决类似的问题，SwiftUI 允许创建自定义的对齐辅助线，并在整个 UI 的视图中使用这些辅助线，在这些视图之前或之后发生什么并不重要，但它们仍然会排成一条线。
例如，下面的布局在左侧显示我的 CSDN 帐户名和我的个人资料头像，右侧显示 “CSDN ID：” 加上 “Forever_wj” 的大号字体：

struct ContentView: View {var body: some View {HStack {VStack {Text("@CSDN")Image("forever_wj").resizable().frame(width: 60, height: 60)}VStack {Text("CSDN ID:")Text("Forever_wj").font(.title)}}}
}

效果如下：

如果想让 “@CSDN” 和 “Forever_wj” 垂直对齐，那么现在就很难了。水平堆栈内部包含两个垂直堆栈，因此没有内置的方法来获得所需的对齐方式，像 HStack(alignment: .top) 这样的方便的方式。要解决这个问题，我们需要定义一个自定义布局指南，这应该是 VerticalAlignment 或 HorizontalAlignment 的扩展，并且是符合 AlignmentID 协议的自定义类型。
当说到“自定义类型”时，你可能会想到一个结构体，但实际上，我认为将其作为枚举来实现是一个更好的主意。AlignmentID 协议只有一个要求，即一致性类型必须提供一个静态 defaultValue(in:) 方法，该方法接受 ViewDimensions 对象并返回一个 CGFloat，指定“如果视图没有 alignmentGuide() 修饰符，该视图应该如何对齐“，将获得视图的现有 ViewDimensions 对象，因此可以选择其中一个作为默认值，也可以使用硬编码值。
具体实现如下所示：

extension VerticalAlignment {struct MidAccountAndName: AlignmentID {static func defaultValue(in d: ViewDimensions) -> CGFloat {d[.top]}}static let midAccountAndName = VerticalAlignment(MidAccountAndName.self)
}

可以看到，在默认情况下使用了 .top 视图维度，并且还创建了一个名为 midAccountAndName 的静态常量，以使自定义对齐更易于使用。
现在来分析一下为什么使用枚举比使用结构体更可取，原因如下：
- 刚刚创建了一个名为 MidAccountAndName 的新结构体，这意味着可以（如果需要的话）创建该结构体的实例，即使这样做没有任何意义，因为它没有任何功能；
- 如果将 struct MidAccountAndName 替换为 enum MidAccountAndName，那么就不能再创建它的一个实例了，它的存在只是为了容纳一些功能。
无论选择的是枚举还是结构体，其用法都保持不变：将其设置为堆栈的对齐方式，然后使用 alignmentGuide() 在要对齐的任何视图上激活它。这只是一个指南：它帮助我们沿一条直线对齐视图，但没有说明如何对齐视图，这意味着仍然需要为 alignmentGuide() 提供闭包，该闭包可以根据需要定位视图。
例如，可以将 CSDN 代码更新为 use.midAccountAndName，然后告诉帐户和名称使用其中心位置作为指南，明确地说，这意味着“对齐这两个视图，使它们的中心都位于 .midAccountAndName 指南上”：

struct ContentView: View {var body: some View {HStack(alignment: .midAccountAndName) {VStack {Text("@CSDN").alignmentGuide(.midAccountAndName) { d in d[VerticalAlignment.center] }Image("forever_wj").resizable().frame(width: 60, height: 60)}VStack {Text("CSDN ID:")Text("Forever_wj").alignmentGuide(.midAccountAndName) { d in d[VerticalAlignment.center] }.font(.title)}}}
}

那么效果就变成如下这样：

这将确保它们是垂直对齐的，不管前面或后面是什么，只要有了这个示例，那么在前后添加更多的文本视图，SwiftUI 将重新定位所有内容，以确保对齐的两个视图保持不变。

SwiftUI之深入解析布局如何自定义AlignmentGuides相关推荐

android 自定义布局根据布局获取类,阿里高级Android面试题解析：Android自定义View—布局过程的自定义...
自定义分三部分绘制.布局和触摸反馈,本篇主要讲的布局过程的自定义布局过程的含义布局过程,就是程序在运行时利用布局文件的代码来计算出实际尺寸的过程. 布局过程的工作内容两个阶段:测量阶段和布局阶段 ...
SwiftUI之深入解析高级动画的几何效果GeometryEffect
一.前言在我的博客 SwiftUI之深入解析高级动画的路径Paths 中,已经了解了 Animatable 的协议,以及如何使用它来动画路径.接下来,我们将使用相同的协议来动画变换矩阵,使用一个新的 ...
SwiftUI之深入解析如何处理特定的数据和如何在视图中适配数据模型对象
一.前言阅读了我的前两篇博客的朋友,应该都熟练掌握了 SwiftUI 如何创建一个任何相关信息的展示视图和各个视图之间的相互组合,以及动态生成一个展示相关信息的可滚动列表,用户可以点击列表项去查看其 ...
SwiftUI之深入解析如何创建列表展示视图和列表如何导航跳转新页面
一.前言地标详情页视图已经创建完成,我们需要提供一种方式让用户可以查看完整的地标列表,并且可以查看每一个地标的详情.地标详情页视图的创建,请参考我的博客:SwiftUI之深入解析如何创建和组合视图. ...
安卓自定义view中绘画基本图形点线面，矩形，方形，圆，扇形，文字及沿着特定方向布局，自定义圆角ImageView图片等等相关api使用方法及举例
安卓自定义view中绘画基本图形点线面,矩形,方形,圆,扇形,文字及沿着特定方向布局,自定义圆角ImageView图片等等相关api使用方法及举例,图片压缩处理逻辑本文旨在介绍自定义View的实现 ...
Android 动态解析布局，实现制作多套主题
之前做过一个项目(随心壁纸),主要展示过去每期的壁纸主题以及相应的壁纸,而且策划要求,最好可以动态变换主题呈现方式,这样用户体验会比较好.嗯,好吧,策划的话,咱们也没法反驳,毕竟这样搞,确实很不错.于 ...
android动态布局实例教程,Android 动态解析布局，实现制作多套主题
问题背景: 之前做过一个项目(随心壁纸),主要展示过去每期的壁纸主题以及相应的壁纸,而且策划要求,最好可以动态变换主题呈现方式,这样用户体验会比较好.嗯,好吧,策划的话,咱们也没法反驳,毕竟这样搞,确 ...
iOS SwiftUI篇-3 排版布局layout
iOS SwiftUI篇-3 排版布局layout swiftUI提供的layout有: ZStack.GeometryReader.HStack.LazyVGrid.LazyHStack.LazyH ...
python 跳过迭代_Python迭代和解析(4)：自定义迭代器
Python迭代和解析(4):自定义迭代器发布时间:2019-01-13 17:10, 浏览次数:280 , 标签: Python 解析.迭代和生成系列文章:https://www.cnblogs. ...

SwiftUI之深入解析布局如何自定义AlignmentGuides

SwiftUI之深入解析布局如何自定义AlignmentGuides相关推荐

最新文章

热门文章