Book Image

SwiftUI Projects

By : Craig Clayton
Book Image

SwiftUI Projects

By: Craig Clayton

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
SwiftUI Projects
Craig Clayton
Dec, 2020 | 410 pages
Small book image
SwiftUI Cookbook
Edgar Nzokwe | Giordano Scalzo
Oct, 2020 | 614 pages
Small book image
SwiftUI Cookbook
Edgar Nzokwe | Giordano Scalzo
Nov, 2021 | 616 pages
Small book image
SwiftUI Cookbook
Juan C Catalan
Dec, 2023 | 798 pages
Table of Contents (13 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Reviews
1
Chapter 1: SwiftUI Basics
Chapter 1: SwiftUI Basics
Technical requirements
Views and controls
Shapes
View layout and presentation
Summary
Free Chapter
2
Chapter 2: SwiftUI Watch Tour
Chapter 2: SwiftUI Watch Tour
Technical requirements
Getting started
Building out our navigation
Creating a chart Page-View navigation
Creating a SwiftUI watch list
Using Swift previews
Charts
Summary
3
Chapter 3: NBA Draft – Watch App
Chapter 3: NBA Draft – Watch App
Technical requirements
Building our watch UI
Walking through the design specs
Accessibility and fonts
Adding our card contents
Designing the prospect details
Refactoring views
Adding watch data
Summary
4
Chapter 4: Car Order Form – Design
Chapter 4: Car Order Form – Design
Technical requirements
The overall design
Car Detail
The form view
Complete Order design
Combining our views
Cancel Order design challenge
Summary
5
Chapter 5: Car Order Form – Data
Chapter 5: Car Order Form – Data
Technical requirements
Understanding State and Binding
Combine 101 – discussing the basics
Networking with Combine
6
Chapter 6: Financial App – Design
Chapter 6: Financial App – Design
Technical requirements
Understanding our App design
Understanding the home view logic
Creating an account
Summary
7
Chapter 7: Financial App – Core Data
Chapter 7: Financial App – Core Data
Technical requirements
What is Core Data?
SwiftUI and Core Data optionals
Mock account preview service
Implementing our View model
Summary
8
Chapter 8: Shoe Point of Sale System – Design
Chapter 8: Shoe Point of Sale System – Design
Displaying the app container
Creating the products
Product details
Creating the shopping cart
Summary
9
Chapter 9: Shoe Point of Sale System – CloudKit
Chapter 9: Shoe Point of Sale System – CloudKit
Understanding the basics of CloudKit
Turning on CloudKit manually
Creating our first CloudKit record
How to index a new record type in CloudKit Dashboard
Creating CloudKit models
Creating brands
Updating our product views
Summary
10
Chapter 10: Sports News App – Design
Chapter 10: Sports News App – Design
Creating a sidebar
Prototyping our app with boxes
Designing dashboard module views
Roster
Schedule
Game detail challenge
Summary
11
Chapter 11: Sports News App – Data
Chapter 11: Sports News App – Data
Mockoon
API design
Dashboard data
Creating our View model
Standings
Final challenge
Summary
12
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Designing dashboard module views

We have prototyped our entire app and now it is time to slowly add in each design element. As we have done throughout the book, we will first do this together and then I will challenge you to do it on your own. Let's first move to HomeDashboardView and work on this view first.

Video player with a grid

We know from our design that our HomeDashboardView has a video player with a grid. We already have the base of this created; we just need to swap out a couple of things to make this work.

Open HomeDashboardView and copy the VStack component out of the topRow variable and paste it into the body variable in VideoModuleView. Now, update previews to the following:

.previewLayout(.fixed(width: 1024, height: 350))

Inside of VideoModuleView(), locate the following Rectangle(), which we just copied over from HomeDashboardView:

Rectangle()
    .cornerRadius(10)
    .frame(width: 578, height: 324)
...
Previous Section
End of Section 4
Next Section