SwiftUI’s Layout Magic

A New Way of Thinking

As Apple put it during their 2019 WWDC, the new SwiftUI declarative views may be considered recipes. Each containing instructions on how to build themselves. Following on this food analogy, imagine you have the main recipe, which in turn is made of other preparations. A sauce, grilled fish, garnish, etc. Each preparation has its own recipe. At the end, you put everything together, and you have your final dish. In this case, the dish is your app’s UI.

Of course you already know this. You can only code for 2 or 3 minutes with SwiftUI, before you find yourself encapsulating your own custom views.

At first, it’s all wonderful and magic. SwiftUI takes care of padding, alignment, sizing. It’s all joy! Every view fits perfectly with the rest. Well, it’s all joy, until it isn’t. It is only a matter of time, before you need to start worrying about how much space your view gets to build itself. Is the area to draw the view a vertical rectangle? a square? How big? Is it at the top of the screen? At the bottom?

These are all valid questions, but unfortunately, Apple has ignored them completely during the presentation of their framework. And they didn’t stop there: they also excluded these topics from the official documentation.

In my opinion, I think that was intentional and I believe I can see the wisdom in that. The ongoing message we got during the WWDC was: start thinking about views differently. We should not care too much about layout, but about functionality. That is the wonder of the declarative approach after all. Yes, they do mention frame() and possibly other methods too, but the most interesting features are left unspoken.

Although at first frustrating, I think it is the right approach. By doing so, they have forced us to try our best to achieve our goals without resorting to “old habits”. Granted, eventually you reach a point where you already exhausted all the documented bits of the framework. Hopefully though, when you reach this point, you have already assimilated the “new way” of thinking declaratively and no longer have to worry about falling into the aforementioned “old habits”. If I guessed it correctly, this lack of documentation, is nothing more than Apple showing us some tough love.

Since you are here, you probably already reached this assimilation point. If so, you are ready to dive into these hidden gems. So let’s get on with it.

Lets begin by finding our north, with GeometryReader to the Rescue