Learn about swiftUI (part 2): Building navigation

Tram Ho

I. introduction

In Part 1, I introduced some basic operations with SwiftUI and how to create a simple list view using SwiftUI. In this next section, we will continue to do a few more things for the App to be more complete. Specifically what we will do:

  • Modify the Text view of cells, by adding attributes that SwiftUI calls modifiers
  • Add NavigationView, just like UINavigationController, to display title and handle scrolling between screens
  • Adding processing when we touch the cell, specifically when selecting the cell, we switch to the detail screen, like the function of UITableViewDelegate

II. content

This article will continue the source code of part 1, you can review part 1 here

1. Text view interface

Reviewing the previous section a bit, we can add a modifier in several ways:

  • Add code directly: fast, compact, fast, but only suitable for people who have familiar code, not familiar with the unknown syntax, of course, can not code. Later we will use this method only as the main.
  • Drag and drop: similar to drag and drop in the storyboard, you click on the “+” icon, select the tab “Show the Modifiers library”, select the modifier and drag on it. You can drag to the preview screen, or directly to the code file
  • SwiftUI Inspector: use the combination of “command + click”, select Show SwiftUI inspector, then select the modifier you want to add

OK, now we will practice. Suppose I want to:

  • The text name has a large Size, orange text, and a gray background
  • Text price has red text, gray border, border width is a relatively bad design, but I’m a customer, I like that, do it for me!

To make these changes, first open PhoneCell.swift file.

First, we use “command + click” on the Text name to open the SwiftUI inspector, you choose the following:

  • In the Font section, choose Font is large title, color is Orange
  • In the Adddown modifier, select Background, select gray for the background. After selecting, the SwiftUI inspector box will be as shown below.

Next, we use drag and drop to add a modifier to the Text price. You select the “+” icon, select the tab “Show the Modifiers library” and in turn:

  • Find the Border (below), drag and drop into Text price. Go into the code and change the color to Color.gray.
  • Find the Foreground Color, drag and drop it into the Text price. Go into the code and change the color to Color.red.

After doing the above steps, the code in PhoneCell.Swift’s body will be as follows:

2. Add NavigationView

You open the file ContentView.swift, currently the body of this View is code as follows:

To add NavigationView, we just need to add the following code:

The code is too simple, just the NavigationView wrapper for List is done: v What about adding a title for the View, like the navigation bar title? Simply add the following code:

SwiftUI is only in the first version, there are still many shortcomings that need to be improved, for example here we cannot (not yet) use SwiftUI to customize for the Navigation Bar title Certainly this problem will be solved in the future. , at the present time we still have to use UIKit to do this. The Customize Navigation Bar title is a bit confusing, and is not in the content of this article, so I will not mention in the article, you can Google code if you want it.

3. Handling screen transitions with action tap

To switch the screen (push view controller), we use the NavigationLink. Specifically, to switch the screen we do the following;

There, that much code is you have to manipulate push view controller already. Here we use the NavigationLink function (destination:, label:), in there

  • destination: is View will display in the screen after being pushed. Like ContentView, destination View will be wrapped in a UIViewController, and UINavigationController will push that UIViewController into the stack.
  • label: is a closure return View which when clicked will perform the push action, specifically here is PhoneCell.

Now we will test the App using the preview. The preview of SwiftUI is very beneficial, not only can we see the changes of the View as soon as the code is fixed, but we can also operate on the preview as if running on the simulator. To perform the test, click on the “Live preview” button with the play icon as shown in the following image

Wait a bit to preview load, and then we can operate as on the simulator:

  • Click on cell to switch to detail screen
  • Click back to return to the list screen

4. Building a phone detail screen

In the previous section, we added the function of selecting the phone cell to go to detail, but in reality the detail screen never has only 1 Text View, so we will create a Detail View to switch to that screen.

First, you create new files: File -> New -> File … -> SwiftUI View, name it PhoneDetail and click create to create.

Next, you add the code with the following content:

In the above code, we do the following:

  • 0: add property for PhoneDetail View, namely 2 property phones and info
  • 1: Build the View for the PhoneDetail screen. How to add the View, I mentioned above, so I will not say again. Notice the Divider is a View of SwiftUI, and as the name implies, it is used to separate the View by creating a line between the views.
  • 2: VStack View padding so that the text in VStack does not overflow on the edge of the phone screen
  • 3: create navigation title for the PhoneDetail screen

Back to the ContentView.swift file, we change the body of ContentView as follows:

Above, in the Navigation desination param of NavigationLink, instead of initializing the Text View instance, we initialize the instance of PhoneDetail View, that’s it.

Using live preview to run the test, we get the phone screen result as follows:

III. summary

In this article, I have continued to show you some more interesting things about SwiftUI. In the following sections, I will continue to introduce you to other parts, so that we can create the App using just SwiftUI.

Finally, thank you for following this article, have a nice day ?

Share the news now

Source : Viblo