Customize Navigation Bar In IOS Using SubClass and StoryBoard


Author - FrugalisMinds

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.

  1. Setting the background color of Navigation Bar.
  2. Using background image in Navigation Bar.
  3. Customizing the color of UIBarButtons Items.
  4. Changing the font of Navigation Bar Title.
  5. Changing the font Size of Navigation Bar Title.
  6. Adding multiple UIBarButtons Items.
  7. Adding Actions or Click on UIBarButtons Items.
  8. Remove Gray Border From Navigation Bar.
  9. 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

Project Structure

3. Declare a Custom Navigation Function:-


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.

Customize Navigation Bar In IOS Using SubClass and StoryBoard

4.Using Background Image in Navigation Bar :-

lets declare a function name to set the background Image of NavigationBar like below code snippet.

        //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

        //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:-

        //add NSAttributedStringKey as you want to customize title Color and font provide your app font family name open below commented code
       //        let textAttributes = \[,NSAttributedStringKey.font: UIFont(name: "Enter Your App Font Name", size: 18)!\]
        //set only title color of navigation bar by below code
        let textAttributes = \[\]
        self.titleTextAttributes = textAttributes

If you want to make transparent background make this boolean value true as below.

        self.isTranslucent = true

lets call all the function from our first function like below

        self.setBackgroundImageOfNavBar(imagenName: "nav.jpg")
        self.setShadowImageOfNavBar(imagenName: "")

For background with clear and transparent make sure to set some property of NavigationBar .

        //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 below.

Customize Navigation Bar In IOS Using SubClass and StoryBoard

opt out the “View controller-based status bar appearance

opt out the View controller-based status bar appearance

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.

Customize Navigation Bar In IOS Using SubClass and StoryBoard


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.