SwiftUI: How to align views (horizontal alignments)

Alignments are critical in the building of the UI. In the previous post, we have covered vertical alignments, but in this one, we will focus on horizontal alignments.

In the following example, we have two colors and one text with the background set up.

struct HorizontalAlignmentExample: View {
    var body: some View {
        VStack{
            Color.red.frame(width: 100, height: 25)
            Text("Hello vertical alignment").font(.headline).foregroundColor(Color.white).background(Color.blue)
            Color.green.frame(width: 250, height: 25)
            }.frame(width: 300, height: 200).background(Color.yellow)
    }
}

To demonstrate all alignments, we are going to add an alignment parameter to our VStack:

struct ExmpleView: View {
    var body: some View {
        VStack(alignment: .center){ //<--- Here
            ....
        }
    }
}

Leading

    HStack(alignment: .leading) {...}

Center

​ By default, we have a center alignment, and that is why it doesn’t differ from our initial example.

    VStack(alignment: .center) {...}

Is equal to:

    HStack{...} 

Trailing

    VStack(alignment: .trailing) {...}