custom back button in navigation in iOS

Question

I know this question has been asked before but nothing worked for me and I had to ask it again. I want an image as my back button in navigation bar, just want to change the appearance of the back button. I don't want to add a button and add selectors for it.

I tried the following code:

let backImage = UIImage(named: "Back_button")

        let backAppearance = UIBarButtonItem.appearance()
        backAppearance.setBackButtonBackgroundImage(backImage, for: .normal, barMetrics: .default)

        navigationController?.navigationBar.backIndicatorTransitionMaskImage = backImage
        navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: UIBarButtonItem.Style.plain, target: nil, action: nil)

I also tried setting the back image and back mask using storyboard but both these approaches place a black circle on my back image.

I tried setting another image as back mask by setting its alpha content equal to zero using the code but it didn't work either.

please help.

Maybe this will works for you -> https://stackoverflow.com/a/44970293/7512091 — emrcftci, Mar 03 '20 at 05:28

Habin Lama · Answer 1 · 2020-03-03T06:27:08.623

2

let backButton = UIBarButtonItem()
backButton.title = "Back"
backButton.image = UIImage(named: "Back_button")
self.navigationController?.navigationBar.topItem?.backBarButtonItem = backButton

You can do this to customize your Back button. And you don't have to worry about adding selectors.

edited Mar 03 '20 at 06:27

answered Mar 03 '20 at 05:54

Habin Lama

529
5
19

in iOS 15, this doesn't work anymore :/ – bruno Feb 10 '22 at 10:07

score 1 · Answer 2 · answered Nov 02 '21 at 09:27

This code works with Swift 5.

let backButton: UIButton = UIButton()
backButton.setImage(UIImage(named: "back"), for: UIControl.State())
backButton.addTarget(self, action:#selector(SearchResultsViewController.onBack), for: UIControl.Event.touchUpInside)
let leftBarButtonItem = UIBarButtonItem(customView: backButton)
navigationItem.leftBarButtonItem = leftBarButtonItem

score 1 · Answer 3 · answered Aug 31 '22 at 07:47

I used this code to customize the back button on only one of my views:

    self.navigationController?.navigationBar.topItem?.backButtonTitle = ""
    let backButton = UIBarButtonItem(image: UIImage(named: "back"), style: .plain, target: self, action: #selector(goBack))
    navigationItem.leftBarButtonItem = backButton

@objc func goBack() {
    self.navigationController?.popViewController(animated: true)
}

score 0 · Answer 4 · answered Mar 03 '23 at 09:38

first embed the viewcontroller in navigation view controller and then at viewDidLoad function use this code for making a UIBarButton item.

override func viewDidLoad() {
    super.viewDidLoad()
    navigationItem.leftBarButtonItem = UIBarButtonItem(image: UIImage(systemName: "arrowshape.left.fill"), style: .done, target: self, action: #selector(backAction(_ :)))
}

After that in action of bar button item define like this

@objc func backAction(_ sender: UIBarButtonItem){
      // uncomment according to your need
      // removing the current screen from view controller stack

      // self.navigationController?.popViewController(animated: true)

      // going to root view controller 
      // self.navigationController?.popToRootViewController(animated: true)
      // works only when the view controller is push modelly
      self.dismiss(animated: true, completion: nil)
}

score -1 · Answer 5 · answered Mar 03 '20 at 05:47

Create a custom class for define navigation bar traits
Create an extension to UINavigationController for configure it


import UIKit

private final class MyNavigationBarTraits {

  public var backIndicatorImage: UIImage?
  public var backIndicatorTransitionMaskImage: UIImage?

  public func apply(to navigationBar: UINavigationBar) {
    navigationBar.backIndicatorImage = backIndicatorImage
    navigationBar.backIndicatorTransitionMaskImage = backIndicatorTransitionMaskImage
  }

  public init(navigationBar: UINavigationBar) {
    backIndicatorImage = navigationBar.backIndicatorImage
    backIndicatorTransitionMaskImage = navigationBar.backIndicatorTransitionMaskImage
  }
}

public typealias Callback<T> = (_: T) -> Void

public extension UINavigationController {

  private struct AssociationKeys {
    static var navigationBarTraits = "ws_nc_navigationBarTraits"
  }

  private var navigationBarTraits: MyNavigationBarTraits? {
    get {
      return objc_getAssociatedObject(self, &AssociationKeys.navigationBarTraits) as? MyNavigationBarTraits
    }
    set {
      objc_setAssociatedObject(self, &AssociationKeys.navigationBarTraits, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
    }
  }

  func configureBar(block: Callback<UINavigationBar>) {
    navigationBarTraits = MyNavigationBarTraits(navigationBar: navigationBar)
    block(navigationBar)
  }

  func resetBar() {
    navigationBarTraits?.apply(to: navigationBar)
    navigationBarTraits = .none
  }
}

And then you can configure your navigation bar in your ViewController's viewWillAppear (for example tintColor)

  public override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    navigationController?.configureBar { navigationBar in
      // You can customize your navigation bar in here!
      navigationBar.tintColor = .red
    }
  }

If you want to use this customization just in one View Controller you should reset bar in your View Controller's viewWillDisappear

  public override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)

    navigationController?.resetBar()
  }

score -1 · Answer 6 · edited Aug 24 '21 at 11:05

Simply Add Below Methods in Your ViewController :

func setLeftBarBackItem() {
    
    let leftBarBackItem = UIBarButtonItem(image: #imageLiteral(resourceName: "imgBack"), style: .plain, target: self, action: #selector(self.clickToBtnBackItem(_:)))
    self.navigationItem.leftBarButtonItem = leftBarBackItem
    
}

func clickToBtnBackItem(_ sender: UIBarButtonItem) {
    view.endEditing(true)
    
    _ = navigationController?.popViewController(animated: true)
    
}

func setTranspertNavigation()
{    
    self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    self.navigationController?.navigationBar.shadowImage = UIImage()
    self.navigationController?.navigationBar.isTranslucent = true
    self.navigationController?.view.backgroundColor = .clear
}

Inside Your ViewController's ViewDidLoad Method, Set backButton As :

    self.navigationController?.isNavigationBarHidden = false
    AppDelegate.shared().setupNavigationBar()
    setLeftBarBackItem()
    setTranspertNavigation()
    self.title = "Title Here"

custom back button in navigation in iOS

6 Answers6