How to customize navigation back button in swift? - ios

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

Answer 1

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)

Answer 2

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

Answer 3

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)]
}