Search code examples
iosuinavigationbaruinavigationitem

Why three buttons are appearing in the place of Navigation backBarButtonItem in iOS 11?

I have set the UINavigation bar appearance which looks like follwing,

Code: 

fileprivate class func barButtonAppearance() {
    var attributes = [String : AnyObject]()
    attributes[NSFontAttributeName] = UIFont(name: .Regular, size: 14)
    attributes[NSForegroundColorAttributeName] = UIColor.descriptionColor()
    UIBarButtonItem.appearance().setTitleTextAttributes(attributes, for: UIControlState())

    let backImage =  UIImage.image(assetID: .NavigationBarBack, caps: UIEdgeInsetsMake(0, 23, 0, 0)).withRenderingMode(.alwaysTemplate)
    UIBarButtonItem.appearance().setBackButtonBackgroundImage(backImage, for: .normal, barMetrics: .default)

    UINavigationBar.appearance().backIndicatorTransitionMaskImage = backImage
}

It was working fine until we tested our application in iOS 11.

If I comment the below code 

let backImage =  UIImage.image(assetID: .NavigationBarBack, caps: UIEdgeInsetsMake(0, 23, 0, 0)).withRenderingMode(.alwaysTemplate)
UIBarButtonItem.appearance().setBackButtonBackgroundImage(backImage, for: .normal, barMetrics: .default)

It works fine but with the default apple given back button.

Here is the screen shot of the navigation bar appearing,

enter image description here

I was not able to get what was happening. Could someone please suggest me the workaround? Thanks.

Solution 
  • UINavigationBar.appearance().backIndicatorImage = image.withRenderingMode(.alwaysOriginal)
UINavigationBar.appearance().backIndicatorTransitionMaskImage = image.withRenderingMode(.alwaysOriginal)

if #available(iOS 11, *) {
    UIBarButtonItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.clear], for: .normal)
    UIBarButtonItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.clear], for: .highlighted)
} else {
    UIBarButtonItem.appearance().setBackButtonTitlePositionAdjustment(UIOffset(horizontal: -60, vertical: -60), for: .default)
}

    image is UIImage. no need to create base controller or write code on every controller. Just put these lines in app delegate.