Instructions to install

[pableiros]

How can I add ESTabBarController to my project?

[vincent-peng]

https://github.com/eggswift/ESTabBarController#usage

[pableiros]

ok, but how can I implement ESTabBarController or what are the instructions to make my UITabViewControllers in ESTabBarController?

[rulezzer]

Hi, the pod installing isn't the problem but the implementation of the ESTabBarController and the replacement of an existing UITabBar is a little bit tough. Can you provide a better documentation? Thanks.

[rami-ihr]

@phaeena take a look at the included example application to see how to use ESTabBarController

[eggswift]

@phaeena @pableiros I will do this these days, sorry about late because my heavy works.

[BB64BIT]

Any news?

[agordeev]

This library is good, but without proper documentation it's useless :(

[annjawn]

The sample project is good.... BUT, little more explanation is required to show how a basic ESTabBar can be setup. There is lack of documentation on this, but it's an excellent library so thank you for that. ☺️

[alejandroivan]

This is highly needed. The sample project is... well, not really documentation. What are the methods available?

[annjawn]

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. 😃

[Stunner]

@annjawn Nice post! This should be placed in the Wiki or perhaps in the docs somewhere?