100 Days of SwiftUI

Day 39

2026-05-28

Project 8, part 1

Moonshot — let users learn about the NASA Apollo program

Resizing images to fit the available space

As anyone who has dealt with trying to make images fit proportionally to an area (HTML I’m looking at you), it’s never as easy as saying “here’s an image, here’s a space, make it happen.”

And SwiftUI does it with a boatload of modifiers

Image(.example)
    .resizable().    // can be resized
    .scaledToFit().  // don't squish the image
    .containerRelativeFrame(.horizontal) { size, axis in
        size * 0.8   // use 80% of the available width
    }

I’ve been wondering about relative width!

How ScrollView lets us work with scrolling data

• use ScrollView { … } instead of say, List
• when views are added to a scroll view they are immediately created (whether you can see them or not)
• consider using LazyVStack (or the H equivalent)
• lazy stacks take up all available space, as opposed to regular stacks that take up only what they need

Pushing new views onto the stack using NavigationLink

• View stacks a fundamental way of working with iOS
• different from sheets because of how the information is presented
• a NavStack with NavigationLink destination (which can be any view)
• use for details about the current selection
• sheet is for unrelated content

Working with hierarchical Codable data

• for example, an array inside another array, with different data types
• used in conjunction with JSON, will go as far down as the data does (as long as it’s valid JSON of course)

How to lay out views in a scrolling grid

• good for showing columns of information
• LazyVGrid to show vertical data; LazyHGrid for horizontal
• can use adaptive modifier to use up available space rather than specifying the exact number of columns, e.g. let layout = [ GridItem(.adaptive(minimum: 80, maximum: 120)), ]