eggswift / estabbarcontroller

:octocat: ESTabBarController is a Swift model for customize UI, badge and adding animation to tabbar items. Support lottie!

中文介绍

ESTabBarController is a highly customizable TabBarController component, which is inherited from UITabBarController.

Why?

In real-world development, we may encounter the situation of customizing the UITabBar. For instance: change font style, add animation, and use bigger items. However it's hard to do with UITabBarItem.

With ESTabBarController, You can easily achieve these！

-	Feature	Description
1	Default style	You can get a system-like style by initializing the TabBar with ESTabBarController directly. UITabBarController style: ESTabBarController default style:
2	Default style with "More" item	If the items are more than the maximum number of displays, there will be a "More" item. UITabBarController with "More": ESTabBarController with "More":
3	Mix UITabBarItem and ESTabBarItem	You can set any item as you want, including UITabBarItem and ESTabBarItem. ESTabBar and UITabBar mixed style: ESTabBar and UITabBar mixed style with "More":
4	UIKit attributes	ESTabBarController is compatible with UITabBarController, UITabBar and UITabBarItem's most API attributes. You can migrate to ESTabBarController without any modification of the origin code. Compatible with UITabBarController's selectedIndex:
5	Any nesting with UINavigationController	Developing withUITabBarController, there are two common ways to handle layers: First : ├── UITabBarController └──── UINavigationController └────── UIViewController └──────── SubviewControllers Second : ├── UINavigationController └──── UITabBarController └────── UIViewController └──────── SubviewControllers In the first case, need to set hidesBottomBarWhenPushed = true when pushing subViews. The second is not. In ESTabBarController, add Container views to UITabBar to be compatible with these two ways。
6	Customizable style	With ESTabBarController, you can： 1. Customize selected item's color and style: 2. Add selecting animation: 3. Customize item's background color: 4. Add highlight animation: 5. Add animation to prompt users: 6. And much more ...
7	Customizable item's size Customizable click event	You can easily customize item's size using ESTabBarController. When the button's frame is larger than TabBar, HitTest makes the outer TabBar area click valid. In addition, ESTabBarController can customize click event, and through a block to callback super-layer to handle. With big item in the middle of TabBar: With a special hint style: Customize click event:
8	Default notification style	You can get a system-like notification style by initializing the TabBar with ESTabBarController directly. UITabBarController notification style: ESTabBarController system-like notification style:
9	Customizable notification style	With ESTabBarController, you can： 1. Customize notification animation: 2. Customize prompt style: 3. And much more ...
10	Lottie	Through customizing ContentView, you are able to add Lottie's LAAnimationView to Item(s)

Requirements

• Xcode 8 or later
• iOS 8.0 or later
• ARC
• Swift 5 or later

Demo

You can download and build ESTabBarControllerExample project, and you will find more examples to use ESTabBarController, and also more examples to customize UITabBar。

Usage

Swift Package Manager

...
dependencies: [
    .package(name: "ESTabBarController", url: "https://github.com/eggswift/ESTabBarController.git", from: "2.9.0-spm")
]
...

CocoaPods

pod "ESTabBarController-swift"

Carthage

github "eggswift/ESTabBarController"

Manually

git clone https://github.com/eggswift/ESTabBarController.git
open ESTabBarController

TODO

1. The Containers' layout is purely based on code，using Autolayout will be better.
2. When there is "More," if edited, problems occur.
3. Partial UITabBarItem attributes are not bridge to ESTabBarItem.
4. The picture of 'More' item in ESTabBarItemMoreContentView is not set into framework, plan to convert it to CGBitmap.

Sponsor

You can support the project by checking out our sponsor page. It takes only one click:

This advert was placed by GitAds

Acknowledgement

• animated-tab-bar by http://ramotion.com
• Partial pictures in Example are from http://www.iconfont.cn

About

ESTabBarController is developed and maintained by Vincent Li. If you have any questions or issues in using ESTabBarController, welcome to issue.
If you want to contribute to ESTabBarController, Please submit Pull Request, I will deal with it as soon as possible.

License

The MIT License (MIT)

Copyright (c) 2013-2016 eggswift. All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

estabbarcontroller's Issues

Add border around badge

Hello,
can I add a 1px border around badge-Icon?
I just found how to change color and change the number.

Would be helpful, thank you

如何动态设置显示哪一页？ 如何设置index？

如题

How can i change tint color of tabbar item ?

i have set selected and normal image but that cant affect.
and uitabbar.apperance().tintcolr() also wont change that.

ios 9 set shadowImage or shadowColor and set custom ESTabBarItemContentView issue

like the image
the shadow ImageView will bring to the most front on ios 9
but it will fine on ios 10

set shadowImage
tabBar.shadowImage = UIImage(color: #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1), size: CGSize(width: 1, height: 1.0/UIScreen.main.scale))

class MyESTabbarItem: ESTabBarItemContentView {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        imageView.frame = CGRect(x: 0, y: 0, width: 60, height: 60)
        imageView.center = center
        imageView.backgroundColor =  #colorLiteral(red: 0.9490196078, green: 0.3333333333, blue: 0.3333333333, alpha: 1)

        
        insets = UIEdgeInsetsMake(5, 0, 0, 0)
       let transform = CGAffineTransform.identity
      imageView.transform = transform
        superview?.bringSubview(toFront: self)
        
        textColor = #colorLiteral(red: 0.8823529412, green: 0.7960784314, blue: 0.7960784314, alpha: 1)
        highlightTextColor = #colorLiteral(red: 0.9490196078, green: 0.3333333333, blue: 0.3333333333, alpha: 1)
        iconColor = #colorLiteral(red: 0.8823529412, green: 0.7960784314, blue: 0.7960784314, alpha: 1)
        highlightIconColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
        backdropColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0)
        highlightBackdropColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0)
    }
}

After edit, More tab item disappear.

请问标题字体文件在哪里的哦？

Selected Item while shouldHijackHandler return true for this item

Hello! Thank you for this great library!
Possible, I don't find the solution, but it's look like when in didHijackHandler you try to set hijacked item as selected - this produce uncontrolled recursion, and no possibility to set this item as selected. Is some solution to set hijacked item as selected?

Custom Image in Tab Bar Item

I am trying to add custom image for the Tab Bar Item. Its not a greyscale Image. I have tried everything to add it through methods available in the library but couldn't add it.

I have added subview to tabbar using this code.

UIImage *imgPlaceAd = [UIImage imageNamed:@"placeAd-tab-bar"];
UIImageView *imgTab = [[UIImageView alloc] initWithFrame:CGRectMake(self.tabBarController.tabBar.center.x - imgPlaceAd.size.width/2,
                                                    8.0,
                                                    imgPlaceAd.size.width,
                                                    imgPlaceAd.size.height)];
    
    imgTab.image = imgPlaceAd;

    [self.tabBarController.tabBar addSubview:imgTab];

Doing that, it changes the Item's class and it is now UITabBarItem and not ESTabBarItem

I have checked in the ESTabBar class and print the class in this function

internal func select(itemAtIndex idx: Int, animated: Bool) 
{....}

---

When I try to add Image using the init function of ESTabBarItem I get a circularly grey image.

PlaceAdView *placeAdVC = [[PlaceAdView alloc] init];
    
placeAdVC.tabBarItem = [[ESTabBarItem alloc] init:[[TabBarBouncesContentView alloc] init] title:@"" image:[UIImage imageNamed:@"placeAd-tab-bar"] selectedImage:[UIImage imageNamed:@"placeAd-tab-bar"] tag:2];

你好,我在其他控制类如何使用selectedIndex?

我尝试使用self.tabBarController?.selectedIndex = 0
但是没效果,如果我想再其他控制器使用
应该怎么写?

By default first tab not showing as selected if tab bar used as RootViewController

I am using ESTabBarController as root view controller of my app, but the problem is that the first controller is shown by default but the tab bar is not showing as selected by default
Once I click the tab then it works fine. I have attached screenshot with the issue

class ECPTabBarController: ESTabBarController {

    override func viewDidLoad() {
        self.isHeroEnabled = true
        self.heroTabBarAnimationType = HeroDefaultAnimationType.push(direction: HeroDefaultAnimationType.Direction.left)
        addChildVC(childVc: DashboardViewController(), title: "Dashboard", iconImage: "Dashboard")
        addChildVC(childVc: AddActionViewController(), title: "Add New", iconImage: "AddNew")
        addChildVC(childVc: PendingActionViewController(), title: "Pending Items", iconImage: "Notification")
        addChildVC(childVc: SettingsViewController(), title: "Settings", iconImage: "Settings")
        super.viewDidLoad()
        self.selectedIndex = 0
       
![firstimage](https://cloud.githubusercontent.com/assets/658004/24071001/fd825754-0c02-11e7-9edd-98d52751ccb0.jpg)
![secondimage](https://cloud.githubusercontent.com/assets/658004/24071002/01bf0b64-0c03-11e7-915c-cf0ad3a06e5b.jpg)


    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    
    fileprivate func addChildVC(childVc:UIViewController , title:String,iconImage:String)->Void{
        childVc.tabBarItem = ESTabBarItem.init(TabbarBounceContentView(), title: "Home", image: UIImage(named: iconImage), selectedImage: UIImage(named: iconImage))
        let navigationController = ECPBaseNavigationController(rootViewController: childVc)
        self.addChildViewController(navigationController);
        
    }


}

class TabbarBasicContentView: ESTabBarItemContentView {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        textColor = UIColor.gray
        highlightTextColor = UIColor.ecpBlueNotationColor()
        iconColor = UIColor.gray
        highlightIconColor = UIColor.ecpBlueNotationColor()    }
    
    public required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    
}

class TabbarBounceContentView: TabbarBasicContentView {
    
    public var duration = 0.3
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    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)
    }
}

Do i need to any other extra configuration to make it work.
Screenshot is also attached along with.

请问有计划更新到Swift 3吗

你好！感谢开源

方便把设置 tabbatItem 的字体大小属性暴露出来吗？现在默认是10，如果要改只有进框架内部修改

present的WebViewController不能dismiss

example project里面如果是present显示的WebViewController(作者的github主页)没有办法dismiss

how to double click tabbar item pop root view controller

help me!
how to double click tabbar item pop root view controller user swift

edge insets

@eggswift I tried adding edge insets to the image in the tab bar item like this self.image?.capInsets == UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10). But the image insets are still 0 and the images are still too big. Please advise on how I can fix this. I am stating this code in ExampleIrregularityContentView.

当前界面的按钮再点一下会退出，怎么阻止？

这个能自定义tabbar的高度吗

How can I use the icon's original color?

My icon.png contains color information, so i just want to use it, not iconColor.

I found image.didset in ESTabBarItemContentView by default with withRenderingMode(.alwaysTemplate), so how can i change alwaysTemplate -> alwaysOriginal ?

Obj-C / Swift mixed Project

tabbar 分割线属性shadowImage

您好！请问 tabbar 顶部的分割线shadowImage，该如何设置？按照以前的方式设置没效果
self.tabBar.shadowImage = UIImage(color: UIColor.red, size: CGSize(width: SCREEN_WIDTH, height: 0.5)).withRenderingMode(.alwaysOriginal)

Why is there popToRootViewController?

First thanks for this nice library.

I see in your code that when same tab item is selected second time, you trigger a popToRootViewController. Why?

https://github.com/eggswift/ESTabBarController/blob/master/Sources/ESTabBar.swift#L375

And how can I disable this behaviour?

Thank you.

有没有OC版本的?

Retain cycle exists somewhere

In your example project, I went to ExampleViewController.swift and added this code:
deinit { print("Did deinit") }

Then if you run the app and open 1.1 UITabBarController style, then Click to pop or dismiss, you'll see in debugger that all 5 instances of ExampleViewController get deinit.

Now go to 1.2 ESTabBarController like system style, and do the same, and when you dismiss, none of the 5 instance gets deallocated.

This means somewhere is a retain cycle. I found at least one, which I fixed, but still not enough, there should be some more:
https://github.com/eggswift/ESTabBarController/blob/master/Sources/ESTabBar.swift#L347

Not sure about this one ...??
https://github.com/eggswift/ESTabBarController/blob/master/Sources/ESTabBar.swift#L343

I managed to partially fix this in my project by calling this code when logging out of the app:
esTabBarController.viewControllers = nil
This will force deinit 4 of the 5 instances of view controllers from the esTabBarController, but always last one doesn't get deinit.
If you can help would be very good, because it's causing memory leak.

请问一下，只有两个TabBarItem的时候，怎样调整它们之间的间距？

如题

下级页面隐藏 bottom 有卡顿现象

如题,如果设置 hide bottom bar on push的时候
跳转到下级页面会卡顿一下

关于ESTabBarItem

引用 demo 的例子:
如果我想实现带动画效果的 tababr, 那么我需要
v1.tabBarItem = ESTabBarItem.init(ExampleBouncesContentView(), title: "Home", image: UIImage(named: "home"), selectedImage: UIImage(named: "home_1"))
但我发现我不能使用selectedImage的原始图片,因为这样会在图片上有一层蒙版,我希望能够跟系统一样使用原始的图片
highlightIconColor属性默认是蓝色,如果改为 clear 的话图标也会看不到,有什么方法可以兼顾两者吗?即使用ESTabBarItem又能显示原始的图片

Instructions to install

How can I add ESTabBarController to my project?

Issue with swift 3.0

I just can't make it work with swift 3.0 , 68 issues are appearing and I cannot fix them all

一个关于属性命名的问题

您好, 我发现 ESTabBarItemContentView 这个类的 highlightTextColor 属性是其实是 selectedTextColor 的意思。用 hightlight 这个词貌似有点误导的意思。当然还有 highlightIconColor.
一个小小的建议。

您好！请问ESTabBarController支持Swift2.0吗？

在storyboard中如何使用?

请问如果我想再 storyboard 中使用,能不能呢?如果可以的话应该怎么做?

[ASK] Slide to change tab

Is this library has included gesture to slide which like android behaviour?
Thanks.

Compile time error on ESTabBarItemContainer

Getting an error on ESTabBarItemContainer while building the project (Xcode 9.0 beta)

Argument of '#selector' refers to instance method 'selectAction' that is not exposed to Objective-C

为什么设置self.title会是设置tab的文字呢

我设置在tabbar的一个界面里设置self.title 但是改变的并不是导航的标题，而是是tabbar的底部文字，这是为什么呢？

Voice-over capability does not work

When using voice-over through accessibility, the tabs no longer behave the way they do when using UITabBarController.

"2" is being cropped on icon badge

If you set "1" as a value on a ESTabBarItem badge and then set "2", it is being cropped.

If you set "2" from the beginning it works fine, though.
UITabBarItem also works fine.

Carthage Support

Hello,

can you support cartage please?
Just share the frameworks with iOS / tvOS

Selected Effect Style only works in Simulator

The "3.4 With a selected effect style" only works in the simulator in my case. On an iPhone the effect only triggers on a long press on the icon... does anyone have the same problem or even a solution?

• Both, simulator and iPhone run on iOS 10.3.1.

Add easy support to change ESTabBarItem Font

I tried both
UITabBarItem.appearance().setTitleTextAttributes([NSFontAttributeName:UIFont(name: "American Typewriter", size: 8)], for: .normal)
and
ESTabBarItem.appearance().setTitleTextAttributes([NSFontAttributeName:UIFont(name: "American Typewriter", size: 8)], for: .normal) but something must be overridden and it doesn't work.
You talk about customizing Fonts in your Readme, could you please add a simple way to do it?
Thanks,

有个问题

UITabBarController的UITabBarItem在touchDown的时候就切换到对应的viewController了，ESTabBarController在touchUpInside时才进行切换。

hide tabbar

请问如何手动隐藏tabbar。
我之前用的系统的默认的tabbar，可以用如下代码隐藏，但是切换到ESTabBar以后，底部会出现黑色区域。。。

    func hidesSystemTabBar(_ isHidden: Bool) {
        UIView.beginAnimations(nil, context: nil)
        UIView.setAnimationDuration(0.3)
        
        if self.tabBarController?.view.subviews == nil {
            return;
        }
        for view in (self.tabBarController?.view.subviews)! {
            if view.isKind(of: UITabBar.classForCoder()) {
                if (isHidden) {
                    view.frame = CGRect(x: view.frame.origin.x, y: UIScreen.main.bounds.size.height, width: view.frame.size.width , height: view.frame.size.height)
                }else{
                    view.frame = CGRect(x: view.frame.origin.x, y: UIScreen.main.bounds.size.height - 49, width: view.frame.size.width, height: view.frame.size.height)
                }
            }else{
                if view.isKind(of: NSClassFromString("UITransitionView")!) {
                    if (isHidden) {
                        view.frame = CGRect(x: view.frame.origin.x, y: view.frame.origin.y, width: view.frame.size.width ,  height: UIScreen.main.bounds.size.height)
                    } else {
                        view.frame = CGRect(x: view.frame.origin.x, y: view.frame.origin.y, width: view.frame.size.width, height: UIScreen.main.bounds.size.height - 49 )
                    }
                }
            }
        }
        
        UIView.commitAnimations()
    }

ESTabBarController doesn't support storyboard!!!

Hi
I use this library and work good! but when i add view in tabbar controller, nothing action work in view!

let splashVC = self.storyboard!.instantiateViewController(withIdentifier: "Splash")

        let tabBarController = ESTabBarController()
        tabBarController.delegate = self
        tabBarController.title = "Irregularity"
        tabBarController.tabBar.shadowImage = UIImage(named: "transparent")
        tabBarController.tabBar.backgroundImage = UIImage(named: "background_dark")
        
        let v1 = DashboardViewController()
        let v2 = FollowViewController()
        let v3 = BuyViewController()
        let v4 = MessageViewController()
        let v5 = PurchaseRecordsViewController()
        
        v1.tabBarItem = ESTabBarItem.init(ExampleIrregularityBasicContentView(), title: "Dashboard", image: UIImage(named: "home"), selectedImage: UIImage(named: "home_1"))
        v2.tabBarItem = ESTabBarItem.init(ExampleIrregularityBasicContentView(), title: "Follow", image: UIImage(named: "find"), selectedImage: UIImage(named: "find_1"))
        v3.tabBarItem = ESTabBarItem.init(ExampleIrregularityContentView(), title: nil, image: UIImage(named: "shop"), selectedImage: UIImage(named: "shop_1"))
        v4.tabBarItem = ESTabBarItem.init(ExampleIrregularityBasicContentView(), title: "Messagage", image: UIImage(named: "favor"), selectedImage: UIImage(named: "favor_1"))
        v5.tabBarItem = ESTabBarItem.init(ExampleIrregularityBasicContentView(), title: "Purchase Records", image: UIImage(named: "me"), selectedImage: UIImage(named: "me_1"))
        
        tabBarController.viewControllers = [v1, v2, v3, v4, v5]
        
        let navigationController = MainNavigationController.init(rootViewController: tabBarController)
        tabBarController.title = "Test"
        
        self.present(navigationController, animated: true, completion: nil)
        
        
        UIApplication.shared.keyWindow?.addSubview(splashVC.view)

after this code. in SplashViewController no action will not work!!!

is there any way to use an original image?

is there any way to use an original image?, with ESTabBarItemContentView

swift 3 지원 요청

swift 3 지원 요청 합니다.

用cocoapods安装之后，导入ESTabBarController报错

我在项目的 Build Phases - Link Binary With Libraries 中添加了 ESTabBarController_swift.framework，
然后在自定义的 TabBarController 中 import ESTabBarController，提示 No such module 'ESTabBarController'，请问该怎么解决呢？

刚学 swift 没多久，请见谅！

Storyboard settings not considered

If I setup a ESTabBarController whatever styling settings I give (Style, Bar Tint etc) are not taken into account and ESTabBar keeps default styling.

There should be full compatibility with UITabBarController so that ESTabBarController is a drop-in replacement.

Read me in English

nice library , can you please add a read me file in plain english ?

badge使用小云朵时，数字显示似乎有问题？会被云朵盖住。

Error on example for custom reminder style.

Hi.

I run your example.
I selected "6.2 Imitate system remind style" then the app was killed.

In exampleProvider.swift, Line 380

if let tabBar = tabBarController.tabBar as? ESTabBar {
tabBar.beginCustomizingItems(tabBar.items!) // <- stucked
}

Pod 'GodEye'

Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[<ESTabBarController_swift.ESTabBarItem 0x60800035b280> valueForUndefinedKey:]: this class is not key value coding-compliant for the key landscapeImagePhone.'