5-Day Swift Coding Challenge: Day 4

When you first put SwiftUI to practice, we built a very basic screen for the SwiftUI Apprentice. Open that project in Swift Playgrounds. There are some critical issues. The image is too big. The title is too small. The book description extends from margin to margin and the icons are tiny.

We’ll start with the image. We want to resize this image. SwiftUI comes with a frame modifier. This allows us to set the width. In this case, we want 250 units. We’ll let the height be calculated off the width. At least, that’s the plan.

Image("swiftui-apprentice")
    .frame(width: 250)

Nothing changes. The image frame is actually set 250, but the image itself is exceeding the frame. We want the image to match the frame, so we need to set it to resizable(). Update this to the following:

Image("swiftui-apprentice")
    .resizable()
    .frame(width: 250)

Okay, we are almost there. We just need to set the image to scale to fit so the resizing will preserve the aspect ratio.

Image("swiftui-apprentice")
    .resizable()
    .frame(width: 250)
    .scaledToFit()

This doesn’t work. What is happening is your setting the image to be resizable, then setting the frame. The frame messes up the aspect ratio. By the time you use the scaledToFit() modifier, it’s too late. This is an example of an incorrect modifier ordering. Update it to the following:

Image("swiftui-apprentice")
    .resizable()
    .scaledToFit()
    .frame(width: 250)

And look at that - we have a nice looking image. It just needs a little padding at the bottom. Add the following:

Image("swiftui-apprentice")
    .resizable()
    .scaledToFit()
    .frame(width: 250)
    .padding(.bottom)

Here we are applying the default padding to the bottom. We can provide padding to multiple areas.

.padding([.leading, .trailing], 20)

This applies 20 points of padding to the leading and trailing margins. What does leading and trailing mean in this context? For languages that read left to right like English, leading refer to the left side of the text and trailing refers the right. For languages that read right to left like Hebrew, leading means the right and trailing means the left.

Also note, when adding multiple locations for padding, you put them in an array.

For now, just apply the default padding to the bottom.

.padding(.bottom)

Next up is the main title. You want to increase the font size for this. For this, you use the font modifier. Add the following:

.font(.largeTitle)

The large title is defined in iOS. There are other sizes predefined as well such as caption, headline, and so forth. You can see them all by pressing the period button and looking at the listing. You can also signify the size in points such as:

.font(.system(size:32.0))

This sets the size to 32 points. For now, revert it back.

.font(.largeTitle)

Now for the next block of text, you need give it some breathing room. Just add some padding to it.

.padding(20)

This is looking much better. There’s one thing for you to do. Increase the side of the icons to be a large title and add sixteen points of padding to the leading and trailing sides. Give it a shot.

Okay, this is what I did. First, I set each icon to use a large title.

.font(.largeTitle)

Now for the padding, you can do this:

.padding([.leading, .trailing], 16)

So that’s correct. There is also one setting that combines both of these.

.padding(.horizontal, 16)

Here you set the padding to horizontal. You can also set it vertical as well.