SwiftUI Basics

During one of our own developer events called "Mobile Hack Night", we gave a workshop about SwiftUI. We held the workshop at a time when SwiftUI has just been released and tried to introduce iOS developers to the basic concepts. With lots of hands-on coding and Q&A.

Transcript

1. 1 SwiftUI Basics Get hands-on experience with Apple's newest UI framework What you will build What you will learn Prerequisites We will create together our first SwiftUI app. It will be a blog reader and contain custom view components, user input, animation, navigation logic and much more. How SwiftUI works How to create custom views How to navigate between different views How to animate changes in your views How to mix UIKit and SwiftUI code • Xcode 11.1 / 11.2 • macOS Catalina • Swift knowledge Key Vocabulary • SwiftUI • Declarative UI • Property Wrappers • Opaque result types • Modifiers • Views 2. QuickBird HackNight Setup
2. SwiftUI Basics © 2019 QuickBird Studios Hack Night What is SwiftUI? • Apples newest UI framework for the Mac, iPhone, iPad, Watch and TV • Made 100% for Swift usage • Apples first declarative UI framework • Handles accessibility, dark mode etc. automatically • Includes Live preview and hot reloading 2
3. SwiftUI Basics © 2019 QuickBird Studios Hack Night Why SwiftUI? 3 Better Apps. Less code.
4. SwiftUI Basics © 2019 QuickBird Studios Hack Night 4 main keywords • Declarative • Automatic • Compositional • Consistent 4
5. SwiftUI Basics © 2019 QuickBird Studios Hack Night Declarative UI? • Describe “what it should be like” instead of “how to create it” • Replaces old imperative style of UI programming • Requires a slight shift in thinking • Other famous examples: React, Flutter, Jetpack Compose 5
6. SwiftUI Basics © 2019 QuickBird Studios Hack Night Automatic • Dynamic Type • Dark Mode • Localization • Accessibility 6
7. SwiftUI Basics © 2019 QuickBird Studios Hack Night Compositional 7
8. SwiftUI Basics © 2019 QuickBird Studios Hack Night Compositional 8
9. SwiftUI Basics © 2019 QuickBird Studios Hack Night Compositional 9
10. SwiftUI Basics © 2019 QuickBird Studios Hack Night Consistent 10 iOS iPadOS watchOS tvOS macOS • All new Swift APIs • No strange fault lines between Swift and ObjC APIs • Learn Once, Apply Everywhere
11. SwiftUI Basics © 2019 QuickBird Studios Hack Night What do you need to get started? • SwiftUI applications need at least iOS 13 or macOS Catalina • Live preview only available on Xcode 11 running on macOS Catalina • A lot of patience and good will 11
12. SwiftUI Basics © 2019 QuickBird Studios Hack Night • Opaque result types • Omitted return keywords • Function builders • Property wrappers New Swift 5.1 features in SwiftUI 12 struct ContentView: View { @State private var place = "World" var body: some View { NavigationView { Text("Hello \(place)!") } } }
13. SwiftUI Basics © 2019 QuickBird Studios Hack Night • View is a protocol • Only requirement is a computed property body • body just returns another view • Struct instead of class What is a view in SwiftUI 13 public protocol View { associatedtype Body : View var body: Self.Body { get } }
14. SwiftUI Basics © 2019 QuickBird Studios Hack Night • View is a protocol • Only requirement is a computed property body • body just returns another view • Struct instead of class What is a view in SwiftUI 14 struct ContentView: View { var body: some View { Text("Hello World!") } } public protocol View { associatedtype Body : View var body: Self.Body { get } }
15. SwiftUI Basics © 2019 QuickBird Studios Hack Night Live coding: Creating your first SwiftUI project 15
16. SwiftUI Basics © 2019 QuickBird Studios Hack Night ViewModifier A modifier that you apply to a view or another view modifier, producing a different version of the original value. Apple’s SwiftUI Documentation 16
17. SwiftUI Basics © 2019 QuickBird Studios Hack Night ViewModifier 17
18. SwiftUI Basics © 2019 QuickBird Studios Hack Night Common Views and Controls • Image • Button • List • Form • Text 18 • NavigationView • NavigationLink • Spacer • Color • … https://developer.apple.com/documentation/swiftui/views_and_controls
19. SwiftUI Basics © 2019 QuickBird Studios Hack Night Stacks 19 HStack VStack ZStack
20. SwiftUI Basics © 2019 QuickBird Studios Hack Night Live Coding: Stacks 20
21. SwiftUI Basics © 2019 QuickBird Studios Hack Night Live coding: Building a Login form 21 Tutorial
22. SwiftUI Basics © 2019 QuickBird Studios Hack Night Exercise 1: Create a Toggle Switch for T&C 22 Tutorial https://github.com/quickbirdstudios/HackNight-SwiftUI
23. SwiftUI Basics © 2019 QuickBird Studios Hack Night Exercise 1: Create a Toggle Switch for T&C 23 Tutorial https://github.com/quickbirdstudios/HackNight-SwiftUI
24. SwiftUI Basics © 2019 QuickBird Studios Hack Night @State “A persistent value of a given type, through which a view reads and monitors the value.” Apple’s SwiftUI Documentation 24
25. SwiftUI Basics © 2019 QuickBird Studios Hack Night @State • When the state value changes, the view invalidates its appearance and recomputes the body. • Use the state as the single source of truth for a given view • State is view-specific and should be declared private. • View body can also be defined as a function of its state => body = f(state) 25
26. SwiftUI Basics © 2019 QuickBird Studios Hack Night @Binding “A manager for a value that provides a way to mutate it” Apple’s SwiftUI Documentation 26
27. SwiftUI Basics © 2019 QuickBird Studios Hack Night @Binding • Used for creation of a two-way connection between a view and its underlying model. • Updating the view changes the underlying model • Changes to the underlying model updates the view • Does not own the underlying model (source of truth) 27
28. SwiftUI Basics © 2019 QuickBird Studios Hack Night Live coding: Building a List 28 Tutorial
29. SwiftUI Basics © 2019 QuickBird Studios Hack Night Exercise 2: Create custom cell 29
30. SwiftUI Basics © 2019 QuickBird Studios Hack Night UIKit & SwiftUI 30
31. SwiftUI Basics © 2019 QuickBird Studios Hack Night UIViewRepresentable 31 public protocol UIViewRepresentable : View where Self.Body == Never
32. SwiftUI Basics © 2019 QuickBird Studios Hack Night UIViewRepresentable 32 func makeUIView(context: Self.Context) -> Self.UIViewType func updateUIView(_ uiView: Self.UIViewType, context: Self.Context) Creates a UIKit view to be presented. Updates the presented UIKit view (and its coordinator) to the latest configuration.
33. SwiftUI Basics © 2019 QuickBird Studios Hack Night Live coding: Mix UIKit & SwiftUI 33 Tutorial
34. SwiftUI Basics © 2019 QuickBird Studios Hack Night Animation • SwiftUI has built-in (and easy to use) support for animations • animation() modifier 34 easeIn easeOut easeInOut default linear spring interactiveSpring
35. SwiftUI Basics © 2019 QuickBird Studios Hack Night Gesture • Just like animations, SwiftUI has built-in (and easy to use) support for gestures • gesture() modifier 35 TapGesture DragGesture LongPressGesture Single Tap Multiple Taps
36. SwiftUI Basics © 2019 QuickBird Studios Hack Night Live coding: Animation & Gesture 36
37. SwiftUI Basics © 2019 QuickBird Studios Hack Night Exercise 3: Combining Animations and Gestures 37 Tutorial
38. SwiftUI Basics © 2019 QuickBird Studios Hack Night What did you learn? • How SwiftUI works • How to create custom views • How to navigate between different views • How to mix UIKit and SwiftUI code • How to animate changes in your views • How to add Gestures to your Views 38
39. SwiftUI Basics © 2019 QuickBird Studios Hack Night References • Apples SwiftUI „documentation“ (https://developer.apple.com/ documentation/swiftui/) • Learn SwiftUI with SwiftUI By Example by Paul Hudson (https:// www.hackingwithswift.com/articles/195/learn-swiftui-with-swiftui-by- example) • The SwiftUI Lab: When the documentation is missing, we experiment (https://swiftui-lab.com) 39
40. SwiftUI Basics © 2019 QuickBird Studios Hack Night 40 We hope you enjoyed it. Feel free to hack your way around or grab some beer Thank you!
41. SwiftUI Basics © 2019 QuickBird Studios Hack Night Exercise: WebView - Add Support for URLRequest 41 Tutorial
42. SwiftUI Basics © 2019 QuickBird Studios Hack Night @State 42 var projectedValue: Binding<Value> var wrappedValue: Value
43. SwiftUI Basics © 2019 QuickBird Studios Hack Night @State 43 @State private var username = "" … Section(header: Text("Credentials")) { TextField("Username", text: $username) } NavigationLink(…) .disabled(username.isEmpty) … projectedValue wrappedValue Binding