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:
- The vertical alignment, of type VerticalAlignment
- 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:
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.