Build a multi-platform app from scratch using the new techniques in iOS 14. We’ll use the Sidebar and Lazy Grids to make the layout adaptive for iOS, iPadOS, macOS Big Sur and we’ll learn the new Matched Geometry Effect to create beautiful transitions between screens without the complexity. This course is beginner-friendly and is taught step-by-step in a video format.
This year, SwiftUI got major upgrades from the WWDC 2020. The big news is that thanks to Apple Silicon, Macs will be able to run iOS and iPad apps soon. SwiftUI is the only framework that allows you to build apps for all of Apple’s five platforms: iOS, iPadOS, macOS, tvOS and watchOS with the same codebase. New features like the Sidebar, Lazy Grid, Matched Geometry Effect and Xcode 12’s visual editing tools will make it easier than ever to build for multiple platforms.
To follow this course, you can download the source file, which will help you compare your progress.
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.
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.
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.
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.
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 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 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.