SwiftUI - Alignment Guides（对齐指南）

LGL
389 阅读3分钟

在 SwiftUI 中，Alignment Guides（对齐指南） 是一种强大的机制，用于控制视图在其父容器中的对齐方式。默认情况下，SwiftUI 的布局容器（如 HStack、VStack、ZStack 等）会自动根据某些预设的对齐规则对视图进行布局。不过，借助 Alignment Guides，你可以灵活地自定义对齐方式，甚至为复杂的布局场景定义自适应的对齐行为。

Alignment Guide 的工作原理

Alignment Guides 定义了视图在布局中的对齐方式和位置。每个视图都有一个默认的对齐方式，但可以通过 .alignmentGuide() 方法来自定义某个视图的对齐点。

Alignment Guide 的核心概念

  1. View Dimensions：SwiftUI 中每个视图都有自己的维度，即 ViewDimensions，其中包含视图的宽度、高度以及与父布局的对齐点。

  2. Alignment Guide 计算：你可以通过 .alignmentGuide() 来自定义对齐方式，SwiftUI 会根据你提供的计算规则来调整视图的位置。

  3. Alignment ID：用于标识某种对齐方式，它是一个 AlignmentID 协议的实例，通常与 HorizontalAlignment 或 VerticalAlignment 结合使用。

常见对齐方式

SwiftUI 中自带了一些常见的对齐方式：

  • 水平对齐：

    • .leading：视图靠左对齐
    • .center：视图在容器中水平居中对齐
    • .trailing：视图靠右对齐

  • 垂直对齐：

    • .top：视图靠顶部对齐
    • .center：视图在容器中垂直居中对齐
    • .bottom：视图靠底部对齐

自定义对齐指南

你可以通过扩展 HorizontalAlignment 或 VerticalAlignment 来创建自定义对齐方式。

如何使用 Alignment Guide

通过 .alignmentGuide() 修改某个视图的对齐点：

Text("Hello, world!")
    .alignmentGuide(.leading) { viewDimensions in
        viewDimensions[HorizontalAlignment.center]
    }

在这个例子中，Text 视图的对齐点被设置为它的中心，而不是默认的 .leading。这意味着该视图在容器中将会根据中心位置来对齐，而不是按常规的左对齐规则。

自定义 Alignment Guide 示例

假设你需要一个自定义对齐规则，例如：让某些视图以某个特殊位置对齐，可以这样定义：

步骤1：定义自定义对齐方式

extension HorizontalAlignment {
    private enum CustomAlignment: AlignmentID {
        static func defaultValue(in dimensions: ViewDimensions) -> CGFloat {
            // 自定义对齐默认值为视图的中心
            return dimensions[HorizontalAlignment.center]
        }
    }
    
    static let custom = HorizontalAlignment(CustomAlignment.self)
}

步骤2：应用自定义对齐方式

struct CustomAlignmentView: View {
    var body: some View {
        VStack(alignment: .custom) {
            Text("First Line")
                .alignmentGuide(.custom) { d in d[HorizontalAlignment.leading] }
            Text("Second Line")
                .alignmentGuide(.custom) { d in d[HorizontalAlignment.trailing] }
            Text("Third Line")
                .alignmentGuide(.custom) { d in d[HorizontalAlignment.center] }
        }
    }
}

在这个例子中，VStack 使用自定义的 custom 对齐方式，而每个文本视图则根据不同的条件设置对齐点。

Alignment Guide 的应用场景

  1. 自定义选中指示器：如你之前提到的用法，通过 alignmentGuide 计算某个视图的对齐点，动态调整选中状态下的指示器位置。

  2. 复杂布局：在一些复杂的布局场景中，标准的对齐方式无法满足要求，可以通过自定义 Alignment Guides 来精确控制视图的对齐位置。

  3. 动画布局：使用 alignmentGuide 结合动画，可以实现视图动态变化时对齐点的平滑过渡效果。

总结

在这篇文章中，我们看到了Alignment guides的强大功能，一旦你能掌握它，将会变得更有意义，为此需要牢记以下几点：

  1. 容器中每个视图都有一个Alignment guide，如果没有显示指定，将使用容器的对齐参数；

  2. 在布局过程中，与容器对齐参数指定的类型不同的Alignment guide将被忽略；

  3. VStack使用HorizontalAlignment，而HStack使用VerticalAlignment；

  4. 如果容器很紧凑，.frame(alignment:)中的对齐参数可能不会产生视觉效果；

  5. 对齐不同层次结构中的视图时，就需要用到自定义对齐。

avatar
文章
阅读
粉丝