Creating a Custom Tab Bar

Question

I want to create a custom tab bar at the top. Just like 9gag. Do you know a place where i can learn how to do it? (documentiation or video tutorial) Thanks 9gag custom tab bar

Answer 1

You can use a collection view to create something like this.

Here is how to do it:

1. Create your ViewController interface like shown in the screenshot below:

Don't forget to set the scroll direction of collection view to horizontal

2. Create the custom collection view cell class as

    import UIKit


    class CustomCollectionViewCell: UICollectionViewCell
    {
        //MARK: Outlets
        @IBOutlet private weak var titleLabel: UILabel!
        @IBOutlet private weak var blueDividerLineImageView: UIImageView!

        //MARK: Overridden Properties

    override var isSelected: Bool{
        willSet{
            super.isSelected = newValue
            if newValue
            {
                self.titleLabel.textColor = UIColor(red: 0.0/255.0, green: 122.0/255.0, blue: 255.0/255.0, alpha: 1.0)
                self.blueDividerLineImageView.isHidden = false
            }
            else
            {
                self.titleLabel.textColor = UIColor.black
                self.blueDividerLineImageView.isHidden = true
            }
        }
    }

    //MARK: Internal Properties
    var titleString : String?{
        get{
            return self.titleLabel.text
        }
        set{
            self.titleLabel.text = newValue
        }
    }

    //MARK: View Lifecycle Methods
    override func awakeFromNib()
    {
        self.titleLabel.text = nil


     }
}

3. Create your ViewController class as:

import UIKit

class ViewController: UIViewController
{
    @IBOutlet weak var customCollectionView: UICollectionView!

    let tabsArray = ["Tab 1", "Tab 2", "Tab 3", "Tab 4", "Tab 5"]

    override func viewDidLoad()
    {
    }

    override var prefersStatusBarHidden: Bool{
        return true
    }
}

// MARK: - UICollectionViewDataSource, UICollectionViewDelegate Methods
extension ViewController : UICollectionViewDataSource, UICollectionViewDelegate
{
    //MARK: UICollectionViewDataSource
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
    {
        return self.tabsArray.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
    {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCollectionViewCell", for: indexPath) as! CustomCollectionViewCell
        cell.titleString = self.tabsArray[indexPath.row]
        return cell
    }

    //MARK: UICollectionViewDelegate
    func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath)
    {
        //For initially highlighting the first cell of "customCollectionView" when ViewController is loaded
        guard let _ = collectionView.indexPathsForSelectedItems?.first, indexPath.row != 0 else
        {
            cell.isSelected = true
            collectionView.selectItem(at: indexPath, animated: false, scrollPosition: .left)
            return
        }
    }

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)
    {
        collectionView.selectItem(at: indexPath, animated: true, scrollPosition: .centeredHorizontally)
        print("\(self.tabsArray[indexPath.row]) Pressed")

        //Do your task here..whatever you want to do when pressing the tabs
    }
}

The output screen is:

Answer 2

A work around which I implemented.

1. Create a view to have the custom tab bar.

   let tabView = UIView(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 60))
   tabView.backgroundColor = UIColor(red: 45/255, green: 58/255, blue: 114/255, alpha: 1)
   self.view.addSubview(tabView)
   

2. Depending on the number of buttons, decide the button size and add them as subview.(Taking 2 here)

   firstButton = UIButton(type: .Custom)
   firstButton.frame = CGRect(x: 0, y: 20, width: tabView.frame.size.width / 2, height: 30)
   firstButton.setTitle("BUT 1", forState: .Normal)
   firstButton.setTitleColor(UIColor(red: 0/255, green: 191/255, blue: 165/255, alpha: 1.0), forState: .Normal)
   firstButton.addTarget(self, action: #selector(ViewController.firstButtonTapped), forControlEvents: .TouchUpInside)
   
   tabView.addSubview(firstButton)
   
   secondButton = UIButton(type: .Custom)
   secondButton.frame = CGRect(x: tabView.frame.size.width / 2, y: 20, width: tabView.frame.size.width / 2, height: 30)
   secondButton.setTitle("BUT 2", forState: .Normal)
   secondButton.setTitleColor(UIColor.whiteColor(), forState: .Normal)
   secondButton.addTarget(self, action: #selector(ViewController.secondButtonTapped), forControlEvents: .TouchUpInside)
   
   tabView.addSubview(secondButton)
   

3. Add a small UIView which serves as a line below the buttons.

    lineView = UIView()
   lineView.frame = CGRect(x: 0, y: CGRectGetMaxY(tabView.frame) - 3, width: tabView.frame.size.width / 2, height: 3)
   lineView.backgroundColor = UIColor(red: 0/255, green: 191/255, blue: 165/255, alpha: 1.0)
   
   tabView.addSubview(lineView)
   

4. Make the view below in a scrollview.

    self.scrollView.frame = CGRectMake(0, CGRectGetMaxY(tabView.frame), self.view.frame.width, self.view.frame.height)
   self.scrollView.backgroundColor = UIColor.whiteColor()
   self.scrollView.delegate = self
   self.scrollView.pagingEnabled = true
   
   self.view.addSubview(self.scrollView)
   
   let aScrollViewWidth = self.scrollView.frame.width
   let aScrollViewHeight = self.scrollView.frame.height
   self.scrollView.contentSize = CGSizeMake(aScrollViewWidth * CGFloat(2), aScrollViewHeight)
   

5. Add your views one after the other. For the sake of the example, I am just adding a UITextView.

   for anIndex in 0  ..< 2  {
   
       let anEssayTextView = UITextView(frame: CGRectMake(aScrollViewWidth * CGFloat(anIndex), 0, aScrollViewWidth, aScrollViewHeight))
       anEssayTextView.text = essays[anIndex]
       anEssayTextView.editable = false
       self.scrollView.addSubview(anEssayTextView)
   
   }
   

6. ScrollView delegate function

    func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
   
   pageNumber = round(scrollView.contentOffset.x / scrollView.frame.size.width)
   
   if (pageNumber == 0) {
       firstButtonTapped()
   } else {
       secondButtonTapped()
   }
   }
   

7. Button actions

   func firstButtonTapped() {
   
   firstButton.setTitleColor(UIColor(red: 0/255, green: 191/255, blue: 165/255, alpha: 1.0), forState: .Normal)
   secondButton.setTitleColor(UIColor.whiteColor(), forState: .Normal)
   
   if (self.lineView.frame.origin.x != 0) {
   
       UIView.animateWithDuration(0.25) {
   
           self.lineView.frame.origin.x -= self.tabView.frame.size.width / 2
   
       }
   
   }
   
   scrollView.setContentOffset(CGPointMake(0, 0), animated: true)
   
   pageNumber = 0
   
   }
   
   
   func secondButtonTapped() {
   
   firstButton.setTitleColor(UIColor.whiteColor(), forState: .Normal)
   secondButton.setTitleColor(UIColor(red: 0/255, green: 191/255, blue: 165/255, alpha: 1.0), forState: .Normal)
   
   if (self.lineView.frame.origin.x != self.tabView.frame.size.width / 2) {
   
       UIView.animateWithDuration(0.25) {
   
           self.lineView.frame.origin.x += self.tabView.frame.size.width / 2
   
       }
   
   }
   
   scrollView.setContentOffset(CGPointMake(self.scrollView.frame.size.width, 0), animated: true)
   
   pageNumber = 1
   
   }