Cyber Week [Extension] — Promotion
Ends in ::
Hours left! Get complete and immediate access to a One-Year Kodeco Pro Plan with all benefits for just $399 for your first year — or lock in for two years for $599
Your First iOS & SwiftUI App: An App from Scratch
Jan 11 2022 Swift 5.5, iOS 15, Xcode 13
Part 1: Getting Started with SwiftUI
7. Challenge: Add View Modifiers
About this episode
Practice using SwiftUI View Modifiers by styling the rest of the text views in Bull’s Eye.
iOS 15, Swift 5.5, Xcode 13 (Selected)Jan 11 2022
iOS 14, Swift 5, Xcode 12Dec 15 2020
iOS 13, Swift 5, Xcode 11Sep 3 2019
iOS 12, Swift 4, Xcode 10Jul 24 2018
iOS 11, Swift 4, Xcode 9Sep 19 2017
iOS 10, Swift 3, Xcode 8Nov 7 2016
Swift 2Sep 1 2015
See course reviews
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
Second, you learned what SwiftUI View Modifiers are, and you applied many View Modifiers to style your Instructions view, including
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 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.
- Open up the high fidelity design for the app in Figma. You can find a link in the author’s notes on this video.
- 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. For the Text View for the target that reads “89”, you’ll see that the font weight is set to 900 in Figma. You can set the font weight in SwiftUI with the
fontWeight view modifier, which has a number of presets. The one that is closest to 900 is the preset
Allright 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!
Style label 1:
Text("89") .kerning(-1.0) .font(.largeTitle) .fontWeight(.black)
Style label 2:
Style label 3: