Layout and geometry: Wrap up

Paul Hudson    @twostraws    December 25th 2019

I hope this smaller technique project proved a welcome break after our long app projects, but I hope even more that you’re really starting to have a good mental model of how SwiftUI’s layout system works. That three step layout system might sound simple, but it takes time to fully understand the ramifications it has.

As for GeometryReader, it’s one of those things you can get by perfectly fine without even thinking about, and that’s fine. But when you want to add a little pizazz to your designs – when you want to really bring something to life as the user interacts with it – GeometryReader is a fast and flexible fix that offers a huge amount of power in only a handful of lines of code.

Review what you learned

Anyone can sit through a tutorial, but it takes actual work to remember what was taught. It’s my job to make sure you take as much from these tutorials as possible, so I’ve prepared a short review to help you check your learning.

Click here to review what you learned in this project.

Challenge

One of the best ways to learn is to write your own code as often as possible, so here are three ways you should try extending this app to make sure you fully understand what’s going on.

1. Change project 8 (Moonshot) so that when you scroll down in MissionView the mission badge image gets smaller. It doesn’t need to shrink away to nothing – going down to maybe 80% is fine.
2. Change project 5 (Word Scramble) so that words towards the bottom of the list slide in from the right as you scroll. Ideally at least the top 8-10 words should all be positioned normally, but after that they should be offset increasingly to the right.
3. For a real challenge make the letter count images in project 5 change color as you scroll. For the best effect, you should create colors using the Color(red:green:blue:) initializer, feeding in values for whichever of red, green, and blue you want to modify. The values to input can be figured out using the row’s current position divided by maximum position, which should give you values in the range 0 to 1.

Tip: All three of these require you to use GeometryReader, which in turn requires you to understand how the frame of each view is calculated. These are quite hard, so don’t feel bad if you end up doing them out of order or have to ask for help!