Follow along at https://www.hackingwithswift.com/100/swiftui/92.
This day covers Part One of Project 18 in the 100 Days of SwiftUI Challenge.
It focuses on several specific topics:
- Layout and geometry: Introduction
- How layout works in SwiftUI
- Alignment and alignment guides
- How to create a custom alignment guide
From the project description:
In this technique project we’re going to explore how SwiftUI handles layout.
...
Along the way you’ll also learn about creating more advanced layout alignments, building special effects using GeometryReader, and more.
-
A parent view proposes a size for its child.
-
Based on that information, the child then chooses its own size and the parent must respect that choice.
-
The parent then positions the child in its coordinate space.
A key insight to go along with this is that modifiers make containers. As such, every modifier becomes the parent of a child view its attached to, and this three-step process is performed anew.
A neat way to think of alignment is that it refers to how a view is pinned on its main axis.
For horizontal views, the main axis is a horizontal line, so the pinning refers to a vertical adjustment.
For vertical views, the main axis is a vertical line, so the pinning refers to a horizontal adjustment.
Alignment guides are basically the way that views configure their layout with respect to their current alignment. It makes sense once you start using them 😛.
A key insight to go along with this is that alignment guide computation is distinct from offsetting. Using the offset modifier will move a view relative to its container; alignment guides will compute the view's layout position -- and the container will be defined as the resulting perimeter.
Exhibit A:
extension VerticalAlignment {
enum CustomAlignment: AlignmentID {
static func defaultValue(in dimensions: ViewDimensions) -> CGFloat {
dimensions[VerticalAlignment.center]
}
}
static let customAlignment = VerticalAlignment(CustomAlignment.self)
}