Tutorial – Custom Navigation Bar Back Arrow
You can simply set the Navigation Bar back image style with a small amount of code. The arrow color will still be the same as the navigation bar tint color (Tbe default is blue) – but the style will be changed.
I have setup a XCode project with a simple navigation controller as the root view controller of the default view. With an extra view added, with a segue to open it. It looks like:
We are going to change the back button arrow from this:
to look like:
First of all we have added the following dback.png as follows to our assets.xcassets for the background image we will be using in this tutorial.
Then simply add the following code to the viewDidLoad(), see the comments on each line for a brief explanation of what it does!
override func viewDidLoad() { super.viewDidLoad() // Used to center the image, you may need to adjust the top and bottom to move your image up or down if it is not centered. let inserts = UIEdgeInsets(top: 0,left: 0,bottom: -5,right: 0) let imgBackArrow = UIImage(named: "dback")?.withAlignmentRectInsets(inserts) // Load the image centered self.navigationController?.navigationBar.backIndicatorImage = imgBackArrow // Set the image self.navigationController?.navigationBar.backIndicatorTransitionMaskImage = imgBackArrow // Set the image mask }
And volia, your back button will be set to the image style you used as a mask!