How to customize navigation back button in swift?

Question

I want to change the back button icon and the label and the color of the back button label on the navigation bar. I have written the following code but it's not working. if anybody knows the solution please help me out.

override func viewDidLoad() {
        super.viewDidLoad()
        
        let yourBackImage = UIImage(named: "back_arrow")
        self.navigationController?.navigationBar.backIndicatorImage = yourBackImage
        self.navigationController?.navigationBar.tintColor = .white
        self.navigationController?.navigationBar.backIndicatorTransitionMaskImage = yourBackImage
        self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "Find or Invite", style: UIBarButtonItem.Style.plain, target: nil, action: nil)
    }

Expected out put

I was half-sleeping, I guess. Sorry about that... Try doing it inside `viewWillAppear` or `viewDidAppear`. — El Tomato, May 31 '21 at 05:46

score 0 · Answer 1 · answered May 31 '21 at 05:45

Looks like you have manually added navigationBar without an embedded navigation controller.

For this just connect the outlet like this

   @IBOutlet weak var navigationBar: UINavigationBar!

and remove the navigation controller part from your code as follows

let yourBackImage = UIImage(named: "back_arrow")
        self.navigationBar.backIndicatorImage = yourBackImage
        self.navigationBar.tintColor = .white
        self.navigationBar.backIndicatorTransitionMaskImage = yourBackImage
        self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "Find or Invite", style: UIBarButtonItem.Style.plain, target: nil, action: nil)

actually i have embeded my controller inside navigation controller in storyboard — , May 31 '21 at 05:50

Fabio · Answer 2 · 2021-05-31T06:39:00.703

Try this: in viewDidLoad declare your button, image and title

let button = UIButton(type: .custom)
    //Set the image
    button.setImage(UIImage(systemName: "chevron.backward"), for: .normal)
    //Set the title
    button.setTitle("Yourtitle", for: .normal)
    //Add target
    button.addTarget(self, action: #selector(callMethod), for: .touchUpInside)
    button.frame = CGRect(x: 0, y: 0, width: 100, height: 30)
    button.sizeToFit()

now set spacing between image and title:

let spacing:CGFloat = 10.0; // the amount of spacing to appear between image and title
    button.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: spacing)
    button.titleEdgeInsets = UIEdgeInsets(top: 0, left: spacing, bottom: 0, right: 0)

after that create your bar button and add to your nav bar:

let barButton = UIBarButtonItem(customView: button)
    navigationItem.leftBarButtonItem = barButton

this is the result:

Bonus: if you want to set navigation bar correctly and in one line, take a look to my extension here https://stackoverflow.com/a/58361273/5575955

@AbhayjeetSingh in my project show correctly, try to open new project configure nav bar and nav controller programmatically like this: https://stackoverflow.com/a/58361273/5575955, copy and paste the code for button in viewDidLoad and tell me.... — Fabio, May 31 '21 at 06:01
by using the above code the title (yuorTitle) is too large and showing on next line — , May 31 '21 at 06:03

score 0 · Answer 3 · answered May 31 '21 at 07:01

I have add both back button and title in Navigation bar button item. I have made dynamic function for using both.

this code for back button, it will return UIBarButtonItem item.

    func getBackButton(selector: Selector, target: Any) -> UIBarButtonItem {
    
    let button = UIButton(type: .custom)
    button.setImage(UIImage(named: "img_back_white"), for: .normal)
    button.setImage(UIImage(named: "img_back_white"), for: .highlighted)
    button.setImage(UIImage(named: "img_back_white"), for: .selected)
    button.imageView?.contentMode = .scaleAspectFit
    button.imageEdgeInsets = UIEdgeInsets(top: 0, left: -15, bottom: 0, right: 0)
    button.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
    //button.imageEdgeInsets = UIEdgeInsets(top: 0.0, left: 0, bottom: 0, right: 0)
    button.backgroundColor = .clear
    button.addTarget(target, action: selector, for: .touchUpInside)
    
    return UIBarButtonItem(customView: button)
}

Now for add title beside back button

func getNavigationTitleButton(title: String, font: UIFont = UIFont.SFProDisplayRegular(size: 19)) -> UIBarButtonItem {
    let navTitle = UILabel()
    navTitle.text = title
    navTitle.textColor = .AppWhite
    navTitle.isEnabled = true
    navTitle.font = font
    //navTitle.backgroundColor = .red
    //navTitle.frame.origin.x = -40
    //navTitle.sizeToFit()
    return UIBarButtonItem(customView: navTitle)
}

You can customize according your need. I want to add one more method if you want to show both in some screen directly so use this method with title and selector parameter.

func addBackWithTitle(title: String, selector: Selector) {
    self.navigationItem.leftBarButtonItems = [self.getBackButton(selector: selector, target: self), self.getNavigationTitleButton(title: title)]
}

How to customize navigation back button in swift?

3 Answers3