Custom back indicator image and iOS 11

Luca Torella picture Luca Torella · Sep 13, 2017 · Viewed 10.8k times · Source

I'm using a custom back button in my app. This custom back button is set globally like this:

    UINavigationBar.appearance().backIndicatorImage = UIImage(named: "Back").withRenderingMode(.alwaysOriginal)
    UINavigationBar.appearance().backIndicatorTransitionMaskImage = UIImage(asset: .back).withRenderingMode(.alwaysOriginal)

Before iOS 11 this code did the trick, but now in iOS 11 the button is not centered vertically anymore as you can see here:

enter image description here

I could change the height of the back button image to 44, but that would break it in iOS < 11. I could also use two different images, but I was looking for something cleaner, like a way to vertically center the image in the back button container view.

EDIT:

Turns out that, as said by banxii1988, the problem is caused by setBackButtonTitlePositionAdjustment when the values deliberately move the title outside the visible screen. That was an hack to avoid removing the back button title in every view controller. I decided to remove this hack and I did the right thing which is:

  1. set the back button item in the storyboard to " ".
  2. in each view controller without an associated storyboard, I set the backBarButtonItem programmatically navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)

Note that the back button title that you see in a view controller is set in the previous one in the navigation stack.

Answer

banxi1988 picture banxi1988 · Sep 14, 2017

1) remove PositionAdjustment if have any. such as

  bap.setBackButtonTitlePositionAdjustment(UIOffset(horizontal: 0, vertical: -64), for: .default)

2) check if the previous ViewController in nav stack has a title