Mastering Custom Alignment in SwiftUI: Fine-Tuning Layout Precision

In this story, I want to talk about Custom Alignment in SwiftUI.
Alignment in SwiftUI offers immense flexibility in arranging and positioning elements within your app’s interface. However, there are times when the standard alignment options fall short. This post will guide you through creating custom alignment in SwiftUI, enriching your UI design toolkit.

What is Custom Alignment?

Standard alignment options like .leading, .trailing, and .center are fantastic, but sometimes, our designs demand more precise alignments. Custom alignment in SwiftUI steps in to meet those specific layout needs.

For example, here’s a card view, that has a title label and image on the left, and title value and content on the right.

HStack {
    VStack {
        Text("Title:")
        Image(systemName: "person.circle")
            .resizable()
            .frame(width: 64, height: 64)
    }

    VStack {
        Text("My Title")
        Text("My Content")
            .font(.largeTitle)
    }
}

If you want “Title:” and “My Title” to be vertically aligned together, you might find it challenging at the moment. The horizontal stack contains two vertical stacks inside it, so there’s no built-in way to achieve the alignment you want — attributes like HStack(alignment: .top) won’t quite achieve this.
To fix this, Custom Alignment comes to the rescue.

Building Custom Alignment Guides

SwiftUI allows us to create our own alignment guides using the alignmentGuide modifier. Consider the following example:

extension VerticalAlignment {
    private enum CardViewAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            // Define custom alignment logic here
            context[.top]
        }
    }

    static let cardViewAlignment = VerticalAlignment(CardViewAlignment.self)
}

In this example, we create a custom vertical alignment named cardViewAlignment. The defaultValue function defines the alignment logic based on the .top edge in this case.

How to use Custom Alignment

Once the custom alignment guide is defined, we can apply it to views within our layout:

HStack(alignment: .cardViewAlignment) {
    VStack {
        Text("Title:")
            .alignmentGuide(
                .cardViewAlignment, computeValue: { dimension in
                    dimension[VerticalAlignment.center]
                }
            )
        Image(systemName: "person.circle")
            .resizable()
            .frame(width: 64, height: 64)
    }

    VStack {
        Text("My Title")
            .alignmentGuide(
                .cardViewAlignment, computeValue: { dimension in
                    dimension[VerticalAlignment.center]
                }
            )
        Text("My Content")
            .font(.largeTitle)
    }
}

Here, we set it as the alignment for our stack and then use the alignmentGuide modifier to apply it on any views we want to align together.

Custom alignment guides shine in complex layouts. Whether aligning specific elements or achieving intricate alignments, they empower us to craft pixel-perfect designs.

Conclusion

Custom alignment in SwiftUI expands the possibilities for precise and tailored layouts. Whether aligning elements uniquely or achieving intricate designs, leveraging custom alignment guides elevates the finesse and polish of your app’s user interface.

By mastering custom alignment in SwiftUI, you’ll possess a powerful toolset to create elegant and precisely arranged UIs that stand out.

Crafting SwiftUI UIs: Leveraging Composition with ViewModifiers and Custom Views