SwiftUI #1 - Using Views

By Amit Bijlani on Jul 12, 2019


About

At WWDC 2019 Apple introduced SwiftUI, a brand new tool kit for writing user interfaces for any Apple platform - declaratively. This allows you to tell SwiftUI how you want the UI to look and work instead of how. Throughout this series we will explore the principles of the SwiftUI framework and what they mean.

In this tutorial we’ll explore Views, a fundamental building block of the SwiftUI framework which can help you create complex views with less code and iterate faster.

SwiftUI | Apple Developer

Transcript

SwiftUI #1 - Using Views in SwiftUI

Hi my name is Amit Bijlani, a developer and teacher at Big Nerd Ranch.

In this screencast we will explore Views in the SwiftUI framework. A view is a fundamental building block of the SwiftUI framework which can help you create complex views with less code and iterate faster. Throughout this series we will explore the principles of SwiftUI what they mean.

To use SwiftUI you will need Xcode 11. You will need to upgrade to Catalina only if you want to take advantage of the live canvas preview, otherwise Xcode 11 with latest version of macOS will suffice.

We will create a new Single View application and called it Views and make sure that the option for SwiftUI is checked.

You will notice that we have a modified template. We have our familiar ApplicationDelegate but we also have a SceneDelegate which relates to the new multi-window support. So your app can have multiple windows or scenes each backed by the same app delegate.

And then we have the ContentView.swift file.

In SwiftUI a View is a struct that conforms to the View protocol rather than a class which inherits from a base class like UIView. Views are defined declaratively as a function of their input.

To live preview how the ContentView looks like we need to display the Editor and Canvas side by side. Then click on resume to start the live preview.

The preview in the canvas is generated by code. It is provided within the debug macro where we create an instance of the ContentView. We will dive more into the PreviewProvider later in this video.

Back to the ContentView. A view defines a piece of UI. The view protocol has only one requirement which is the body property, it is of an opaque result type some View. Which expects the Body property to return a concrete type that conforms to the View protocol. Text is a view that displays one or more lines of text and it's initializer takes a String. By default if the text is too big to fit the given width then it truncates the text. You can specify a line limit by calling the function lineLimit which takes an optional integer. A nil means that it can span multiple lines. An integer means that it can span the max number of lines specified after which it truncates it.

Text(“Hello World”).trunctionMode(.head)

Text also has trunctionMode which instructs it how it should truncate text. You have three modes: head meaning truncate the beginning of the text, tail meaning truncate the end of the text and finally you have the middle. To truncate the middle of the text.

You can also change the font by using the font modifier Text("Hello World").font(.title)

Where you specify one of the system defined dynamic font types.

Next, let’s take a look at an image. This time we will find the control using the view library which can be accessed from clicking the “+” button at the top right of the toolbar in Xcode. Search for Image and drag / drop the Image view on our code.

Let's drag a new image to the Asset catalog. Now all we have to do is provide the name of the image to the initializer: Image("logo") and it displays the image centered vertically and horizontally. The size of the image view is the size of the image as denoted by the border around the content.

You can also display the latest San Francisco symbol set as an Image. You can download the symbol browser by downloading the app. See the link to it in the description SF Symbols browser app.

Here's the app for the symbol browser.

To display a SF symbol use the initializer with the label systemName Image(systemName: "eyeglasses"). The symbol set icons are vector based which means they can be colored and scaled.

Image(systemName: "eyeglasses").font(.largeTitle) to increase the size and it uses dynamic type.

Or you can change its color Image(systemName: "eyeglasses").foreground(.red)

Finally, we will look at the preview. To make the preview dynamic we can add a stored property to our ContentView, we will call it name and provide it a default value.

struct ContentView : View {
    var name = "eyeglasses"
    var body: some View {
        Image(systemName: name)
    }
}

Now we can send the name of the symbol when we create an instance of ContentView(name: "lasso") instead of it being static. We will see the power of this in future videos when working with lists or multiple views. The PreviewProvider can help us live preview with test data under different environments.

In this screencast, we learned about the fundamental building blocks of SwiftUI. Looked at the declarative syntax, how to implement views, images, and preview it in the live canvas.

This is Amit Bijlani signing off. Hope to see you next time.

Downloads

Project files are only available for subscribers. Create an account today to access our collection of screencasts, skill packs, and more.

Comments