Your First iOS & SwiftUI App: An App from Scratch

Transcript: 08. Challenge: Add View Modifiers

Guess what - it’s time for your first coding challenge!

Even though you just started this course, you already learned several of the key techniques of iOS and SwiftUI development:

First, you learned what SwiftUI Views are, and you added several different Views to your app, including Text, Slider, Button, HStack, and VStack.

Second, you learned what SwiftUI View Modifiers are, and you applied many View Modifiers to style your Instructions view, including .bold, .kerning, .multilineTextAlignmnet, .lineSpacing, and .font.

Third, you learned about three important concepts in iOS and Swift development: instances, data, and methods.

Challenge

Your challenge is to get some more practice with view modifiers, by styling the rest of the Text Views in the app.

There are three text views that need to be styled:

• The Text View for the target, that reads “89”
• The Text Views to the left and the right of the slider, that read “1” and “100”

Note you don’t need to style the text view inside the button; we’ll do that together later.

Let’s review what you need to do to style these three text views.

1. Open up the high fidelity design for the app in Figma. You can find a link in the author’s notes on this video.
2. Apply the correct view modifiers to the text views to style them as similarly to the design as you can.

Remember that you can drag view modifiers in from the object library, or you can copy the examples from the styling of the instructions label that you did earlier.

Also remember you may find the chart of dynamic text sizes in Apple’s Human Interface Guidelines handy for this challenge; you can also find a link in the author’s notes.

I want to share one final tip for you. When you’re checking for font weight, look at the “Design” tab instead of the Inspect tab.

The Inspect tab will show you the equivalent weight in a number like “900”, but the design tab will show you the name of the font weight, which you can use directly in SwiftUI.

All right that’s it - now pause the video and give it a try on your own. If you get stuck, don’t worry, you can keep watching for the solution. Good luck!

Challenge Solution

All right so we’re going to start by styling this 89 here. So let’s pull up Luke’s design and see what we got.

Click on the 89 here, and over in the Design tab of the right panel, scroll down til you see the Text section.

The first thing I noticed is the letter spacing is set to -1 pixels.

So we go back here, and I’m just going to copy the kerning modifier we used earlier. But instead of 2.0, we’re going to do -1.0.

Text("89")
  .kerning(-1.0)

So that’s got the letters a little more together. All right, let’s go back.

The next thing we’re going to notice is the font size, that’s set to 36. So what does that mean for one of the preset ones?

Looking back at the chart in the Human Interface Guidelines, the closest one I see here to 36 is large title, which is 34 points.

So we’ll go with large title. So again, I’m just going to copy that line there that says footnote, and type dot… and choose large title.

Text("89")
  .kerning(-1.0)
  .font(.largeTitle)

All right, what’s next? In Figma, we can see that the font weight is set to Black.

This is a new one, so we don’t have an example to copy.

So I’m just going to click plus, and, you know what I’m just going to search to see if I can find it instead of scrolling.

And there it is, Font Weight.

Instead of the default, we’re going to do .black.

Text("89")
  .kerning(-1.0)
  .font(.largeTitle)
  .fontWeight(.black)

It’s looking pretty good. It’s looking a lot like our design.

Next up, what about the one and one hundred on either side of the slider? Turns out these ones are really simple.

In Figma, the font size of 18 here is close enough to the body option in the dynamic type chart. Since “body” is the default, that we’re just going to leave it as it.

But the font weight is set to bold. So that’s just all we’re going to do for that one. I’m just going to type this one, “bold” followed by a pair of parenthesis.

Text("1")
  .bold()

And we can do the same for the “100”

Text("100")
  .bold()

All right and that’s it. Nice work!