Alignment

📘 手冊

• SwiftUI ⟩ View ⟩ Layout ⟩

  • Aligning Views Within a Stack

  • Aligning Views Across Stacks - align views across multiple stacks

  • alignmentGuide(_:computeValue)

  • ViewDimensions

📗 參考

• SwiftUI Lab ⟩ Alignment Guides in SwiftUI

• Swift with Majid ⟩ Alignment guides in SwiftUI

Align Within a Stack

cases

1. default alignment

2. built-in alignments

3. adjust alignment guide of indivisual views

1

default alignment (.center)

ZStack {

    /// ⭐️ 1. default alignment: `.center`
    HStack {
        Image(systemName: "mic")
        Text("Connecting").font(.caption)
        Text("Bryan").font(.title)
    }
    
    .padding()
    .border(Color.blue, width: 1)
    .overlay(HLine(color: .orange))
}

2

built-in alignments

注意：一般的 Image 不支援 .firstTextBaseline，但 SF Symbols 支援。

ZStack {

    /// ⭐️ 2. built-in alignment:
    HStack(alignment: .firstTextBaseline) {
        Image(systemName: "mic")
        Text("Connecting").font(.caption)
        Text("Bryan").font(.title)
    }
    
    .padding()
    .border(Color.blue, width: 1)
    .overlay(HLine(color: .orange), alignment: Alignment(
        horizontal: .center,
        vertical: .firstTextBaseline
    ))
}

3

ZStack {

    /// ⭐️ 3. adjust alignment guide of indivisual views
    HStack(alignment: .firstTextBaseline) {
        
        Image(systemName: "mic")
            /// ⭐️ 3.1
            /// When using `.alignmentGuide()`, make sure to specify an
            /// **active alignment** of the **stack** (`.firstTextBaseline`
            /// in this case). Otherwise, SwiftUI doesn’t invoke the closure
            /// to offset the view.
            .alignmentGuide(.firstTextBaseline) { dim in
                /// ⭐️ 3.2 將對齊線(alignment guide)調到 image 正中央
                dim[VerticalAlignment.center]   // = dim[.bottom] - 0.5 * dim.height
            }
        
        Text("Connecting").font(.caption)
        Text("Bryan").font(.title)
    }
    
    .padding()
    .border(Color.blue, width: 1)
    .overlay(HLine(color: .orange), alignment: Alignment(
        horizontal: .center,
        vertical: .firstTextBaseline
    ))
}

Align Across Stacks

By default, the alignment you specify for a stack applies only to that stack’s child views.

cases

1. use custom alignment

2. use built-in alignment

1

align across stacks

/// ⭐️ 1. Define a Custom Alignment
extension VerticalAlignment {
    
    /// ⭐️ 1.1 define custom alignment for image titles.
    private struct ImageTitleAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            // default to bottom alignment if no guides are set.
            context[VerticalAlignment.bottom]
        }
    }

    /// ⭐️ 1.2 define a convenience alignment guide name
    static let imageTitle = VerticalAlignment(
        ImageTitleAlignment.self
    )
}

struct AcrossStacks: View {
    var body: some View {
        
        /// ⭐️ 2. Assign custom alignment to parent view
        ///       When you assign an alignment on a stack,
        ///       it projects through enclosed child views.
        HStack(alignment: .imageTitle, spacing: 32) {
            
            VStack {
                Image(systemName: "bell")
                    .resizable().scaledToFit().padding().foregroundColor(.red)
                Text("Bell Peppers").font(.title)
                    /// ⭐️ 3. Within each nested stack, apply `.alignmentGuide()`
                    ///       to the view you want to align with.
                    .alignmentGuide(.imageTitle) { dim in
                        dim[.firstTextBaseline]
                    }
            }
            
            VStack {
                Image(systemName: "memorychip")
                    .resizable().scaledToFit().padding().foregroundColor(.green)
                Text("Chili Peppers").font(.title)
                    /// ⭐️ 3.
                    .alignmentGuide(.imageTitle) { dim in
                        dim[.firstTextBaseline]
                    }
                Text("Higher levels of capsicum").font(.caption)
            }
        }.overlay(HLine(), alignment: Alignment(horizontal: .center, vertical: .imageTitle))
    }
}

2

align across stacks using bult-in alignment

/// ⭐️ parent stack
HStack(alignment: .firstTextBaseline) {
    
    // nested stack
    HStack(alignment: .firstTextBaseline) {
        image
        text
    }
    
    // nested stack
    HStack(alignment: .firstTextBaseline) {
        image
            // ⭐️ 對齊線 (alignment guide) 往下 (+) 會讓 image 往上飄
            .alignmentGuide(.firstTextBaseline) { d in 
                d[.bottom] + d.height 
            }
        text
    }
    
    // nested stack
    HStack(alignment: .firstTextBaseline) {
        image
            // ⭐️ 對齊線 (alignment guide) 往上 (-) 會讓 image 往下沈
            .alignmentGuide(.firstTextBaseline) { d in 
                d[.bottom] - d.height 
            }
        text
    }
    
}.baseLine()

extensions

import SwiftUI

extension View {
    
    /// ⭐️ left border
    func borderLeft(color: Color = .red, width: CGFloat = 1) -> some View {
        overlay(VLine(color: color, width: width), alignment: .leading)
    }
    
    /// ⭐️ bottom border
    func borderBottom(color: Color = .red, width: CGFloat = 1) -> some View {
        overlay(HLine(color: color, width: width), alignment: .bottom)
    }
    
    /// ⭐️ base line
    func baseLine() -> some View {
        overlay(HLine(), alignment: Alignment(
            horizontal: .center,
            vertical: .firstTextBaseline
        ))
    }
}

/// ⭐️ horizontal line
struct HLine: View {
    var color: Color = .red
    var width: CGFloat = 1
    var body: some View {
        Rectangle().fill(color).frame(height: width)
    }
}

/// ⭐️ vertical line
struct VLine: View {
    var color: Color = .red
    var width: CGFloat = 1
    var body: some View {
        Rectangle().fill(color).frame(width: width)
    }
}