SwiftUI is a powerful new way to create user interfaces for Apple platforms. It was announced at WWDC in 2019 and comes as part of Xcode 11 which is currently in beta until iOS 13 launches.
SwiftUI replaces storyboards and XIBs and provides a new way to create user interfaces across all Apple platforms.
Traditionally, there were a couple of ways to create the views of your app. One way was to declare it in code where you would describe where objects are on the view, and then manipulate them as needed in code. Alternatively, you could draw out your views in the storyboard, connect each view with a segue, and then create actions and outlets on the class associated with a view controller.
Some developers prefer to write code to create user interfaces while others preferred to draw them out in the Storyboard. SwiftUI combines these two approaches together and gives the best of both worlds. Unlike Storyboards which are backed by XML, SwiftUI is backed by Swift.
Benefits of this include:
- Merge conflicts are minimised because when they do exist, the Swift backed code is more easy to understand when compared to XML that backed a storyboard.
- You can choose to create your user interface using Swift, or create it visually in the editor. It is declarative which means that when you write the code, a preview is updated so that you can immediately see the changes. Likewise, if you edit the view visually, the Swift code is immediately updated. You can swap and change as needed.
- Because of Catalist on macOS Catalan, you can also use the same SwiftUI code to create a user interface for a mac app and use the same codebase.
Below is a list of tutorials to help you get started with SwiftUI. Please note that this will be updated periodically, mostly because SwiftUI is still in beta and changes are inevitable, but also as I learn more about SwiftUI I will write about and link to that below.
Views
Combining custom views – This tutorial shows how custom views can be created and then combined just like any other SwiftUI view can be.
Text View – Put text on the screen.
Stacks
HStack, VStack, ZStack Tutorial – This tutorial shows the basic way to use stacks.
List
A List with Static Cells – A SwitftUI List View is used to make table views. This short tutorial shows you how to create a list with static cells.
A List with Dynamic Cells – This List tutorial is similar to the static cells one, but instead of manually specifying the data for each cell, we create an array of data and pass that in to the List to be viewed. However many items you add to the array will be put on the view.