Customize Navigation Bar In IOS Using SubClassing and StoryBoard:-
Like most of you, I have been searching many times about Customize Navigation Bar In IOS Using SubClass and StoryBoard only and add some navigation items to it .Most of the times I used to write Customization code in App Delegate file which seemed inconvenient and i was not satisfied.
After a lot of research for one of my recent project in IOS .I decided to use subclass for customizing only navigation bar without the using UINavigationController. Here are few things we will do in this example.
- Setting the background color of Navigation Bar.
- Using background image in Navigation Bar.
- Customizing the color of UIBarButtons Items.
- Changing the font of Navigation Bar Title.
- Changing the font Size of Navigation Bar Title.
- Adding multiple UIBarButtons Items.
- Adding Actions or Click on UIBarButtons Items.
- Remove Gray Border From Navigation Bar.
- Setting Shadow Image to Navigation Bar.
1. Create Subclass Of UINavigationBar :-
2 Project Structure:-
Once you have created the class you will have the project structure like below
3. Declare a Custom Navigation Function:-
override func awakeFromNib() {
super.awakeFromNib()
}
we will use this function to call every customization function to customize our NavigationBar .This function will get called , when you set the class of your NavigationBar in StoryBoard .Please select your ViewController NavigationBar and go to identity Inspector and select Custom Class, then set Class name to Your Subclass name like image below.
4.Using Background Image in Navigation Bar :-
lets declare a function name to set the background Image of NavigationBar like below code snippet.
func setBackgroundImageOfNavBar(imagenName:String){
//pass the image name and set the image here
self.setBackgroundImage(UIImage(named: imagenName), for: .default)
//if you want white backgroung just remove the image
// self.setBackgroundImage(UIImage(), for: .default)
//if you want to set backgroung color
// self.backgroundColor = UIColor.yellow
}
In this function you can pass image name if you want to put image in Navigation Bar background .In case if you want to set color you can use backgroundColor to set background color of Navigation Bar.
5.Using Shadow Image in Navigation Bar:-
let’s set the shadow image of Navigation Bar , we need to make another function for this like below
func setShadowImageOfNavBar(imagenName:String){
//pass the image name and set the image here
// self.shadowImage = UIImage(named: imagenName)
//if you want white backgroung just remove the image
self.shadowImage = UIImage()
}
You can pass the image for shadow or put it blank to get Transparent background of Navigation Bar.
6.Changing the Font of Navigation Bar Title :-
It is One of the most important part .While we work with Navigation Bar we often stuck to make custom font size and custom font for Navigation Bar title we can use NSAttributedStringKey set the title color as well as font size by using the “titleTextAttributes” properties of the Navigation Bar.
We can specify the font, text color, text shadow color, and text shadow offset for the title, using the following text attribute keys ::-
- UITextAttributeFont – Key to the font
- UITextAttributeTextColor – Key to the text color
- UITextAttributeTextShadowColor – Key to the text shadow color
- UITextAttributeTextShadowOffset – Key to the offset used for the text shadow
Here is the sample code snippets for altering the font style and font color of the navigation bar title:-
func setTitleAttribute(){
//add NSAttributedStringKey as you want to customize title Color and font provide your app font family name open below commented code
// let textAttributes = [NSAttributedStringKey.foregroundColor:UIColor.black,NSAttributedStringKey.font: UIFont(name: "Enter Your App Font Name", size: 18)!]
//set only title color of navigation bar by below code
let textAttributes = [NSAttributedStringKey.foregroundColor:UIColor.red]
self.titleTextAttributes = textAttributes
}
If you want to make transparent background make this boolean value true as below.
func setBarAsTranslucent(){
self.isTranslucent = true
}
lets call all the function from our first function like below
override func awakeFromNib() {
super.awakeFromNib()
self.setBackgroundImageOfNavBar(imagenName: "nav.jpg")
self.setShadowImageOfNavBar(imagenName: "")
self.setTitleAttribute()
self.setBarAsTranslucent()
}
For background with clear and transparent make sure to set some property of NavigationBar .
self.setBackgroundImage(UIImage(), for: .default)
//if you want to set backgroung color
self.backgroundColor = UIColor.clear
self.shadowImage = UIImage()
self.isTranslucent = true
We can set transparent image to achieve transparent background
you can set the status bar style by using the UIApplication statusBarStyle method. But first you’ll need to opt out the “View controller-based status bar appearance”. In Your info.plist file the this row and set the value to NO.like below.
7.Adding UIBarButton To Navigation Bar
Open storyboard file and drag and drop UIBarButton item to Navigation Bar from the right side menu add change the title ,image ,tintcolor of bar button from property inspector like below.
Summary:-
For your complete reference, you can Download the source code of the demo project from here Just uncomment any code snippets in the sample project to test out the change.
Like many of you, I’m still exploring all the new changes of IOS 11 SDK. I am by no means an expert on IOS . If you find any errors in the article, please do let me know. If you find any tips and tricks related to navigation bar and status bar, please also share with us by leaving comment below.
