5.2. First screen, part 1: Adding a Bar Button

Let's create a new project, 'App5' in Xcode.

App 5: First screen

In App3 (3. Our first Multi-screen App), we discussed the basics of the Navigation Controller. Navigation Controller automatically adds a top bar (Navigation Bar) on the screen, where you have seen the Back buttons. You can add more buttons there, either on the left side or right side. Usually, we add our custom buttons on the right side of the Bar since the left side is usually reserved for going back. We will add our plus button (+) on the right side of the Bar.

First, open the Main storyboard and embed the storyboard in the Navigation Controller.

Open ViewController.swift file, and add the following codes there:

//
//  ViewController.swift
//  App5_draft
//
//  Created by Sakib Miazi on 5/17/23.
//

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        title = "Expense App"
        
        //MARK: setting the add button to the navigation controller...
        navigationItem.rightBarButtonItem = UIBarButtonItem(
            barButtonSystemItem: .add, target: self,
            action: #selector(onAddBarButtonTapped)
        )
    }
    @objc func onAddBarButtonTapped(){
        //Will implement later...
    }
}
    

In the above code, we are creating a new UIBarButtonItem and setting it to the right Bar Button of the Navigation Bar. We are also adding an action listener onAddBarButtonTapped() to handle the user tap. If you run it now, you will see the plus button on the Bar's right side.

Now we will set up the TableView and then return to this button.