Customize Tab Bar in iOS Using Swift

Dec 31, 2015

Milan Sanathara

Swift

Contents

1 Tutorial Goal
2 Tutorial Steps
3 You will get final output like this:
4 Step 1 Create Xcode Project
5 Step 2 Design UI
6 Step 3 Add Custom Tab Bar Items
7 Step 4 Set Tab Bar Background Color

Tutorial Goal

Main Goal of this blog post is to give you an idea about how to Customise Tab Bar Background in iOS using Swift 2.

Tutorial Steps

1. Create Xcode Project

2. Design UI

3. Add Custom Tab Bar Items

4. Set Tab Bar Background Color

You will get final output like this:

Customize Tab Bar in iOS using Swift output

Introduction :
The Tab Bar Controller class in iOS defines a specific ViewController which uses to navigate between the views by tapping the tab in the bottom. Each Tab of tab bar is associated with a view controller. When the user selects a tab, the tab bar controller displays the root view of the corresponding view controller, replacing any previous views.

Tab Bar are generally used to represent a different type of information or same information using a different interface. Here we are going to customise the interface of Tab Controller and the views associated with the controller so that user are made aware of tab bar controller and its use in the application.

Create a new Xcode project and select Tabbed Application.

if you don’t know how to create a project in Xcode check out our blog

How To Create Project In Xcode : IOS Basics

In your project you can see in the Main.storyboard that the TabBarController has already two view controllers in a relationship with it by default.

Add new view controller.
Right Click on Tab Bar Controller and release on your view controller.
Select View Controllers from Relationship Segue in Connections dialog box.
Add images on your view controllers using imageview.

Now we have to customise our Tab bar items, for that, select the tab bar item at the bottom of the each view controller and go to the Utility panel.

Open attribute inspector (4th tab from the left side) set the title and icon image of your view controllers.

For image size dimension check the iOS Human Interface Guidelines, for that click here

Run your app check that tab bar icon is set or not. if you do not see your tab bar icon go to your project Assets Folder and find your tab bar item image. Open attribute inspector (4th tab from the left side) and select option Original Image in Render As Settings.

In order to change the background colour of the Tab Bar controller goes to AppDelegate.swift file in your project. Now add the following code in didFinishLaunchingWithOptions method

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        // Override point for customization after application launch.
        
        let tbController = self.window!.rootViewController as! UITabBarController

        tbController.tabBar.barTintColor = UIColor.blackColor()
        
        return true
    }

[sociallocker]Download Xcode Project Customize Tab Bar in iOS using Swift[/sociallocker]

I hope you will find this post very useful regarding Customize Tab Bar in iOS . Let me know if you have any question regarding Customize Tab Bar in iOS in a comment. I will reply to you ASAP.

Have you got a cool idea about iPhone App Development? Contact us Now to get a free consultation on your idea. Alphanso Tech is rated as one of the best iPhone App Development Company in India.

Post by Milan Sanathara

I am iOS Application Developer with an aspiration of learning new technology and creating a bright future in Information Technology.

Customize Tab Bar in iOS Using Swift