SwiftUI Field Guide

Welcome to the SwiftUI Field Guide

We built this interactive guide to help you build an intuition of how the SwiftUI layout system works. We're happy to get any feedback, do send us an email.

Featured Topics

Safe Area

Safe Area

Learn how builtin views interact with the safe area and how to modify the safe area

Layout Protocol

Layout Protocol

Learn how to animate between layouts and write a custom layout.

Alignment

Alignment

Align views using builtin alignment guides, modify alignment guides and create custom alignment IDs.

Stacks

Stacks

Learn about how stacks distribute available space and align their children.

Changelog

Apr 28, 2024

Dynamic Type

Dynamic Type allows us to scale fonts based on the user's preferences. By combining it with scaled metrics we can make other values scale as well.

Apr 15, 2024

LazyVGrid

We added a new page about LazyVGrids. These are a great way to display a grid of items with a large number of items.

Apr 5, 2024

ZStack

We added a new page about ZStacks (and how they compare to overlay and background).

Mar 18, 2024

Safe Area

We added a new page about the safe area and how to use it in SwiftUI.

Mar 1, 2024

Introduction

We finally added an introduction to the layout system, as well as a page with useful debugging techniques.

Feb 26, 2024

Custom Alignment IDs

We show how custom alignment IDs help us align views that do not have a direct common parent.

Feb 22, 2024

Flow Layout

We show how to build a flow layout using the Layout protocol, with annotated example code.

Feb 19, 2024

Stack Alignment

We added an example showing alignment within an HStack. The width distribution visualizations now also have sliders.

Feb 16, 2024

Custom Shapes

We added a section about custom shapes and stroke styles.

Feb 15, 2024

Hello, world!

We're live now, welcome to the first public release. Keep an eye on this page to see future changes.