Let’s continue with WWDC2019’s Introducing SwiftUI: Building Your First App to learn how to use SwiftUI.

Download the project

At the end of the last tutorial, we will introduce custom data and pictures this time. I have saved these data and pictures in the Github project swiftui-From-Zero/wwDC2019_building_your_first_app. Please download the code. Watch the hand movements as I continue my tutorial. Download the required commands as follows:

git clone https://github.com/swiftui-from-zero/wwdc2019_building_your_first_app.git
cd wwdc2019_building_your_first_app
git checkout startup
Copy the code

After downloading, please open wwdc2019_building_your_first_app/Room/ room.xcodeProj with Xcode to open our conference Room project.

The current version of the project is different from where we left off in the last tutorial with the addition of Rooms. Xcassets, a folder containing images we’ll use later, and room.swift. Room. Swift mainly contains Room, a structure used to describe the meeting Room, and some test data.

struct Room: Identifiable {
    var id = UUID(a)var name : String
    var capacity : Int
    var hasVideo : Bool = false
    
    var imageName : String {return name}
    var thumbnailName : String {return name + "Thumb"}}Copy the code

Note that in order for SwiftUI’s List to be able to use this custom structure, Room needed to contrarily agree, and implement a VAR ID as its unique identifier. With the ID implemented, the List can locate changes in members.

Pass in and present the data

When you open your project, if the contentView.swift screen doesn’t show up, just click on contentView.swift in the list of files on the left. Xcode automatically generates a lot of files and folders for us, so for this tutorial we’ll only need to consider a few.swift files in the Room folder.

After the interface is restored, let’s import the data into the view. Inside the ContentView, add a member variable — a Room array for storing conference Room information:

struct ContentView: View {
    var rooms : [Room] = []

    var body: some View {
        .}}Copy the code

In the code responsible for preview (i.e. Contentview. swift excluding struct ContentView), initialize the view with the test data in Room.swift. The SwiftUI convenience is that previews are dynamically adjusted as code changes, making it easy to view them in real time as you write code.

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        // This should be ContentView()
        ContentView(rooms: testData)
    }
}
Copy the code

Now that we have passed the data to the view, the next natural step is to visualize the data, displaying a list of conference rooms. We need to change the List input from 0.. < 5 changes to rooms to pass information from each conference room to each node in the list. Secondly, change the hard-coded “Rooms” and “20 people” into the name and capacity of the conference room respectively. Finally, change the image to a thumbnail of the room (room.thumbnailName indicates the name of the thumbnail of the image, and Xcode automatically selects the desired icon from my pre-added image based on that name). In the GIF below, you can clearly see how the preview changes dynamically with the code on the left.

After the above changes, the code for ContentView becomes:

struct ContentView: View {
    var rooms : [Room] = []

    var body: some View {
        List(rooms) { room in
            Image(room.thumbnailName)
            VStack(alignment: .leading) {
                Text(room.name)
                Text("\(room.capacity) people")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
    }
}
Copy the code

Next, we want to add a rounded corner to the image. ForegroundColor (.secondary) is used to call a method at the end of the view. This method is called modifier in SwiftUI. Instead of adding code directly, here we show how to add modifier using drag and drop.

Click the “+” in the upper right Corner, select Modifers, and search for Corner Radius. Drag the Modifier onto the preview image and set the desired fillet radius.

Realize the jump function

So far we have a nice list of conference rooms, but there is a limit to what we can show and the pictures are too small to look at. So we want to click on a conference room to display its details. To do this, we need to implement a jump feature first.

First, wrap a NavigationView layer around the List view. Then add.navigationTitle(Text(“Rooms”)) after the List as the title of the current navigation page.

Then add a NavigationLink view to the member of the List. This view takes two inputs: the target view after the jump, and the current view. For simplicity, we temporarily set the jump view to a Text that displays the name of the conference room, so the first input is destination: Text(room.name). The second parameter is the list grid for each previous conference room.

At this point our jump function is complete. But how do you check it out? You can click the run button (the one with a triangle in the circle) on the preview screen to enter the real-time preview mode. In this mode, you can see the effect of the jump by clicking on the panel of the conference room.

As you can see above, SwiftUI automatically animates the transformation. Not only that, but if we move slowly across the page, SwiftUI automatically highlights the selected parts, and tweens, shrinks, and colors all parts of the view as we move, making the process very natural. We didn’t write any animation-related code! This is one of SwiftUI’s great strengths, as the framework itself automatically generates animations for the user to use on iOS.

Extract subview

With the addition of jumps, the ContentView becomes a little more complex, and we need to consider abstracting the view. Let’s try to pull the units out of the List. Xcode provides very convenient abstraction tools. Hold command and click on NavigationLink, select Extract Subview, and Xcode will automatically convert it to an ExtractedView as well as rename it directly, in this case we’ll call it RoomCell.

There is no room variable in RoomCell, so we will find an error. We need to modify the code simply and fill in the room member variable. After the change, contentView.swift becomes:

// ...

struct ContentView: View {
    var rooms : [Room] = []

    var body: some View {
        NavigationView {
            List(rooms) { room in
                RoomCell(room: room)  / / into the room
            }
            .navigationTitle(Text("Rooms"))}}}// ...

struct RoomCell: View {
    let room : Room  // Create a room variable
    
    var body: some View {
        NavigationLink(
            .}}}Copy the code

At this point, our view is ready to preview normally again.

Due to space limitation, this article will come to an end. In this tutorial, you’ll learn how to present data in the SwiftUI view, how to perform page jumps, and how to extract subviews. In the next tutorial, we’ll start making a nice detail page and learn how to change views with user input, so stay tuned!