Build a SwiftUI app for iOS 14 - SwiftUI for iOS 14

Multiplatform app

For the first time, you can build entire apps using SwiftUI only. In Xcode 12, you can now create multi-platform apps with minimal code changes. SwiftUI will automatically translate the navigation, fonts, forms and controls to its respective platform. For example, a sidebar will look differently on the Mac versus the iPad, while using exactly the same code. Dynamic type will adjust for the appropriate platform language, readability and information density. Multiplatform App

What you'll build

In this course, we'll build an app from scratch focusing on the new techniques in iOS 14. We'll use the Sidebar and Tab bar navigation pattern, which translates well to all platforms and give you the power to adapt for any type of content. Also, we'll use Lazy Grids to make the layout adaptive to all devices and we'll learn the new Matched Geometry Effect to create beautiful transitions between screens without the complexity. This is a real app that will be launched to the App Store in September. All the source files and designs are shared so you can use this as a template to build your own app.

Requirements

Developing for iOS 14 requires a Mac with Catalina and Xcode 12. It is recommended that you upgrade to Big Sur in order to build for macOS using SwiftUI. You can still follow the iOS parts, which is the main focus of this course. However, some steps and code specific to the macOS app may not work.

If you've never touched SwiftUI before, it is recommended to take my SwiftUI for iOS 13 course beforehands as it will go more in-depth with the basics. Beginners can take this course, but minimum experience with HTML and CSS (or coding equivalent) recommended.

Lazy Grid Layout

One of the biggest upgrades is the new Lazy Grid in SwiftUI. Not only does it make your layout completely adaptive to every screen size, it'll lazy load the content for better performance. Lazy grids can be spread vertically or horizontally and can be both flexible and adaptive (similar to auto-fit in CSS Grid).

Matched Geometry Effect

With this new technique, you can create beautiful transitions between two different views. Shared elements will animate smoothly from one screen to another. This makes animations much more manageable and allows you to create beautiful app experiences without adding complexity.

Sidebar

The sidebar is now a standard for iPadOS and macOS. It makes your app significantly easier to navigate, maximizing the use of the screen's real estate. Apps like Mail with deep, multi-level content can hugely benefit from this pattern since you can have a supplementary menu.

Widgets

Widgets allow you to place interesting contents of your app in your users' Home screen, if they so choose. Implementing a simple widget in SwiftUI is very straightforward and you can separate the resources for it. Additionally, there are 3 formats: small, medium and large, and you can update the content based on the time of the day.

Install Xcode 12

For Big Sur, Xcode has made significant changes to its toolbar and visual editing tools such as the Previews and the Inspector. The built-in documentations for SwiftUI has improved significantly. In order to follow this course, you will need to download Xcode 12 beta 2 or newer.

Install SF Symbols

Apple introduced SF Symbols 2 this year with almost a thousand more icons and multi-color icons. All these icons can be used for all of Apple's platforms for free and effortlessly in SwiftUI.

Download SF Fonts

If you're designing for iOS, it is essential to download the SF Fonts from Apple. There are 4 fonts:

SF Pro for iOS, iPadOS and tvOS
SF Compact for watchOS
SF Mono (optional) for code highlighting
New York for a serif typeface

Figma Template (optional)

As I was building this app, I created a Figma template out of necessity for the App Icon for both iOS and macOS. Also, I'm sharing the design files so you can check how I made the user interfaces.

Create a Multi-Platform app

We'll create a Multiplatform app, which allows you to build for macOS, iPadOS and iOS using the same codebase. The files and folders and neatly organized so that you can easily separate the resources for each platform.

More resources to learn SwiftUI

You can watch SwiftUI WWDC videos using the Developer app from Apple.
Download the Fruta app to explore and learn how Apple made their sample app using the new techniques introduced in WWDC 2020.
SwiftUI by example by Paul Hudson is an excellent place to find short tutorials on key techniques for SwiftUI.
Jordan Singer from Recreate shares a lot of source code for popular apps recreated in SwiftUI.

Download source files

Download the videos and assets to refer and learn offline without interuption.

Design template

Source code for all sections

Video files, ePub and subtitles

Videos

ePub

Assets

Subtitles

Build a SwiftUI app for iOS 14

Build a multi-platform app for iOS, iPadOS and Big Sur