A code to add custom alignments to SwiftUI views

custom_alignments.swift

import SwiftUI

extension VerticalAlignment {

    // A custom vertical alignment to custom align views vertically
    private struct TopSectionTitlesAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            // Default to center alignment if no guides are set
            context[HorizontalAlignment.center]
        }
    }

    static let topSectionTitlesAlignment = VerticalAlignment(TopSectionTitlesAlignment.self)
}

struct CustomVerticalAlignment: View {
    var body: some View {
        HStack(alignment: .topSectionTitlesAlignment) {
            VStack {
                Text("Top Leading Text\nAnother line")
                    .border(Color.red, width: 1.0)
                    .padding(.all, 8)
                    .alignmentGuide(.topSectionTitlesAlignment) {
                        d in d[VerticalAlignment.center]
                    }

                Text("Bottom Leading")
                    .border(Color.blue, width: 1.0)

            }
            .border(Color.yellow, width: 1.0)

            Rectangle()
                .fill(Color.black)
                .frame(height: 1)
                .alignmentGuide(.topSectionTitlesAlignment) { d in
                    d[VerticalAlignment.center]
                }

            VStack {
                Text("Top Trailing Text\nAnother line")
                    .border(Color.red, width: 1.0)
                    .padding(.all, 8)
                    .alignmentGuide(.topSectionTitlesAlignment) { d in
                        d[VerticalAlignment.center]
                    }

                Text("Bottom Trailing")
                    .border(Color.blue, width: 1.0)

            }
            .border(Color.yellow, width: 1.0)

        }
        .padding()
        .border(Color.black, width: 1.0)
    }
}

extension HorizontalAlignment {

    // A custom horizontal alignment to custom align views horizontally
    private struct CustomHorizontalAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            // Default to center alignment if no guides are set
            context[VerticalAlignment.center]
        }
    }

    static let customHorizontalAlignment = HorizontalAlignment(CustomHorizontalAlignment.self)
}

struct CustomHorizontalAlignment: View {
    var body: some View {
        VStack(alignment: .customHorizontalAlignment) {
            Text("Top Text Label")
                .padding()
                .border(Color.red, width: 1.0)
                .alignmentGuide(.customHorizontalAlignment) { d in
                    d[HorizontalAlignment.center]
                }
            HStack {
                Text("Bottom Text Label")
                    .padding()
                    .border(Color.orange, width: 1.0)
                    .alignmentGuide(.customHorizontalAlignment) { d in
                        d[HorizontalAlignment.center]
                    }
                Image(systemName: "phone")
                    .border(Color.blue, width: 1.0)
            }
        }.padding().border(Color.black, width: 1.0)
    }
}

struct CustomAlignment_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            CustomVerticalAlignment()
            CustomHorizontalAlignment()
        }
    }
}