Back Button Image - what is it called in UIKit?

Question

I am trying to use UIKit's internal back button image. I have asked this question before and got the technically correct answer that it inherits it from the previous View, BUT if I insert this code you can control the back button on the current View.

// Takeover Back Button
self.navigationItem.hidesBackButton = false
let newBackButton = UIBarButtonItem(title: "<", style: .Plain, target: self, action: "segueBack")
navigationItem.leftBarButtonItem = newBackButton

That gives me a <, "ABC" would give me ABC etc but how do I trigger Swift to put up it's internal Back Button image. The code below doesn't work but I would have thought is along the right lines.

let backImg: UIImage = UIImage(named: "BACK_BUTTON_DEFAULT_ICON")!
navigationItem.leftBarButtonItem!.setBackgroundImage(backImg, forState: .Normal, barMetrics: .Default)

Has anyone worked out how to do this?

Twomey

Answer 1

Try to add custom view as back button like as

var backButton = UIButton(frame: CGRectMake(0, 0, 70.0, 70.0))
var backImage = UIImage(named: "backBtn")
backButton.setImage(backImage, forState: UIControlState.Normal)
backButton.titleEdgeInsets = UIEdgeInsetsMake(10.0, 10.0, 10.0, 0.0)
backButton.setTitle("Back", forState: UIControlState.Normal)
backButton.addTarget(self, action: "buttonPressed", forControlEvents: UIControlEvents.TouchUpInside)
var backBarButton = UIBarButtonItem(customView: backButton)

var spacer = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FixedSpace, target: nil, action: nil)
spacer.width = -15

self.navigationItem.leftBarButtonItems = [spacer,backBarButton]

It will look same as iOS back button

Antilebanon

Apologies, I'm clearly not explaining myself correctly. That's a nice, complete set of code but what I want to know is what the BackButton Icon, the "<", is called or how you trigger it to appear. If I use your code verbatim I get " Back" without the chevron. – Twomey

@EdwardHasted you have to add backBtn in image assets – Antilebanon

iOS doen't provide default back system button. So, You have to create whole button by your self. and you can trigger the action by the use of backButton.addTarget(self, action: "buttonPressed", forControlEvents: UIControlEvents.TouchUpInside) here buttonPressed is an action. @EdwardHasted – Antilebanon

That's what I hoped to avoid doing ;-) But iOS must have an internal image for the back button/chevron as it uses it all the time. The question is what is it called/how do you trigger it? Do you appreciate my quandary? Many thanks. – Twomey

@EdwardHasted I hope you will find it. CTRL+COMMAND+SPACE and find it from the characters – Antilebanon

@EdwardHasted, he is correct. This has been asked many times since it was introduced in iOS7. Here is an answer about how to extract it if you want to try this: #19866914. Either way, to get the best looking back button, you will have to use an image. – Yacano

Picking up on Ashish's comment about characters I found what it is. In most of the fonts the < are almost indistinguable. The Back Button is typographically different. It appears to be the "<" in Apple SD Gothic Neo, Regular, 20pt. – Twomey

Suspect pulling and using the image is best. Many thanks for all your work. – Twomey

@EdwardHasted Welcome :) – Antilebanon

It appears the Back Button is an image. Whilst there might be an internal call to summon it no one seems to know what it is. It is much faster to use an image. It's 32 x 32 and using Ashish's code play around with the spacer.width = -35 to get it into the standard position. – Twomey

@AshishKakkad Thanks – Fideicommissum

@ChiragDjinjuwadiya Most Welcome Brother :) – Antilebanon

Answer 2

I struggled with this question for a while. Finally I got the back image with the following code:

let backImage = navigationController?.navigationBar.subviews[2].subviews[0].subviews[0].subviews[0] as! UIImageView).image

Before run the code above, make sure the back button is showing. Then you can save backImage to anywhere you want.

Here is the backImage I got.

Rack

Answer 3

Here is my solution:

override func viewDidLoad() {

...

let buttonBack = UIBarButtonItem(image: UIImage(named: "backButton"), style: .plain, target: self, action: #selector(buttonSavePressed(_:)))
self.navigationItem.leftBarButtonItem = buttonBack
let backButton = UIButton(frame: CGRect(x: 0, y: 0, width: 24.0, height: 24.0))
let backImage = UIImage(named: "backButton")
backButton.setImage(backImage, for: .normal)
backButton.setTitle("Back", for:.normal)
if #available(iOS 13.0, *) {
    backButton.setTitleColor(.link, for: .normal)
} else {
    backButton.setTitleColor(.blue, for: .normal)
}
backButton.addTarget(self, action:#selector(buttonSavePressed(_:)), for: .touchUpInside)
let backBarButton = UIBarButtonItem(customView: backButton)
let spacer = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
spacer.width = -15
self.navigationItem.leftBarButtonItems = [spacer,backBarButton]

}

@objc func buttonBackPressed(_ sender: Any) {

 ...
}

Theotheobald

Answer 4

Try this to replace the back button image:

let back_image = UIImage(named: "btn_back")
self.navigationBar.backIndicatorImage = back_image
self.navigationBar.backIndicatorTransitionMaskImage = back_image

If you don't like to have the "Back" title you can add this too:

self.navigationBar.topItem?.title = ""

Clarissa

Answer 5

If you want to get the default back button image, the arrow is a class of type _UINavigationBarBackIndicatorView.

Here follows the hack,

        UIImage *imgViewBack ;

        for (UIView *view in self.navigationController.navigationBar.subviews) {
            // The arrow is a class of type _UINavigationBarBackIndicatorView. This is not any of the private methods, so I think
            // this is fine for the AppStore...
            if ([NSStringFromClass([view class]) isEqualToString:@"_UINavigationBarBackIndicatorView"]) {
                // Set the image from the Default BackBtn Imageview
                UIImageView *imgView = (UIImageView *) view;
                if(imgView){
                    imgViewBack = imgView.image ;
                }
            }
        }

Reverential

Answer 6

This solution uses a custom icon and adds control for the tappable area of the back button.

import SnapKit

private func setupBackButton() {
     
     let imageView = UIImageView()
     imageView.contentMode = .scaleAspectFit
     imageView.image = UIImage(named: "Back")
     
     let button = Button()
     button.addSubview(imageView)
     imageView.snp.makeConstraints { make in
         make.left.equalToSuperview().offset(-15)
         make.centerY.equalToSuperview()
         make.height.equalTo(20)
     }
     button.addTarget(self, action: #selector(onBack(_:)), for: .touchUpInside)

     // Somehow it's not tappable without this line
     button.backgroundColor = .black

     let barButtonItem = UIBarButtonItem(customView: button)
     navigationItem.leftBarButtonItem = barButtonItem
}

Lamb

Answer 7

Just an update, with the new SF Symbols App from Apple we can find System-images more easily. The back button chevron is now accessible like this:

Image(systemName: "chevron.backward")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .font(Font.title.weight(.medium))
                                        .frame(height: 18)

Tabanid