Structure

Alignment

An alignment in both axes.

---

Declaration

@frozen struct Alignment : Equatable

---

Overview

Use this structure to align a view when it has both a vertical and horizontal degree of freedom.

What is an Alignment?

An alignment is made up of 2 properties:

1. The vertical alignment, of type VerticalAlignment
2. The horizontal alignment, of type HorizontalAlignment

Each of those axes have their own options and initializers. To create an Alignment, you can set both properties directly using the initializer, or choose one of Alignment's static properties.

The Alignment initializer

You can also create your own alignments from the init(horizontal:vertical:) initializer

• Note: The clear color is added to expand the view to the entire screen, so that the alignment movement can be seen

struct ContentView: View {
    let alignment = Alignment(horizontal: .center, vertical: .top)

    var body: some View {
        ZStack(alignment: alignment) {
            Text("I'm top aligned 🤠")
            Color.clear
        }
    }
}

The Alignment static properties

There are 9 out-of-the-box alignments:

1. topLeading
2. top
3. topTrailing
4. leading
5. center
6. trailing
7. bottomLeading
8. bottom
9. bottomTrailing

struct ContentView: View {
    var body: some View {
        ZStack(alignment: Alignment.bottomLeading) { //Try changing this!
            Text("Move me around 🤠")
            Color.clear
        }
    }
}

Using an Alignment

This structure is used in 4 places:

• ZStack, in the initializer
• overlay(_:alignment:), in the view modifier
• background(_:alignment:), in the view modifier
• frame(width:height:alignment:), in the view modifier

struct ContentView: View {
    var body: some View {
        Color.clear
            .background(
                Text("Move me around 🤠"),
                alignment: .leading
            )
    }
}

Availability

iOS 13.0+

macOS 10.15+

tvOS 13.0+

watchOS 6.0+

Topics

---

Type Property

bottom A guide marking the bottom edge of the view.

bottomLeading A guide marking the bottom and leading edges of the view.

bottomTrailing A guide marking the bottom and trailing edges of the view.

center A guide marking the center of the view.

leading A guide marking the leading edge of the view.

top A guide marking the top edge of the view.

topLeading A guide marking the top and leading edges of the view.

topTrailing A guide marking the top and trailing edges of the view.

trailing A guide marking the trailing edge of the view.

---

Type Method

==(a:b:) Returns a Boolean value indicating whether two values are equal.

---

Instance Property

horizontal The alignment on the horizontal axis.

vertical The alignment on the vertical axis.

---

Initializer

init(horizontal:vertical:) Creates an instance with the given horizontal and vertical alignments.