SwiftUI is a markup language that makes it possible to build user interfaces for all Apple platforms using a declarative Swift syntax. This blog post is an introduction to SwiftUI and explains the basics.

Layouts that are written using SwiftUI, can be shared between all Apple platforms. For example, if you markup a button in SwiftUI, you’re able to use this button layout in both iOS, iPadOS, macOS tvOS, and watchOS.

Starting a new project

To get started, open Xcode and create a new project. For project language, choose Swift and for User Interface SwiftUI.

If you’re not able to select SwiftUI at the user interface settings, you may need to update your Xcode version, because you need Xcode 11 or higher to use SwiftUI.

Create a new SwiftUI project in Xcode
Create a new project and set the User Interface to SwiftUI.

Now the new project is created, we can put our hands into code! A few files are automatically generated when your project is set up by Xcode. One of the files is ContentView.swift, which contains the User Interface code.

When you open the file for the first time, the content will be like below:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello World")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

First, SwiftUI is imported, allowing us to use all view elements from the SwiftUI library. Below the imports, a struct named ContentView is written. This ContentView contains the whole layout, in this example only a Text view with “Hello World”.

At the bottom, a struct named ContentView_Previews is written. This is a PreviewProvider, which makes it possible to see a preview of the view in Xcode without opening a simulator.

UI elements and layout

If you are familiar with UIKit, you may now that there are a lot of different UI elements to display content. SwiftUI contains the same UI elements as UIKit, but have a different name. All elements in UIKit start with UI, like UITextField. In SwiftUI, the name of a text field is just ‘TextField’. Some elements have another name, for example, a UILabel is a Text element and a UISwitch is named Toggle in SwiftUI.

UI elements can be added to the body of the view. In SwiftUI, elements are not positioned using constraint. Elements will be scaled automatically depending on the content. Instead of using constraints, SwiftUI is using HStack and VStack elements to align UI elements.

To align two labels near each other, use a HStack element. To align two labels below each other, use a VStack.

Example:

var body: some View {
  VStack {
    Text("Jeroen")
    Text("Jeroen")
  }
}

The above example shows two text elements below each other. They are aligned below each other because the VStack is positioning the elements.

Elements can get padding or margin to align. There are modifiers available to set the padding or margin.

Example:

var body: some View {
  Text("Jeroen").padding()
}

SceneDelegate

The SceneDelegate is responsible to set up the first view that should be displayed after launching the app. Inside the function scene(_:willConnectTo:options:), a SwiftUI view is created and presented using a UIHostingController.

If you want to change the default name that Xcode creates for your SwiftUI view (named ContentView), also update the name in the SceneDelegate to prevent your app is not working anymore.

Learn the basics of SwiftUI

SwiftUI is a brand new language, which brings a small learning curve before you’re able to use it. To get started, Apple created a series of tutorials explaining the basics of SwiftUI.

SwiftUI and UIKit can be used together when creating a layout. However, if you’re going to use SwiftUI, you can only target iOS 13 / tvOS 13 / WatchOS 6 or higher. This means your app can’t be used on older system versions.

Conclusion

SwiftUI is a new way to build user interfaces for iOS and other Apple platforms. It’s a big benefit that the language supports all Apple platforms, which means code, for example, can be shared between watchOS and tvOS apps.

🚀 Like this article? Follow me on Twitter for more SwiftUI related blogs!

Categories:SwiftUI