Skip to content
Vincent Li edited this page Aug 23, 2018 · 3 revisions

Instructions to install

Well for anyone who doesn't already know how to go about using this library, here's a quick and short crash course. There are two important classes that you need to subclass.

WHAT NEEDS TO BE DONE

First - ESTabBarItemContentView needs to be subclassed. As the name suggests, this will define the view of the tab bar, i.e. how the icons on the tab bar will appear and how they will animate, what background color of the tab bar, etc. etc. (Code sample below)

Second - ESTabBarController needs to be subclassed. This defines the structure and contents of the UITabBarController (note - ESTabBarController is a subclass of UITabBarController - more on this below in code samples section) and is a rather simple one. Here is where you define your UIViewControllers using instantiateViewController(withIdentifier:) method. So if you have 5 positions in the tab, you will have 5 VCs and 5 instantiateViewController(withIdentifier:). Once you have all the VCs instantiated, you simply need to assign the tabBarItem property of each of the VCs with an ESTabBarItem object, like- (code sample below)

let v1 = self.storyboard?.instantiateViewController(withIdentifier: "HomeVC") as! HomeVC
v1.tabBarItem = ESTabBarItem.init(TabBarContentView(), title: "Home", image: UIImage(named: "home"), selectedImage: UIImage(named: "home2"))

In the second line of code above, TabBarContentView is your custom class that you created in First step by subclassing ESTabBarItemContentView (code sample below). And the initialization shown above will need to be done for all the VCs in your tab bar. Once all the VCs are initialized (v1, v2, v3, ...), simply do this

self.viewControllers = [v1,v2,v3,v4,v5]
self.delegate = self

And that's it....!! you have your ESTabBar

DISCUSSION

I gotta be honest, the "First" step i.e. subclassing ESTabBarItemContentView does the majority of the heavy lifting since it defines how your tab will visually look. It can be very simple, or it can be complex with animations, so you need to see the sample project for examples , find out the classes where it's a subclass of ESTabBarItemContentView and see how it's coded to generate the desired effect using the examples of effects you can use. Below is a sample which you can likely copy paste in your code to achieve a bounce on select of your tab bar icons with a tab bar consisting of 5 positions i.e. 5 View controllers.

CODE SAMPLE

Subclass ESTabBarItemContentView:-

class TabBarContentView: ESTabBarItemContentView {
    public var duration = 0.3
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        //define the text label and icon color for normal and highlighted mode.
        textColor = UIColor(red:0.38, green:0.49, blue:0.55, alpha:1.0) //Or whatever color you want
        highlightTextColor = UIColor.red ////Or whatever color you want
        iconColor = UIColor(red:0.38, green:0.49, blue:0.55, alpha:1.0) //Or whatever color you want
        highlightIconColor = UIColor.red ////Or whatever color you want
    }
    
    public required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func selectAnimation(animated: Bool, completion: (() -> ())?) {
        self.bounceAnimation()
        completion?()
    }
    
    override func reselectAnimation(animated: Bool, completion: (() -> ())?) {
        self.bounceAnimation()
        completion?()
    }
    
    func bounceAnimation() {
        let impliesAnimation = CAKeyframeAnimation(keyPath: "transform.scale")
        impliesAnimation.values = [1.0 ,1.4, 0.9, 1.15, 0.95, 1.02, 1.0]
        impliesAnimation.duration = duration * 2
        impliesAnimation.calculationMode = kCAAnimationCubic
        imageView.layer.add(impliesAnimation, forKey: nil)
    }
}

Subclass ESTabBarController:-

class MyCustomTabBar: ESTabBarController{
override func viewDidLoad() {
        super.viewDidLoad()
        
        let v1 = self.storyboard?.instantiateViewController(withIdentifier: "Home1") as! Home1
        let v2 = self.storyboard?.instantiateViewController(withIdentifier: "Screen2") as! Screen2
        let v3 = self.storyboard?.instantiateViewController(withIdentifier: "Screen3") as! Screen3
        let v4 = self.storyboard?.instantiateViewController(withIdentifier: "Screen4") as! Screen4
        let v5 = self.storyboard?.instantiateViewController(withIdentifier: "Screen5") as! Screen5
        
        
        v1.tabBarItem = ESTabBarItem.init(TabBarContentView(), title: "Home", image: UIImage(named: "home"), selectedImage: UIImage(named: "home2"))
        v2.tabBarItem = ESTabBarItem.init(TabBarContentView(), title: "Screen2", image: UIImage(named: "Screen2"), selectedImage: UIImage(named: "Screen2"))
        v3.tabBarItem = ESTabBarItem.init(TabBarContentView(), title: "Screen3", image: UIImage(named: "Screen3"), selectedImage: UIImage(named: "Screen3"))
        v4.tabBarItem = ESTabBarItem.init(TabBarContentView(), title: "Screen4", image: UIImage(named: "Screen4"), selectedImage: UIImage(named: "Screen4"))
        v5.tabBarItem = ESTabBarItem.init(TabBarContentView(), title: "Screen5", image: UIImage(named: "Screen5"), selectedImage: UIImage(named: "Screen5"))
        
        
        self.viewControllers = [v1,v2,v3,v4,v5]
        self.delegate = self

    }
}

Also, as mentioned before, ESTabBarController is just a subclass of the internal UITabBarController so it's delegate i.e UITabBarControllerDelegate (which is why you did self.delegate = self in the class above) will also work like so-

extension MyCustomTabBar : UITabBarControllerDelegate{
      func tabBarController(_ tabBarController: UITabBarController, animationControllerForTransitionFrom fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
          //....your delegate code
    } 

    //other delegate methods as required....
}

With the above two class sample codes, you should be up and running with your initial implementation of this library, of course you can customize a whole lot more.

Ps. Thanks for @annjawn ! 😃😃😃

Clone this wiki locally