Open menu with table of contents iOS Development - SwiftUI Basics
Logo of Stuttgart Media University for light theme Logo of Stuttgart Media University for dark theme
Mobile Application Development 2

iOS Development - SwiftUI Basics

Stuttgart Media University
07.05.2024

1 Agenda

  • Why SwiftUI?
  • Toolset overview
  • Working with Views
1 / 12

2 What is SwiftUI?

  • SwiftUI was introduced with iOS 13 in autumn 2019 and only runs on iOS 13 (or above) devices
  • Next to StoryBoards SwiftUI allows to define the User Interface (UI) of your app
  • In contrast to StoryBoards where the UI is defined using a WYSIWYG editor, SwiftUI allows you to code your UI in Swift
  • It is a declarative way of defining a UI, similar to what other frameworks such as Jetpack Compose (in Kotlin) for Android, Flutter (Google) and React (Facebook) do
2 / 12

3 Why SwiftUI?

  • Pros of SwiftUI in comparison with StoryBoards
    • StoryBoards can become very complex and large, this can lead to confusion and slow loading times
    • The XML code of StoryBoards is generated, making it hard to control whats going on in detail
    • The separation between UI and code makes it sometimes complicated to add dynamic behavior to components
    • It is sometimes easier to declare everything in one place and in one language and being independent of a WYSIWIG editor
    • ...put your pro here
3 / 12

4 Why SwiftUI?

  • Drawbacks of SwiftUI
    • Sometimes a separation between code and UI is helpful in a team with different responsibilities
    • A designer needs to work with Swift code and StoryBoards is easier to use for non programmers
    • Complex UIs in SwiftUI can become also very diffcult to understand in code
    • ...put your drawback here

SwiftUI is just another option of defining your UI. It does not replace UIKit and depending on your requirements it may or may not be the better option to use for your app. Before StoryBoards, there was a discussion between the Objective-C enthusiasts who would only programmatically develop their UI and the others who did it using Interface Builder. Now this discussion may return, but differently.

4 / 12

5 Toolset

  • When you want to use SwiftUI, you need to select SwiftUI instead of StoryBoards as "User Interface"

center 50%

5 / 12

6 Toolset

  • Your project will then contain a ContentView.swift file as shown here
  • Xcode (since version 11.4.) provides a new SwiftUI preview (called Canvas) that will show the rendered content of your view. You may need to press the "Resume" button once to start it.

center 50%

6 / 12

7 Working with Views

  • SwiftUI defines multiple simple UI components that you can use
  • The protocol View defines methods and properties (e.g. body) with default implementations, that all basic SwiftUI types conform to. You can create custom Views that conform to the View protocol
  • Basic SwiftUI component types (structs) are, e.g.:
    • Text, TextField, SecureField
    • Image
    • Button
    • Slider, Stepper
    • Lists, ScollView, Form, Group and many more...
7 / 12

8 Working with Views

  • You can easily add view components to your View by selecting from the Library and drag&dropping them on the code, as shown here:

center 50%

8 / 12

9 Working with Views

  • For the layout of your Views you can use View components such as:

    • HStack - a view that arranges its children in a horizontal line
    • VStack - arranges children in a vertical line
    • ZStack - overlays its children, aligning them in both axes

  • For Navigation between views you can use:

    • NavigationView
    • TabView
    • HSplitView, VSplitView
    • Alert - shows an alert presentation
9 / 12

10 Using State in SwiftUI

More information on State and Bindings can be found here

10 / 12

11 SwiftUI conclusion

  • SwiftUI offers even more functionality but basically it is just another way to create your UI and not a replacement for UIKit
  • It also supports integration of UIKit views easily using the UIViewRepresentable protocol. All you need to implement is a makeUIView(context:) and the updateUIView(_:context:) methods e.g. as shown here:
struct MapView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }

    func updateUIView(_ uiView: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(
            latitude: 34.011286, longitude: -116.166868)
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        uiView.setRegion(region, animated: true)
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}
11 / 12

12 References

12 / 12