Custom Tab Bar

UITabBarController is one of the most commonly used UI elements of iPhone apps. It appears at the bottom of an app screen and provides the ability to switch between different sections of an app quickly. the TabBar controller is not very customizable and recommends only 5 icons before having to present a “more options” icon. A tab bar is often used to switch between different, but comparable view controllers.

What we are going to do?

• Implement a view controller that can hold some other view controllers.
• Show one of those view controllers.
• Show a tabbar at the bottom of the screen over the shown view controller.
• Switch between the various view controllers when the user taps on a tabbar button.

Let’s create a project of the custom Tab bar.

1. Open an Xcode and take a view on Storyboard.
2. Now, we need another UIView at the bottom of the storyboard for the tab bar view. The TabBarView consists of a collection of buttons the user can tap to switch from one tab to another.
   

   
3. Create tab bar items. take 4 views in TabBarview and add a button for the item icon in each view.
   
4. Take 4 ViewControllers
   
   import UIKit class ViewController: UIViewController { @IBOutlet weak var TabBarView: UIView! @IBOutlet weak var Contentview: UIView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. TabBar() } func TabBar(){ TabBarView.layer.cornerRadius = TabBarView.frame.size.height/2 TabBarView.clipsToBounds = true } @IBAction func AllbuttonAction(_ sender: Any) { let tag = (sender as AnyObject).tag if tag == 0{ guard let home = self.storyboard?.instantiateViewController(identifier: "HomeViewController") as? HomeViewController else { return} Contentview.addSubview(home.view) home.didMove(toParent: self) }else if tag == 1{ guard let search = self.storyboard?.instantiateViewController(identifier: "SearchViewController") as? SearchViewController else { return} Contentview.addSubview(search.view) search.didMove(toParent: self) }else if tag == 2{ guard let camera = self.storyboard?.instantiateViewController(identifier: "CameraViewController") as? CameraViewController else { return} Contentview.addSubview(camera.view) camera.didMove(toParent: self) }else{ guard let profile = self.storyboard?.instantiateViewController(identifier: "ProfileViewController") as? ProfileViewController else { return} Contentview.addSubview(profile.view) profile.didMove(toParent: self) } } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

   import UIKit   class ViewController: UIViewController {       @IBOutlet weak var TabBarView: UIView!          @IBOutlet weak var Contentview: UIView!     override func viewDidLoad() {         super.viewDidLoad()         // Do any additional setup after loading the view.         TabBar()     }          func TabBar(){         TabBarView.layer.cornerRadius = TabBarView.frame.size.height/2         TabBarView.clipsToBounds = true     }          @IBAction func AllbuttonAction(_ sender: Any) {         let tag = (sender as AnyObject).tag                  if tag == 0{             guard let home = self.storyboard?.instantiateViewController(identifier: "HomeViewController") as? HomeViewController else { return}             Contentview.addSubview(home.view)             home.didMove(toParent: self)                                 }else if tag == 1{             guard let search = self.storyboard?.instantiateViewController(identifier: "SearchViewController") as? SearchViewController else { return}             Contentview.addSubview(search.view)             search.didMove(toParent: self)                      }else if tag == 2{             guard let camera = self.storyboard?.instantiateViewController(identifier: "CameraViewController") as? CameraViewController else { return}             Contentview.addSubview(camera.view)             camera.didMove(toParent: self)                      }else{                        guard let profile = self.storyboard?.instantiateViewController(identifier: "ProfileViewController") as? ProfileViewController else { return}             Contentview.addSubview(profile.view)             profile.didMove(toParent: self)         }     }        }

5. Add the view of the HomeViewController to the content view as a subview and call the didMove(toParent: ) function.

Note:- If you don’t call it the child view controller won’t be able to detect that it did move to the parent view controller.

6. Now, run the project.

For other blogs Please click here