Your First iOS & SwiftUI App: An App from Scratch

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

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, H stack, and V stack. Second, you learned what SwiftUI View Modifiers are, and you applied many view modifiers to style your instructions view, including Bold, Kerning, Multiline Text Alignment, Line Spacing, and Font. Third, you learned about three important concepts in iOS and Swift development: instances, data, and methods. 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 right of the slider that read one and 100. Note that 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. Open up the high fidelity design for the app in Figma. You can find a link in the author's notes of this video. I've also included a local file in the materials for this episode. Then 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 to that in the author's notes. I want to share one final tip. When you're checking for font weight in Figma, 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 that goes with that number, which you can use directly in SwiftUI. Alright, 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. (soft upbeat music) Alright, so we're going to start by styling this 89 here. So, let's pull up Luke's design and see what we've got. Click on the 89 and over in the Design tab of the right panel, scroll down until you see the Text section. The first thing I notice is that the letter spacing is set to negative one pixels. So, we can go back to Xcode and I'm just going to copy the Kerning modifier we used earlier, but instead of two we're going to use negative one. So, that got the letters a little more tightly put together. Alright, let's go back. The next thing we're going to notice is the font size, and that's set to 36. So, what does that mean for one of the presets we looked at earlier? Back in 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 gonna copy that one line that says footnote, and type dot and choose largeTitle. Alright, what's next? In Figma, we can see that the font weight is set to Black, and this is a new one, so we don't have an example to copy. So, I'm going to click plus, and you know what? I'm going to just 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. And that's looking pretty good, it's looking a lot like our design. So, next, what about the one and the 100 on either side of the slider? It turns out that these are really simple. In Figma, the font size of 18 here is close enough to the Body option in the dynamic type chart. And since Body is the default text size, we're just going to leave it as it is. But the font weight is set to Bold. So, that's just all we're going to do with that one. I'm going to type this one. Just say bold, followed by a pair of parenthesis, and we can do exactly the same thing for the 100. Alright, that's it. Nice work.