跳转至
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
        }
    }
}

A view containing a ZStack with center horizontal alignment and top vertical alignment and the text "I'm top aligned 🤠"; The text is displayed at the top center of the frame.

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
        }
    }
}

A view containing a ZStack with bottomLeading alignment and the text "Move me around 🤠"; The text is displayed in the bottom left corner of the frame.

Using an Alignment

This structure is used in 4 places:

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

A view containing a clear background with the text view "Move me around 🤠" and text alignment leading; The text is displayed on the leftmost edge halfway down the frame.

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.