In this section, with an example in swift, we will get acquainted with the ui navigation bars in iOS or the ui navigation controller. We also learn how to use iOS navigation bars in swift apps.

IOS UI navigation bar (UI navigation controller)

In iOS, navigation bars or controls are used to effectively organize app content. In general, the navigation bar is displayed at the top of the app screen and just below the status bar. The navigation bar contains a series of button options such as the one shown below; Performs navigation between a series of application hierarchical screens.

If we click on an option in the navigation bar and move to a new screen; Similar to what you see below, a back button is displayed to the right of the navigation bar, which is the title of the previous page, and the best way to use the navigation bar in our applications; It is a navigation controller.

We add the UINavigationBar class reference; We can use the navigation bar in our iOS apps.

Now with an example of using swift, we show how to use the UI navigation bar in our iOS apps.

Create the iOS navigation bar app in Swift

To create a new project in Xcode on iOS, open Xcode from the application folder list. After opening Xcode, the welcome window will open as shown below. In the Welcome window, click on the second option, “Create a new Xcode Project”; Click (create a new Xcode Project) or select the File New Project path.

After selecting “Create a new Xcode project”, a new window will open in which we must select our template.

The new Xcode window includes several built-in application templates to implement the usual type of iOS apps, such as page-based apps, tab-based apps, games, spreadsheet apps, and more. These templates have a preset interface and source code files. .

For example, in the iOS navigation bar, we have the most basic pattern of the app, which is the “demo-only app”; We will use. To select this item, go to the iOS section on the left, select the application from the select section, and in the main part of the window that opens, select “single view application” and click on the next button, as shown below. .

After clicking Next, we will see a window like the one below, in this case we have to mention the project name and other details for our program.

Product name: “iPhone Articles”

The name we enter in the Product Name section is used for the project and application.

Organization name: “Tutlane”

You can enter the name of the organization or your name in this field; Of course you can leave that section blank.

Organization Identifier): “com.developersocociety)”

If you do not have an enterprise ID, enter com.example.

Bundle Identifier: This section is automatically generated based on the terms we entered in the product name and organization ID.

Language: “Swift”

Select the language type “Swift” because we want to develop applications using swift.

Universal (devices): “Universal”

Select the Devices option as Universal This means that this app is for all Apple devices; If you need to run the app for iPad only, you can select the iPad option to restrict your app to running only on iPad devices.

Use core Data: Not selected

This option is used for database operations. Select this option if you are doing any database-related operations in your application, otherwise do not select this option.

Include Unit Test: Not selected

If you need unit tests for your application, select this option otherwise leave it unselected.

Includes UI tests: not selected

Select this option if you need UI tests for your application, otherwise do not select it.

After completing the options, click the Next button as shown below.

When we click the Next button;

A new window will open in which you must use the location where you want the new project to be saved; Let’s choose. Once you have selected the new project storage location; As shown below; Click the Create button.

After clicking the Create button, Xcode opens and creates a new project. In our project, Main.storyboard and ViewController.swift are the main files used to design the user interface and maintain the source code.

Main.storyboard – which is the visual interface editor and this file is used to design the application interface.

ViewController.swift – which contains the source code of our application and we use this file to write any code related to our application.

Now select the Main.storyboard file in the project, until Xcode opens the visual interface editor as shown below.

Now select the ViewController.swift file from your project, which looks similar to the following:

Add UI controls to the display in Xcode

We are now adding controls to our application for that library of available objects. The object library appears at the bottom right of Xcode. If you did not find the object library, as shown below; Click the button that is the third button in the library selection bar on the left. (On the other hand, you can select the View Utilities Show Object Library path).

As we have suggested; Our interface is the Main.storyboard file, so open the Main.storyboard file. Now look for the View Controller in the Objects Library in the Filter box, then drag and drop the View Controller into the ViewController in the Main.storyboard, as follows; We need to add another View Controller to the Main.storyboard file.

When this is done; As you can see below;

The Main.storyboard file contains three ViewControllers (one default controller and two new controllers we have added).

We now add a navigation controller to our applications; To do this, click on the first ViewController and then in the toolbar section, click on the phrase Editor to do the following; Open its menu and then go to Embed In Navigation Controller.

s

Now select the Bar button item from the objects library and drag and drop it into the first ViewController, then click on the Bar button Item and name the buttons as shown below; change it.

Communicate iOS UI controls and Swift coding

We now communicate between the controls and the ViewController.Swift code. To do this, click on the Assistant button, which looks like two intertwined circles. This icon is located in the Xcod toolbar, as you can see below, in the right corner.

To map controls; Hold down the Ctrl key on the Home screen, similar to what you see below; Take the buttons from the first View controller and drag and drop them into the ViewController.swift file.

When we have finished mapping the buttons to the ViewController.swift file; Take the label from the objects library and drag it into the second ViewController and release it, then click on the label control and do the following; We change the text.

Likewise,

grab the label from the object library and drag it into the third ViewController; Then as follows; Click on the label and change its text.

When we have added all the controls; The Main.storyboard file will look like the following.

We now connect the buttons in the first view controller to the second and third view controllers. To do this, hold down the Ctrl key on the keyboard and take the Setting button from the first View controller and drag and drop it to the ViewController of the settings screen as shown below.

When the mapping was done; Click on the contact circle and select the Segue ID similar to the one shown below; Set to “SegueSetting”.

Now hold down the Ctrl key on the keyboard and drag the Help button from the first Viewconroller and release the ViewController into the Help screen as shown below.

Now click on the contact circle and name it “segueHelp”.

When we have made all the settings; We have to write the relevant codes in the help and setting buttons so that after clicking on that button;

Navigate to the relevant controller. Our ViewController.swift file should contain the following code

Import UIKit

Class ViewController: UIViewContollener {

// action-help button clicked

@IBAction func helpButtonAction (sender: UIBarButtonItem) {

self performSegueWithIdentifier (“segueHelp”, sender: self)

}

// action-setting button clicked

@IBAction func settingsButtonAction (sender: UIBarButtonItem) {

self.performSegueWithIdentifier (“segueSetting”, sender: self)

}

Override func viewDidLoad () {

Super.viewDidLoad () –

// Do any additional setup after loading the view, typically from a nib.

}

Override func prepareForSegue (segue: UIStoryboardSegue, sender: AnyObject?) {

// set title for help screen

if segue.identifier == “segueHelp” {

let destVc = segue destinationViewControlleras! Settings ViewController

destVc.navigationItem.title = “Settings”

Now run the program and check the output of the program. To implement the program; Select the required emulator (here we have selected iPhone Six S Plus) and click the Play button, which is similar to the one in the lower left corner of the Xcode toolbar.

Swift iOS navigation bar app output

Below you can see the result of running and implementing the navigation bar or control program in Swift. Click the help button now ; This way we go to the next controller and our output will be similar to the following.

In this way we can use the controller or ui navigation bar to manage the content navigation; Based on your needs; Use in Swift applications.