3.
Prototyping the Main View
Written by Audrey Tam
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Now for the fun part! In this chapter, you’ll start creating a prototype of your app, which has four full-screen views:
- Welcome
- Exercise
- History
- Success
Creating the Exercise View
You’ll start by laying out the Exercise view, because it contains the most subviews. Here’s the list of what your user sees in this view:
- A title and page numbers are at the top of the view and a History button is at the bottom.
- The page numbers indicate there are four numbered pages.
- The exercise view contains a video player, a timer, a Start/Done button and rating symbols.
And here’s the list rewritten as a list of subviews:
- Header with page numbers
- Video player
- Timer
- Start/Done button
- Rating
- History button
You could sketch your screens in an app like Sketch or Figma before translating the designs into SwiftUI views. But SwiftUI makes it easy to lay out views directly in your project, so that’s what you’ll do.
The beauty of SwiftUI is it’s declarative: You simply declare the views you want to display, in the order you want them to appear. If you’ve created web pages, it’s a similar experience.
Outlining the Exercise View
➤ Continue with your project from the previous chapter or open the project in this chapter’s starter folder.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
VStack {
Text(exerciseNames[index])
Text("Video player")
Text("Timer")
Text("Start/Done button")
Text("Rating")
Text("History button")
}
Creating the Header View
Skills you’ll learn in this section: modifying views; method signatures; SF Symbols;
Imageview; extracting and configuring subviews; preview variants
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
VStack {
VStack {
Text(exerciseNames[index])
}
The Many Ways to Modify a View
➤ Open the Attributes inspector: Press Option-Command-4 or click the inspectors button in the toolbar, then select the Attributes inspector. In the canvas Selectable mode, select the “Squat” Text view:
Text(exerciseNames[index])
.font(.title)
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Creating Page Numbers With SF Symbols
In addition to the name of the exercise, the header should display the page numbers with the current page number highlighted.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Image(systemName: "")
Image(systemName: "1.circle")
HStack {
Image(systemName: "1.circle")
Image(systemName: "2.circle")
Image(systemName: "3.circle")
Image(systemName: "4.circle")
}
HStack {
Image(systemName: "1.circle")
Image(systemName: "2.circle")
Image(systemName: "3.circle")
Image(systemName: "4.circle")
}
.font(.title2)
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Image(systemName: "1.circle")
.font(.largeTitle)
Extracting a Subview
➤ Select the VStack containing the title Text and the page numbers HStack, then Right-click and select Extract Subview from the menu:
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Adding a Parameter
The error flag in HeaderView shows where you need a parameter. The index property is local to ExerciseView, so you can’t use it in HeaderView. You could pass index to HeaderView and ensure it can access the exerciseNames array. But it’s always better to pass just enough information. This makes it easier to set up the preview for HeaderView. Right now, HeaderView needs only the exercise name.
let exerciseName: String
Text(exerciseName)
HeaderView(exerciseName: exerciseNames[index])
Moving a Subview to a New File
➤ Now, press Command-N to create a new SwiftUI View file and name it HeaderView.swift. Because you were in ExerciseView.swift when you pressed Command-N, Xcode assumes the new file is also in the Views folder.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
HeaderView(exerciseName: "Squat")
Working With Previews
SwiftUI previews can do a lot more than what you’ve seen so far.
Layout: Size That Fits
The preview still uses the iPad simulator, which takes up a lot of space. You can modify the preview to show only the header.
#Preview(traits: .sizeThatFitsLayout) {
Variants
➤ Click the Variants button (next to Selectable) and select Color Scheme Variants:
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Creating the Exercise Structure
Skills you’ll learn in this section: enumeration; computed property;
extension;staticproperty
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
struct Exercise {
let exerciseName: String
let videoName: String
enum ExerciseEnum: String {
case squat = "Squat"
case stepUp = "Step Up"
case burpee = "Burpee"
case sunSalute = "Sun Salute"
}
}
Enumerating Exercise Names
enum is short for enumeration. A Swift enumeration is a named type and can have methods and computed properties. It’s useful for grouping related values so the compiler can help you avoid mistakes like misspelling a string.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Creating an Array of Exercise Instances
Use your enumeration to create your exercises array.
extension Exercise {
static let exercises = [
Exercise(
exerciseName: ExerciseEnum.squat.rawValue,
videoName: "squat"),
Exercise(
exerciseName: ExerciseEnum.stepUp.rawValue,
videoName: "step-up"),
Exercise(
exerciseName: ExerciseEnum.burpee.rawValue,
videoName: "burpee"),
Exercise(
exerciseName: ExerciseEnum.sunSalute.rawValue,
videoName: "sun-salute")
]
}
Swift Tips: Type Property, Array Literal, Type Extension
In an extension to Exercise, you initialize the exercises array as a type property.
Refactoring ContentView & ExerciseView
Now, you’ll modify ContentView and ExerciseView to use your new Exercise.exercises array.
ForEach(Exercise.exercises.indices, id: \.self) { index in
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
var exercise: Exercise {
Exercise.exercises[index]
}
HeaderView(exerciseName: exercise.exerciseName)
Playing a Video
Skills you’ll learn in this section:
AVPlayerandVideoPlayer; bundle files; optional types; make conditional;GeometryReader; adding padding
import AVKit
VideoPlayer(player: AVPlayer(url: url))
Getting the URL of a Bundle File
You need the URL of the video file for this exercise. The videoName property is the name part of the file. All the files have file extension .mp4.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
if true {
VideoPlayer(player: AVPlayer(url: url))
} else {
EmptyView()
}
if let url = Bundle.main.url(
forResource: exercise.videoName,
withExtension: "mp4") {
Text("Couldn't find \(exercise.videoName).mp4")
.foregroundColor(.red)
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Getting the Screen Dimensions
The video takes up a lot of space on the screen. You could set the width and height of its frame to some constant values that work on most devices, but it’s better if these measurements adapt to the size of the device.
GeometryReader { geometry in
.frame(height: geometry.size.height * 0.45)
Adding Padding
➤ The header looks a little squashed. Control-Option-click HeaderView to add padding to its bottom:
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Creating Timer, Buttons & Rating
Skills you’ll learn in this section:
Textwith date and style parameters; types in Swift;Date();Button,Spacer,foregroundColor; repeating a view; unused closure parameter
Creating the Timer View
➤ Add this property to ExerciseView, above body:
let interval: TimeInterval = 30
Text(Date().addingTimeInterval(interval), style: .timer)
.font(.system(size: geometry.size.height * 0.07))
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Creating Buttons
Creating buttons is simple, so you’ll do both now.
Button("Start/Done") { }
.font(.title3)
.padding()
Spacer()
Button("History") { }
.padding(.bottom)
Creating the Rating View
➤ Create a new SwiftUI View file in the Views group named RatingView.swift. This will be a small view, so replace its #Preview { with this line:
#Preview(traits: .sizeThatFitsLayout) {
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Image(systemName: "")
.foregroundColor(.gray)
Image(systemName: "waveform.path.ecg")
.foregroundColor(.gray)
ForEach(0 ..< 5) { item in
Image(systemName: "waveform.path.ecg")
.foregroundColor(.gray)
}
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
HStack {
ForEach(0 ..< 5) { item in
Image(systemName: "waveform.path.ecg")
.foregroundColor(.gray)
}
}
.font(.largeTitle)
ForEach(0 ..< 5) { item in
ForEach(0 ..< 5) { _ in
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
RatingView()
.padding()
Challenges
ExerciseView will be easier to understand if all its components are in separate view files.
Challenge: Create VideoPlayerView
➤ Move most of the VideoPlayer code to a separate SwiftUI view file named VideoPlayerView.swift, so you can call it in ExerciseView like this:
VideoPlayerView(videoName: exercise.videoName)
.frame(height: geometry.size.height * 0.45)
Key Points
- Declare SwiftUI views in the order you want them to appear.
- Create separate views for your user interface elements. This makes your code easier to read and maintain.
- Put each view modifier on its own line. This makes it easy to move or delete a modifier.
- Xcode and SwiftUI auto-suggestions and default values are often what you want.
- Let Xcode help you avoid errors: Use the Command-menu to embed or extract views.
- The SF Symbols app and Xcode’s Symbols Library provide icon images you can configure like text.
- Preview variants make it easy to check your interface for different user settings.
- An enumeration is a named type, useful for grouping related values so the compiler can help you avoid mistakes like misspelling a string.
- Swift is a strongly typed programming language.
-
GeometryReaderenables you to set a view’s dimensions relative to the screen dimensions.
Where to Go From Here?
In the next chapter, you’ll lay out views for History, Welcome and Success.