Custom Tab Bar Controller in swift 3.0

Custom Tab Bar Controller in swift 3.0

Overview:- “Custom tab bar controller”

Custom tab bar controller provides the main role for the iPhone applications because, it Custom tab bar controller helpful for going to any other controller easily from one controller to another controller.  The tab bar controller basically while navigation manage a stack of related  View controller , Tab bar controllers manage array of view controllers that have no explicit relation one to another.

Tab bar controller is a sub class of view controller.

The UITabbarController class implements the specialized view controller that manages a radio – style selection interface. This tab bar controller interface display tab at the bottom of the window for selecting different views.

Getting Start:-

  • Open your Xcode create a single view application
  • For product name, use like CustomTabbarDemo and fill the organization name after that fill the organization identifier then after language choose swift then select device iPhone
  • Then click on the next button in that your storyboard
  • Now , your single View application / project
  • Then select the main Storyboard click them, then you will see a view controller in the main storyboard.
  • Now , select your view controller then click on the editor select the navigation controller:-

Custom tab bar controller

over the coursor on the editor then open list then over the mouse on the Embed In like this

Custom tab bar controller

Go to you over the cursor open a new list like this

Custom tab bar controller

Select navigation controller. Now embed your view controller with Navigation controller now look like your main storyboard as given like this seen

Custom Tab Bar Controller

Now again, select your editor then same process you will see tabbar controller given below navigation controller like this

Custom Tab Bar Controller3

Custom Tab Bar Controller4

Now select ios then select Cocoa touch Class then click on the Next button

Now open a again new window in this window fill the Class Name like DemoCustomTabBarcontroller and after that fill the sub class UITabBarController and click next button like this

Custom Tab Bar Controller5

Now again a new window click on the create button that button right bottom corner on the new window

Custom Tab Bar Controller6

 Let’s come now on the coding part now your tabbar controller make a swift file with name

 DemoCustomTabBarController.swift

Now open your .swift file your .swift file this type ready for code section like where you will right a code in the uitabbar controller

Custom Tab Bar Controller7

Now add this code just below the  class name in the tabbar controller

    var  articlesTabButton : UITabBarItem!

    var  clanderTabButton : UITabBarItem!

    var  flagTabButton : UITabBarItem!

    var  dealTabButton : UITabBarItem!

    var addTabButton : UIButton!

    Let tabBarHeight : CGFloat = 55

// MARK THIS CODE ADD IN THE VIEWDIDLOAD METHOD        

articlesTabButton = UITabBarItem()

articlesTabButton.title = “articles”

clanderTabButton = UITabBarItem()

clanderTabButton.title = “clander”

flagTabButton =  UITabBarItem()

flagTabButton.title = “flag”

dealTabButton  =  UITabBarItem()

dealTabButton.title = “deal”

setUpTabBarElements()

let storyboard = UIStoryboard(name: “Main”, bundle: nil)

let articalVC = storyboard.instantiateViewController(withIdentifier: “UINavigationController”) as! UINavigationController articalVC.tabBarItem = articlesTabButton

let clanderVC = storyboard.instantiateViewController(withIdentifier: “UINavigationController”) as! UINavigationController clanderVC.tabBarItem = clanderTabButton

let addVC = UIViewController()

let flagVC = storyboard.instantiateViewController(withIdentifier: “UINavigationController”) as! UINavigationController flagVC.tabBarItem = flagTabButton

let dealVC = storyboard.instantiateViewController(withIdentifier: “UINavigationController”) as! UINavigationController dealVC.tabBarItem = dealTabButton

self.viewControllers = [articalVC,clanderVC,addVC, flagVC, dealVC]

setupMiddleButton()

// Do any additional setup after loading the view.

    }

//MARK : – this func set the middle button in the tabbar view

func setupMiddleButton() {

let width : CGFloat = self.view.frame.size.width/5

let height = tabBarHeight

addTabButton = UIButton(frame: CGRect(x: 0.0, y: 0.0, width: width, height: height+5)) var menuButtonFrame = addTabButton.framemenuButtonFrame.origin.y = self.view.bounds.height – menuButtonFrame.height

menuButtonFrame.origin.x = self.view.bounds.width/2 – menuButtonFrame.size.width/2

addTabButton.frame = menuButtonFrame

addTabButton.backgroundColor = UIColor.clear       self.view.addSubview(addTabButton)

addTabButton.setImage(UIImage(named: “add_icon_sel”)!.withRenderingMode(.alwaysOriginal), for: UIControlState.normal)

self.tabBar.setNeedsDisplay()

self.tabBar.layoutIfNeeded() self.view.layoutIfNeeded() self.view.setNeedsDisplay()

}

// MARK: – this function for the set the tab bar element / items

 

 func setUpTabBarElements() {

 self.articlesTabButton.image = UIImage(named:”articles_icon1″)?.withRenderingMode(.alwaysOriginal)

self.clanderTabButton.image = UIImage(named: “calender_icon1”)?.withRenderingMode(.alwaysOriginal)

self.flagTabButton.image = UIImage(named: “flag_icon_sel”)?.withRenderingMode(.alwaysOriginal)

self.dealTabButton.image = UIImage(named: “deal_icon”)?.withRenderingMode(.alwaysOriginal)

self.articlesTabButton.selectedImage = UIImage(named: “articles_icon1”)?.withRenderingMode(.alwaysOriginal)

self.clanderTabButton.selectedImage = UIImage(named: “calender_icon1”)?.withRenderingMode(.alwaysOriginal)

self.flagTabButton.selectedImage = UIImage(named: “flag_icon_sel”)?.withRenderingMode(.alwaysOriginal)

self.dealTabButton.selectedImage = UIImage(named: “deal_icon”)?.withRenderingMode(.alwaysOriginal)

 }

Now ready your custom tabbar controller but set the your tabbar controller class in editor panel

now select your tab bar controller  set the class name as your  class name like this type

Custom Tab Bar Controller

if you want  change your tab bar view background color select the tab bar controller then go to the view controller navigator and then select tabbar

Custom Tab Bar Controller9

Then go to the attribute inspector and change the color those as you like and other one choice

Custom Tab Bar Controller 0

Now your project is ready let’s run your project now you will see in project tabbar controller have a five tab item in your project

If you want change your project look you set your other functionality in your root view controller and those view controllers these are integrated with in your project and application

But now I integrated in this project root view controller a tableview

  • In the table view I take a cell
  • Then drag a imageview and two label
  • Set the constraint all object
  • Give the table view cell indentifier “ Cell”
  • And set the table view datasource and delegate
  • Then now go to the those you have root view viewcontroller that controller inherit with UITableViewDataSource and UITableViewDelegate
  • Make a @iboutlet of a tableview those have a type of UItableView!
  • And connect the outlet
  • And integrated the table view delegate methods

Custom Tab Bar Controller

Let’s now run your project your project run successfully run with out error and let you see that your custom tab bar view is ready

Custom Tab Bar Controller

Custom Tab Bar Controller

Also Read- About UICollectionView in IOS

If you are, looking to Develop and design for your project then feel free to contact us at any time

Call Us- +91 9910781148, +1 8033353593
Email: company@tecorb.com
Skype- tecorb
“We maintain transparency with our customers. Our values and business ethics has given us repeated customers. We tend are proud to be a reliable outsourcing partner for many clients across the World.”

                                                                 

 Published By- Dinesh Saini (IOS Developer)