Hello, SwiftUI!

Hello, SwiftUI!

This episode, we will take a look at SwiftUI, a brand new framework just released at WWDC 2019. We will create just a basic view of text and an image to show off how it works.

Getting started with SwiftUI

We will start with a basic SwiftUI View. The only requirement is to return something from the body property. We will return a text element here. You'll notice that the text elemtn shrink wraps its content, and the parent view places it at the center of the screen in its container. We can tweak this view by using modifiers. These alter the way views are rendered. Note that order matters here, so you'll get a different result if you add padding before the background color or after.

struct ContentView : View {

    var body: some View {

        Text("Hello World")
            .font(.largeTitle)
            .fontWeight(.black)
            .foregroundColor(.white)
            .padding()
            .background(Color.red)
    }
}

Working with View Container

SwiftUI defines a few containers which can be used to arrange multiple views. We will use the VStack or vertical stack. The elements of this container are centered horizontally by default. We can change the alignment by setting it to .leading or .trailing.

struct ContentView : View {

    var body: some View {
        VStack(alignment: .center) {
            Text("Hello World")
                .font(.largeTitle)
                .fontWeight(.black)
                .foregroundColor(.white)
                .padding()
                .background(Color.red)

            Text("this is Swift UI, isn't it neat?")
                .font(.title)
                .padding()
                .background(Color.green)
                .foregroundColor(.white)
        }
    }
}

Swift also provides HStack or horizontal stack container where elements are placed horizontally and are centered vertically by default. We can set the alignment of this container to .top, .bottom or .center.

Working with Images

Now we will work with an Image. To create an image we are using icons provided by SF symbols. To have views lay on top of one another we can use a ZStack, which is another type of view container provided by SwiftUI.

struct CircleStar : View {
    var body: some View {
        ZStack {
            Image(systemName: "circle")
                .resizable()
                .aspectRatio(1, contentMode: .fit)
                .frame(width: 180)
                .foregroundColor(.blue)

            Image(systemName: "star.fill")
                .resizable()
                .aspectRatio(1, contentMode: .fit)
                .frame(width: 200)
                .foregroundColor(.blue)
        }
    }
}

To render our custom CircleStar view into our main ContentView we can simply instantiate it:

CircleStar()

Displaying Preview across the screen in Catalina

Xcode 11 on macOS Catalina provides a live preview section which runs on the screen simultaneously. It also provides preview mode which defines the frames of the elements.

#if DEBUG
struct CircleStar_Previews : PreviewProvider {
    static var previews: some View {
        CircleStar()
    }
}
#endif

We can use this to customize the preview behavior (changing devices, frames, etc) or by providing test data to see how everything renders.