Search icon
Cart icon
Close icon
You have no products in your basket yet
Save more on your purchases!
Savings automatically calculated. No voucher code required
Arrow left icon
All Products
Best Sellers
New Releases
Learning Hub
Free Learning
Arrow right icon
Over 7,000 tech titles at $9.99 each with AI-powered learning assistants on new releases
SwiftUI Projects
SwiftUI Projects

SwiftUI Projects: Build six real-world, cross-platform mobile applications using Swift, Xcode 12, and SwiftUI

By Craig Clayton
$26.99 $9.99
Book Dec 2020 410 pages 1st Edition
$26.99 $9.99
$15.99 Monthly
$26.99 $9.99
$15.99 Monthly

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now

Product Details

Publication date : Dec 11, 2020
Length 410 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781839214660
Category :
Languages :
Table of content icon View table of contents Preview book icon Preview Book

SwiftUI Projects

Chapter 2: SwiftUI Watch Tour

We've looked at things SwiftUI can do; now, we will examine how they look on each device. In this chapter and the next, we will work exclusively with watchOS and SwiftUI. Even if you are not doing watchOS development, everything can be applied to the iPhone, iPad, and macOS. There are some subtle differences, but overall everything is the same.

Since there is no specific design for this chapter, we'll look at the default behaviors that we get out of the box. WatchOS has many default looks that are harder to customize than on the other devices. We'll use this chapter to focus on execution, and in the next chapter, we'll work with a specific design. Let's get started working with SwiftUI.

In this chapter, we'll cover the following:

  • Creating a SwiftUI PageView in watchOS
  • Creating a Bar Chart, Wedge Chart, and Activity Ring
  • Creating a list in watchOS

This chapter has a starter file called SwiftUIWatchTour...

Technical requirements

Getting started

We are going to build a small app that will just get your feet wet. We will create a List which we will use to navigate us through our small app. Charts will link to charts and Colors will link to another colors list. One will show you Charts, and the other will show you a List from an Array. You will create three charts in this chapter – Bar, Activity Ring, and Wedge. We will build out a PageView, which will allow us to swipe from left to right to see each one. For the List, you will create a list and display it using an array. Here are what the screens will look like when we are finished:

Figure 2.1

Building out our navigation

SwiftUI is now fully supported in watchOS 7, which means we do not have to work with some of the older controllers pre watchOS 6. We will first create our entire navigation, and then we will go back and build out each view. Let's get started by opening ContentView first.

Creating a static list

Our List, in this view, is going to be a static list with just two links. One will present a modal, and the other will do the standard push to detail view. Add the following after the struct declaration:

@State private var isPresented = false

In the last chapter, we skipped @State because it was not in scope, and I will do it again as I cover this in greater detail in Сhapter 5, Car Order Form – Data. But I will, for now, just say we are creating a Boolean that keeps track of the modal presentation. Next, inside the body variable, replace Text ('Content View') with the following:

List {

Creating a chart Page-View navigation

Next, we are going to create a Page View navigation controller. Just as you would expect on a phone, you will be able to swipe from the right to left and see different content on each page. You will also see some dots at the bottom of the page, which shows which page is being displayed currently.

Open ChartsView and let's get started. Inside the body variable, replace Text('Charts View') with the following:

TabView { // Step 1
    BarChartView() // Step 2
}.tabViewStyle(PageTabViewStyle(indexDisplayMode: .automatic))     // Step 3

We just added all of the code for ChartsView, so let's look at what we did:

  1. We wrap all of our views inside a TabView.
  2. Next, we set up each page by just listing them inside the TabView.
  3. We set the .tabViewStyle() modifier to PageTabViewStyle(indexDisplayMode...

Creating a SwiftUI watch list

We are going to display a SwiftUI List view. Our List is going to display a list of colors. First, we need to create a color model.

Open the ColorModel file inside the Model folder and add the following:

struct ColorModel: Identifiable {
    var id = UUID()
   	var name: String

This struct has two properties: id and name. We have also set our model so that it conforms to Identifiable. When using a List in SwiftUI, our List is required to be unique, and there are two ways to handle this. We can either pass data, for example, the name as our unique ID, or we can use UUID and use this as our ID. The more you work with SwiftUI, the more ways you will encounter to handle Identifiable. If your data was coming from a feed, then you could use id if it were unique.

Open ColorsView.swift and add the following code inside the ColorsView struct, before the body:

@State var colors: [ColorModel] = [ ColorModel(name...

Using Swift previews

We covered this in the last chapter, but before we write any SwiftUI code, we will look at a SwiftUI file. Open BarChartView and you'll see our struct view, which we looked at in the previous chapter. If you scroll to the bottom, you will see static var previews. Previews are used to preview our design without having to launch the simulator. You should see a blank space to the right of your code, and at the top of this, you will see a button named Resume:

Figure 2.5

Figure 2.5

Click Resume, and you will see the preview appear:

Figure 2.6

Figure 2.6

Let's move on to building some charts.


Building charts is pretty fun in SwiftUI because it requires very little code. Here is an example of the three screens that we are looking to create in this section:

Figure 2.7

Figure 2.7

We will start on the Bar Chart first using the Capsule shape.

Bar charts

Bar charts are a great way to display information to users. In this example, we will create a static Bar Chart that you can use to display data on the watch. We can also take all of these examples and show them on the larger screens of other devices. Whenever we work in SwiftUI, we will use Swift Previews to review our work, making our workflow go much faster than having to wait for the simulator to launch and display. Please note that to use Swift Previews, you must be on macOS Catalina. If you are not, then just run the simulator.

Creating a header

First, we will start by creating our header for our view. This view is just two text views stacked horizontally next to each other. Open BarChartView...


In this chapter, we got to work on some basic SwiftUI views. This chapter was a primer to help you get a bit more comfortable using SwiftUI. From here on out, our UIs will become more complex. In the next chapter, we will build an NBA Draft app for the Apple Watch. We will work with animations as well as loading data from a plist. I hope you're excited as I am because this is the kind of stuff that made me want to write this book.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Learn SwiftUI with the help of practical cross-platform development projects
  • Understand the design considerations for building apps for different devices such as Apple Watch, iPhone, and iPad using SwiftUI’s latest features
  • Work with advanced SwiftUI layout features, including SF Symbols, SwiftUI grids, and forms in SwiftUI


Released by Apple during WWDC 2019, SwiftUI provides an innovative and exceptionally simple way to build user interfaces for all Apple platforms with the power of Swift. This practical guide involves six real-world projects built from scratch, with two projects each for iPhone, iPad, and watchOS, built using Swift programming and Xcode. Starting with the basics of SwiftUI, you’ll gradually delve into building these projects. You’ll learn the fundamental concepts of SwiftUI by working with views, layouts, and dynamic types. This SwiftUI book will also help you get hands-on with declarative programming for building apps that can run on multiple platforms. Throughout the book, you’ll work on a chart app (watchOS), NBA draft app (watchOS), financial app (iPhone), Tesla form app (iPhone), sports news app (iPad), and shoe point-of-sale system (iPad), which will enable you to understand the core elements of a SwiftUI project. By the end of the book, you’ll have built fully functional projects for multiple platforms and gained the knowledge required to become a professional SwiftUI developer.

What you will learn

Understand the basics of SwiftUI by building an app with watchOS Work with UI elements such as text, lists, and buttons Create a video player in UIKit and import it into SwiftUI Discover how to leverage an API and parse JSON in your app using Combine Structure your app to use Combine and state-driven features Create flexible layouts on iPad

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now

Product Details

Publication date : Dec 11, 2020
Length 410 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781839214660
Category :
Languages :

Table of Contents

13 Chapters
Preface Chevron down icon Chevron up icon
1. Chapter 1: SwiftUI Basics Chevron down icon Chevron up icon
2. Chapter 2: SwiftUI Watch Tour Chevron down icon Chevron up icon
3. Chapter 3: NBA Draft – Watch App Chevron down icon Chevron up icon
4. Chapter 4: Car Order Form – Design Chevron down icon Chevron up icon
5. Chapter 5: Car Order Form – Data Chevron down icon Chevron up icon
6. Chapter 6: Financial App – Design Chevron down icon Chevron up icon
7. Chapter 7: Financial App – Core Data Chevron down icon Chevron up icon
8. Chapter 8: Shoe Point of Sale System – Design Chevron down icon Chevron up icon
9. Chapter 9: Shoe Point of Sale System – CloudKit Chevron down icon Chevron up icon
10. Chapter 10: Sports News App – Design Chevron down icon Chevron up icon
11. Chapter 11: Sports News App – Data Chevron down icon Chevron up icon
12. Other Books You May Enjoy Chevron down icon Chevron up icon

Customer reviews

Filter icon Filter
Top Reviews
Rating distribution
Empty star icon Empty star icon Empty star icon Empty star icon Empty star icon 0
(0 Ratings)
5 star 0%
4 star 0%
3 star 0%
2 star 0%
1 star 0%

Filter reviews by

No reviews found
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial


How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to
  • To contact us directly if a problem is not resolved, use
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.