Borders

It seems a little odd to write a post about borders, since every post so far has already used them without calling them out. In all of the examples I’ve added borders to views and used the result in the previews, rather than drawing them in by hand. But I haven’t actually shown the code […]

Geometry Reader

For most layout needs we can combine stacks and flexible frames, allowing us to make views and controls put together from fixed size primitives views upwards. For more complex layout needs, another option is to use GeometryReader. This is a construct that acts like an infinite frame, proposing the size of its parent to its […]

Secondary Views in Practice

A secondary view, be it background or overlay, can be any view. We know from flexible frames that we can create views of fixed sizes, sizes based on their children, or sizes based on their parent. And we saw above that the proposed size of a secondary view is the fixed size of a parent. […]

Padding

In views have fixed sizes, we introduced the idea that all views in SwiftUI are fixed in size, for example a Text view has the size required to render the string provided: Creates a view with the exact bounds necessary: We also showed that the .frame modifier actually creates a new view with the dimensions […]

Exploding Stacks

A common layout desire is to place views in the corner of a larger view, or of the device. This is particularly interesting because it’s more instructive to visit the methods that don’t work and explain why, before showing the best way to do it. Our desired result is as follows: We’ll concentrate first on […]

Secondary Views

Secondary views are one of the more interesting layout tools available in SwiftUI, to understand them first we have to recall that views have fixed sizes. To recap the process: Parent proposes a size to its child. Child decides on its size. Parent positions the child within its bounds. Secondary views are useful because of […]

Combining Stacks

In the post about stacks we looked at the individual tools of horizontal, vertical, and z-axis stacks. When used on their own they’re useful ways of laying out views along a single axis. But when used together they’re a powerful way of creating even the most complicated layouts. Let’s continue our example of a character […]

Flexible Frames

In my first post I showed that in SwiftUI views choose their own sizes, derived from the size of their content, but that that they can be flexible about what size they choose based on the size proposed by their parent. In the post about stacks we showed that the size chosen by a stack […]

Alignments

In this post I’ll discuss how alignments work in SwiftUI, building our understanding of how they function, and finishing by demonstrating how to create your own custom alignments for specific needs. Let’s start by taking a simple view that lays out horizontally three images of different heights: If you haven’t read my post about stacks, […]

Stacks

The three most important layout tools in your SwiftUI toolbox are the three kinds of stacks: horizontal, vertical, and z-axis (yes, there really is no good adjective for this one). These views are parents to multiple children, and in order to fully understand how these lay them out, you should first understand that views choose […]