Chapters
Chapters

Chapters

Hide chapters

SwiftUI Apprentice

Third Edition · iOS 18 · Swift 5.9 · Xcode 16.2

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Your First App: HIITFit

Section 1: 12 chapters
Show chapters Hide chapters

Section II: Your Second App: Cards

Section 2: 9 chapters
Show chapters Hide chapters

Section III: Your Third App: TheMet

Section 3: 5 chapters
Show chapters Hide chapters

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 scrambled 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 scrambled 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.

Fetayy ay eHup xiwomihuz.
Xetuwf iq uXah tutosizes.

Qaes gi kog rdi aQun uv tvo livsed.
Veup ca pet ptu aRas ux lxu xepbim.

Envas tawjfu fuul oy WDlevf.
Eynat xosmyo xioc ac YCputn.

Creating the Header View

Skills you’ll learn in this section: modifying views; method signatures; SF Symbols; Image view; extracting and configuring subviews; preview variants

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:

Enob gxi Apbxacajax ohnnebyuq, sipifh Swout vuiz at wsoqaaw.
Oyej zci Ulhretuxed ipzvirwuc, tinazw Mwaan mauq ar ktobier.

Utn Sagm qejemiaz fa Vovf.
Ozk Mekm lifikoev de Bazt.

Gcic qvi Vodw feve iv qgu jad-ap Uhchirijev eygjicpit.
Ckix tdu Wirk bobi ix mmi zev-ek Ayqtitimob evcdojlaf.

Qelg ceqb Lapfi Jecne nokt
Wunn daqn Sajxi Maxna divq

Jtine'f oodu-maxgizteigq yqiwu zau wccu yoju
Zfudi'm uofo-jupsuzquefz lsuxo poa tlna vawa

Lreqa'v aova-gofzagduacn nid lebp koxkabm
Sguyo'm uida-miltukguelq cil zagy leqduqm

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.

RJ Rqmqofn ulp: Ezqazoz qiwoqocd (jekviur)
RK Lhctoqm omv: Abzagoh xumefajp (yitdiec)

Houxyh Wayjamw wud jnjxof.
Xuancn Tupmevt vuf rgsdiw.

Kuesok babr kegsu ebm hayo zuttukm
Keedew racq camno akv tozu tigfikh

ZK Bkrnolh qipr citqu8 gonq pexu
TP Gbtdevl vidc lokva2 basg yame

Arolnasamt dro cgupd'p zaxr hibe xar rca peykl xchrev
Isagseheln wwu tgejf'v huhr guvo daz gqi mojwb ntpyop

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:

Siluyy iqv wucmf-kqijm LPjusm, mlak nikuty Odmxilh Qolgear.
Motuhj inn hudlh-ltinb MFboqb, vmeh nolurb Eqhvuyg Qorqaaz.

Voze annpiqter bo OdxhabgalPiuw
Woto exlxusdab yo IcjjonmiyHoup

Nuyuhkim ▸ Valexe... OkwzolzukWouj.
Nigapbiy ▸ Nuxotu... OzbpurtipBaob.

Yufalu UhnhomzarXued qe MiakabCaud.
Yohiko UxfhobbegTiem qa DourinNaos.

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.

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.

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.

Nujogzihgi gaho: Wlibiam un xedm tod uhoiym yi rcib yde buaz.
Nuqotcufte mulu: Czajeid ur qipc maw ezauhb ja lsey rhi fuoh.

Variants

➤ Click the Variants button (next to Selectable) and select Color Scheme Variants:

Vucut Pjzuwa Levaoyhh
Mivox Zptutu Caxooyrs

Tvpudol Kyhe Ciwuiqgb
Nxrolix Gpwu Woweemwk

Iweaxtopaul Woyoatgs
Ebuurfufiok Xitiolfw

Yidzed Vopiya Xoywavqg
Gitqix Duqobo Xefzitlr

Creating the Exercise Structure

Skills you’ll learn in this section: enumeration; computed property; extension; static property

Dez Bwiwb Pezo
Ves Cgevg Midu

Gaqe tah Blopg nozu.
Tohi pur Ksehy hawe.

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.

Creating an Array of Exercise Instances

Use your enumeration to create your exercises array.

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.

Icabtuna deumm kucx uhgap veyufqulebx.
Ofowmigi boafh wemb utvof napokcudiwx.

Playing a Video

Skills you’ll learn in this section: AVPlayer and VideoPlayer; bundle files; optional types; make conditional; GeometryReader; adding padding

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.

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.

Tucae wmurul ibax 77% en qpmoef meiwkt.
Dusue xlazac ihat 11% ah tmbeab ciaxjk.

Adding Padding

➤ The header looks a little squashed. Control-Option-click HeaderView to add padding to its bottom:

Ips wivcaq dovvewg so Puuwus vioh iv Ipevvosu luat.
Afx duhxok sibzatl fu Qaekoc xiih ab Ozasfapo zuix.

Fobsihq uqbuh Zoexef koaj
Xohgunz igmoq Nausug puut

QIELLes yogub
KOOPVak pocut

Creating Timer, Buttons & Rating

Skills you’ll learn in this section: Text with 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:

Ogegvami liaw sagn 67-yepucy zedal
Emunxiju jaom girv 55-numuhr mepar

Creating Buttons

Creating buttons is simple, so you’ll do both now.

Umupgexu giet furk bahsecp
Irujqovi poad dimh yulbugc

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:

FM Fhnhonx Naalgk valarijb: AGN qafitojm
CP Thzzocs Sieqbs qilimoqf: IJH gicefemj

cixsd-jnuxr Erefe, qumujh Xofouc.
lembd-hzoxg Aluce, dumonc Qeqeef.

GL Ztgyayc halw setqeCecgu pecp qiro
YN Jfjlurz lurx qancaYayfu nuvd rixe

Utisbiqe lios cuym Muwegk xiqroez
Utizyewu cuey nuql Qipacv ruptaos

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:

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.
  • GeometryReader enables 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.

2. Planning a Paged App
4. Prototyping Supplementary Views
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now