bardonadam / slidingtabbar

A custom TabBar view with sliding animation written in Swift.

SlidingTabBar

A custom TabBar view with sliding animation written in Swift. Inspired by this dribble.

Also, read how it was done on my blog - part 1, part 2.

Requirements

• iOS 8.0+
• Xcode 7.2+
• Swift 2+

Installation

SlidingTabBar is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "SlidingTabBar"

Usage

First create your UITabBarViewController class and import SlidingTabBar:

import SlidingTabBar

Make it adopt SlidingTabBarDataSource, SlidingTabBarDelegate and UITabBarControllerDelegate protocols:

class YourViewController: UITabBarController, SlidingTabBarDataSource, SlidingTabBarDelegate, UITabBarControllerDelegate

In viewDidLoad() set default UITabBar as hidden, set selectedIndex as you need and set the delegate.

self.tabBar.hidden = true
self.selectedIndex = 1
self.delegate = self

Create class variables:
var tabBarView: SlidingTabBar!
var fromIndex: Int!
var toIndex: Int!

Now initialize tabBarView in viewDidLoad():

// use default UITabBar's frame or whatever you want
// number of selectedTabBarItemColors has to match number of your tab bar items

tabBarView = SlidingTabBar(frame: self.tabBar.frame, initialTabBarItemIndex: self.selectedIndex)
tabBarView.tabBarBackgroundColor = UIColor.black()
tabBarView.tabBarItemTintColor = UIColor.gray()
tabBarView.selectedTabBarItemTintColor = UIColor.white()
tabBarView.selectedTabBarItemColors = [UIColor.red(), UIColor.green(), UIColor.blue()]
tabBarView.slideAnimationDuration = 0.6
tabBarView.datasource = self
tabBarView.delegate = self
tabBarView.setup()

self.view.addSubview(tabBarView)

And implement those delegate and datasource methods:

// MARK: - SlidingTabBarDataSource
    
func tabBarItemsInSlidingTabBar(tabBarView: SlidingTabBar) -> [UITabBarItem] {
    return tabBar.items!
}
    
// MARK: - SlidingTabBarDelegate
    
func didSelectViewController(tabBarView: SlidingTabBar, atIndex index: Int, from: Int) {
    self.fromIndex = from
    self.toIndex = index
    self.selectedIndex = index
}
    
// MARK: - UITabBarControllerDelegate
    
func tabBarController(tabBarController: UITabBarController, animationControllerForTransitionFromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    
    // use same duration as for tabBarView.slideAnimationDuration
    // you can choose direction in which view controllers should be changed:
    // - .Both(default),
    // - .Reverse,
    // - .Left,
    // - .Right 
    return SlidingTabAnimatedTransitioning(transitionDuration: 0.6, direction: .Both,
     fromIndex: self.fromIndex, toIndex: self.toIndex)
}

Finally set things up in the Storyboard:

1. Add native UITabBarController to the storyboard, establish relationships with its view controllers.
2. Choose YourViewController as custom class for UITabBarController.
3. Set images for all tab bar items:

If you're implementing 3d touch - Home Screen Quick Actions, add this to AppDelegate:

func application(application: UIApplication, performActionForShortcutItem shortcutItem: UIApplicationShortcutItem, completionHandler: (Bool) -> Void) {
	
    // whatever type you have
    if shortcutItem.type == UIApplicationShortcutItem.type { 
        let tabBarController = (window?.rootViewController as! YourViewController)
        tabBarController.selectedIndex = 1 // whatever view controller you need
        tabBarController.tabBarView.initialTabBarItemIndex = tabBarController.selectedIndex
        tabBarController.tabBarView.reloadTabBarView()
            
        completionHandler(true)
    }
        
    completionHandler(false)
}

Enjoy! :)

Author

Adam Bardon, [email protected], @bardonadam

License

SlidingTabBar is available under the MIT license. See the LICENSE file for more info.

slidingtabbar's Issues

Class <...> has no initializers.

Hi, I am fairly new to Swift. I have been playing with it for about a month and have just now started an actual project. I thought this would be a nice touch, but this error popped up stating the following: Class ViewNavigation has no initializers. My code is bellow:

import UIKit
import SlidingTabBar

class ViewNavigation: UITabBarController, UITabBarControllerDelegate, SlidingTabBarDataSource, SlidingTabBarDelegate {

    var tabBarView: SlidingTabBar

    func tabBarItemsInSlidingTabBar(tabBarView: SlidingTabBar) -> [UITabBarItem] {

        return tabBar.items!

    }

    func didSelectViewController(tabBarView: SlidingTabBar, atIndex index: Int) {

        selectedIndex = index

    }

    func tabBarController(tabBarController: UITabBarController, animationControllerForTransitionFromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {

        return SlidingTabAnimatedTransitioning(transitionDuration: 0.6)

    }

    override func viewDidLoad() {

        super.viewDidLoad()

        tabBar.hidden = true
        selectedIndex = 1
        delegate = self

        tabBarView = SlidingTabBar(frame: self.tabBar.frame, initialTabBarItemIndex: self.selectedIndex)
        tabBarView.tabBarBackgroundColor = UIColor.lightGrayColor()
        tabBarView.tabBarItemTintColor = UIColor.blackColor()
        tabBarView.selectedTabBarItemTintColor = UIColor.blueColor()
        tabBarView.selectedTabBarItemColors = [UIColor.orangeColor(), UIColor.greenColor()]
        tabBarView.slideAnimationDuration = 0.6
        tabBarView.datasource = self
        tabBarView.delegate = self
        tabBarView.setup()

        view.addSubview(tabBarView)

    }

    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

    }

}

Please help, I am extremely confused.

Hiding sliding tab bar inside inner views

Hi ... I am using your sliding tab bars . I want to hide them completely when i segues to any other inner view to maintain the single navigation stack . Can you please tell me how can i achieve this . Thanks in advance

Can the animation change selected view from left to right?

The animation of changing selected view in SlidingTabBar only has from right to left, but is it possible to change view from left to right?

TabAinatedTransitioning Issue

-resolved issue

tabBarView doesn't show up

I am trying to replace the existing tab bar with slidingTabBar. I did the following:

func setupTabs(){
        //hide the default tabbar
        self.tabBar.hidden = true
        self.selectedIndex = 0

        //initialize the fancy tabbar
        tabBarView = SlidingTabBar(frame: self.tabBar.frame, initialTabBarItemIndex: self.selectedIndex)
        tabBarView.tabBarBackgroundColor = Styles.brandPrimary
        tabBarView.tabBarItemTintColor = Styles.brandPrimaryLight
        tabBarView.selectedTabBarItemTintColor = UIColor.whiteColor()
        tabBarView.selectedTabBarItemColors = [Styles.softYellow, Styles.softYellow, Styles.softYellow]
        tabBarView.slideAnimationDuration = 0.6
        tabBarView.datasource = self
        tabBarView.delegate = self
        tabBarView.setup()

        self.delegate = self

        print(tabBarView.frame)

        self.view.addSubview(tabBarView)
    }

The original tab bar is hidden, but the subview never shows up. What might I be missing here?

Could you make this an auto layout nav?

If you rotate the device, the navbar moves. Could you change it so that when you rotate the device the x and y cordinates change, and the height and width? It would be really nice.

tab bar unselected color

Hi bardonadam,

(Note this is not an issue just a query.)

This is really nice custom tab bar in swift I found.
But is there any way to customise this so that we can set different background colour or image for each unselected tab bar items also, just like we set for selected items? Something like attached below with selected tab bar item with orange colour and unselected ones with different colour red and dark

blue instead of single colour brown in your sample example.

Thanks