SwiftUI
An introduction and beyond
Dimitris Tsiflitzis
SwiftUI is brand new, but...
- Everything you know about UIKit is still useful and will be for the foreseeable future.
- Everything you know about Swift hasn’t changed at all.
- Everything you know about the way iOS apps look, feel and behave hasn’t changed.
What is SwiftUI?
- SwiftUI is a user interface framework that allows us to design apps in a declarative way.
- It acts as a cross-platform user interface layer that works across iOS, macOS, tvOS, and watchOS.
- Insignificant learning curve compared to UIKit (great for designers & new developers e.g. react or flutter)
- Optimised for modern apps*
Optimised for modern apps
- UI state can be modified from multiple sources (notification, network, app state, user interactions, system changes).
- The request/response model is outdated on UI applications.
FAQ
- Which to learn: SwiftUI or UIKit?
- Does SwiftUI replace UIKit?
- Does SwiftUI use Auto Layout?
- Is SwiftUI fast?
- Can you mix views from SwiftUI and UIKit?
Authors note
There is no pressure to keep up with the
Latest
Greatest
Biggest
and more badass
Best
Migrating
- UITableView: List
- UICollectionView: No SwiftUI equivalent
- UILabel: Text
- UITextField: TextField
- UITextField with isSecureTextEntry set to true: SecureField
- UITextView: No SwiftUI equivalent
- UISwitch: Toggle
- UISlider: Slider
- UIButton: Button
- UINavigationController: NavigationView
- UIAlertController with style .alert: Alert
- UIAlertController with style .actionSheet: ActionSheet
- UIStackView with horizontal axis: HStack
- UIStackView with vertical axis: VStack
- UIImageView: Image
- UISegmentedControl: SegmentedControl
- UIStepper: Stepper
- UIDatePicker: DatePicker
- NSAttributedString: Incompatible with SwiftUI; use Text instead.
Elements: Text
Text("This is some text")Elements: Layout
HStack {
Text("SwiftUI")
Text("rocks")
}
VStack {
Text("SwiftUI")
Text("rocks")
}
ZStack {
Text("SwiftUI")
Text("rocks")
}Elements: Text input
@State private var name: String = "Tim"
TextField("Enter your name", text: $name)Elements: Lists
List {
Text("First!")
Text("Second")
}
let first = "1"
let second = "2"
let third = "3"
let all = [first, second, third]
List(all) { item in
Text(item)
}Elements: Forms
@State private var enableLogging = false
Form {
Toggle(isOn: $enableLogging) {
Text("Enable Logging")
}
Button(action: {
}) {
Text("Save changes")
}
}Elements: Containers
NavigationView {
Text("SwiftUI")
.navigationBarTitle("Welcome")
}
TabView {
NavigationView {
Text("SwiftUI")
.navigationBarTitle("Welcome")
}
NavigationView {
Text("SwiftUI")
.navigationBarTitle("Welcome")
}
Text("SwiftUI")
}Hello world!
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello World")
}
}Let's code!
deck
By tsif
