How to overload navigation bar back button or how to create own button with image?
Introduction
Hello, now I’ll speak about navigationBar backItem. I recently encountered with issue relative with showing alert message with dialog after viewController dismissing.
For example:
We have a viewController with some user data (name, surname and photo). There is “Save” button on same viewController, but if user changed own information and pressed navigationBar “Back” button — new data isn’t saved. My customer said, that we must to ask user about saving changes before viewController will disappear. I was try to do this on viewDisappear method, then i was try to do same at willMove(toParent), but I could not find a solution. You can try to do the same :)
The firs good idea was overload back action of navigationItem. And it was a right solution! By the specific i was must to do this one like another, default back buttons. So as you can’t assign new selector for existing back button — you must to create new one.
P.S: This guide will help you create any back button for single viewController or for all your application.
Let’s start
My realization just for showing difference between default backButton and custom.
At startup i was create tabBar with two intermediate viewControllers with their own navigationController’s. Then i was create two more viewControllers for showing back buttons.
That’s my project hierarchy.
NavigationBar’s of 2 intermediate viewController’s have the same class. CustomViewController — class, where we’ll do our operations.
Intermediate classes (Gray background color) needed to show “Heart” group ViewController’s at viewDidAppearMethod (Blue background color).
Constants class — store segue’s identifiers.
Now we must to upload our back arrow image to project assets (It can any image).
Setting up back image
Then, by project specific i was must to do same back buttons (with arrow images) at all places. So, in NavigationController.swift file (class of 2 navController’s) we will set our back image.
You must understand, that this is very important step. I advice you to set back image for all navigation bars because we have a small difference between own back image and default.
Creating back button
If you (as me), must to create back button with image — you need to create UIButton with system style (for filling as navBar tint color).
Then, you must to set image and title of button.
After that you must add action for your own back button.
Now, create UIBarButtonItem with customView (UIButton) and assign it to leftBarButtonItem.
Now you can run application and watch at difference between two buttons titles and images position.
After that you must to set imageEdgeInsets and titleImageInsets relative your situation (May be difference by different images or titles).
Finally
You can watch short Gif, that showing result of this work. As you can see the difference exist with animation on button tap, but it is not so big. And back gesture in customViewController is gone, but you can return if you’re need it.
And the main difference: Back button action is overloaded! Good luck ❤
GitHub project repository link
