What is the Navigation Controller? How to generate the “back” button in the iOS app?

As the animation of Figure 1, it is frequently necessary to incorporate a “back” button within an iOS App, enabling users to navigate to the previous page.

Figure 1 The usage animation of the iOS built-in “back” button

Intuitively, we will add a “back” button on the second page, as Figure 2 shows, and then go back to the previous page by using the “show” segue of the button.

Figure 2 Intuitively design the “back” button in the Storyboard

After launching the stimulator, the result will be depicted in Figure 3. Taking a closer look, when the “back” button is clicked, the application regenerates a new previous page instead of redirecting back to the original page as intended.

Figure 3 The application always regenerates a new previous page

However, it’s not the result we want. Now, we’re going to introduce today’s highlights — Navigation Controller.

The navigation controller is the controller that manages the controller and belongs to the container view controller.

The “back” button to return to the original page can be achieved through the following steps:

1. Click the navigation controller to display the first controller or the component on the controller screen.
2. Click on the first symbol like “embed in” in the lower right corner, as shown in Figure 4.
3. Select “Navigation Controller” in the menu.

Figure 4 The menu of the Navigation Controller

Finally, if we see the Navigation Controller screen appearing at the front of the Controller View in the Storyboard like in Figure 5, it means we have succeeded!

Figure 5 After adding the Navigation Controller

Figure 5 illustrates that except for the view of the first controller to be displayed by the navigation controller, a “back” button automatically appears in the upper left corner of other pages connected to the first view.

Hence, the Navigation Controller is the easiest way to go back to the original previous view.