-
Notifications
You must be signed in to change notification settings - Fork 582
Home
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.
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
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.
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 ! 😃😃😃