CODEWITHSUNDEEP
swiftuinavigationbar
Zin Win Htet
Zin Win Htet

Reputation: 2565

Back Buttons from navigation bar are overlapping , swift 4

I was trying to customize my back button according to this tutorial. In AppDelegate, 

let barButtonAppearence = UIBarButtonItem.appearance()

func application(_ application: UIApplication, willFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey : Any]? = nil) -> Bool {
    let backButton = UIImage(named: "back_arrow")
    let backButtonImage = backButton?.stretchableImage(withLeftCapWidth: 0, topCapHeight: 10)
    barButtonAppearence.setBackButtonBackgroundImage(backButtonImage, for: .normal, barMetrics: .default)
    return true
}

And then it is conflicting with the existing one (which appeared automatically because of segue(Show).

enter image description here

So I need to remove the blue one.

Upvotes: 0

Views: 836

Answers (3)

nayem
nayem

Reputation: 7585

There are two things need to accomplish what you are trying to achieve:

  • Changing the back button's default image to your supplied image
  • Removing the title from the back button item

To change back button's image:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Remember, this will change every navigation bar's back button image in your app
    UINavigationBar.appearance().backIndicatorImage = #imageLiteral(resourceName: "backButton")
    UINavigationBar.appearance().backIndicatorTransitionMaskImage = #imageLiteral(resourceName: "backButton")
    return true
}

Note: If you don't want that all your navigation bar back button to have the supplied image, you may need to subclass UINavigationController and update its navigation bar.

Removing the title from the back button item:

We will do this by adding a method to any UIViewController through extension. Extension method will be used here so that any UIViewController can be able to have this behavior when it wants.

extension UIViewController {
    func removeNavigationBarBackButtonItemTitle() {
        self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: UIBarButtonItem.Style.plain, target: nil, action: nil)
    }
}

Now, in any push transition for VC A -> VC B you need to hide the back button's title. But you have to invoke the method removeNavigationBarBackButtonItemTitle() from VC A. Just remember this and you are good to go.

class ViewControllerA: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        removeNavigationBarBackButtonItemTitle()
    }
}

You will find a demo here. The demo also has some other implementations too. But you will get what you need and what I've said above.

Upvotes: 2

Razib Mollick
Razib Mollick

Reputation: 5042

Another alternative solution to set tint color clear. See the below-modified code of your.

func application(_ application: UIApplication, willFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey : Any]? = nil) -> Bool {
    let backButton = UIImage(named: "back_arrow")
    let backButtonImage = backButton?.stretchableImage(withLeftCapWidth: 0, topCapHeight: 10)
    barButtonAppearence.setBackButtonBackgroundImage(backButtonImage, for: .normal, barMetrics: .default)
 barButtonAppearence.tintColor = UIColor.clear
    return true

}

Upvotes: 1

denis_lor
denis_lor

Reputation: 6547

Have you tried replacing it this way:

UINavigationBar.appearance().backIndicatorImage = UIImage(named: "back_arrow")
UINavigationBar.appearance().backIndicatorTransitionMaskImage = UIImage(named: "back_arrow")

I have tried this on applicationDidFinishLaunching method in AppDelegate

Upvotes: 1

Related Questions