ramotion / animated-tab-bar

:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion

ANIMATED TAB BAR

Swift UI module library for adding animation to iOS tabbar items and icons.

---

We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Stay tuned for the latest updates:

Requirements

• iOS 9.0+
• Xcode 10.2

Installation

Just add the RAMAnimatedTabBarController folder to your project.

or use CocoaPods with Podfile:

pod 'RAMAnimatedTabBarController'

or Carthage users can simply add to their Cartfile:

github "Ramotion/animated-tab-bar"

or Swift Package Manager

Usage

1. Create a new UITabBarController in your storyboard or nib.

2. Set the class of the UITabBarController to RAMAnimatedTabBarController in your Storyboard or nib.

3. For each UITabBarItem, set the class to RAMAnimatedTabBarItem.

4. Add a custom image icon for each RAMAnimatedTabBarItem

5. Add animation for each RAMAnimatedTabBarItem :

   • drag and drop an NSObject item into your ViewController
   • set its class to ANIMATION_CLASS (where ANIMATION_CLASS is the class name of the animation you want to use)
   • connect the outlet animation in RAMAnimatedTabBarItem to your ANIMATION_CLASS Demonstration video for step 5

Included Animations

• RAMBounceAnimation
• RAMLeftRotationAnimation
• RAMRightRotationAnimation
• RAMFlipLeftTransitionItemAnimations
• RAMFlipRightTransitionItemAnimations
• RAMFlipTopTransitionItemAnimations
• RAMFlipBottomTransitionItemAnimations
• RAMFrameItemAnimation
• RAMFumeAnimation

Creating Custom Animations

1. Create a new class which inherits from RAMItemAnimation:

   class NewAnimation : RAMItemAnimation

2. Implement the methods in RAMItemAnimationProtocol:

  // method call when Tab Bar Item is selected
  override func playAnimation(icon: UIImageView, textLabel: UILabel) {
    // add animation
  }

  // method call when Tab Bar Item is deselected
  override func deselectAnimation(icon: UIImageView, textLabel: UILabel, defaultTextColor: UIColor, defaultIconColor: UIColor) {
    // add animation
  }

  // method call when TabBarController did load
  override func selectedState(icon: UIImageView, textLabel: UILabel) {
    // set selected state  
  }

3. Example:

import RAMAnimatedTabBarController

class RAMBounceAnimation : RAMItemAnimation {

    override func playAnimation(_ icon: UIImageView, textLabel: UILabel) {
        playBounceAnimation(icon)
        textLabel.textColor = textSelectedColor
    }

    override func deselectAnimation(_ icon: UIImageView, textLabel: UILabel, defaultTextColor: UIColor, defaultIconColor: UIColor) {
        textLabel.textColor = defaultTextColor
    }

    override func selectedState(_ icon: UIImageView, textLabel: UILabel) {
        textLabel.textColor = textSelectedColor
    }

    func playBounceAnimation(_ icon : UIImageView) {

        let bounceAnimation = CAKeyframeAnimation(keyPath: "transform.scale")
        bounceAnimation.values = [1.0 ,1.4, 0.9, 1.15, 0.95, 1.02, 1.0]
        bounceAnimation.duration = TimeInterval(duration)
        bounceAnimation.calculationMode = kCAAnimationCubic

        icon.layer.add(bounceAnimation, forKey: "bounceAnimation")
    }
}

📄 License

Animated Tab Bar is released under the MIT license. See LICENSE for details.

This library is a part of a selection of our best UI open-source projects.

If you use the open-source library in your project, please make sure to credit and backlink to www.ramotion.com

📱 Get the Showroom App for iOS to give it a try

Try this UI component and more like this in our iOS app. Contact us if interested.

animated-tab-bar's Issues

setImageInsets tabBarItem

I tried to change insets of every tabbaritems both programmatically and using storyboard. It doesn't work.

Code that I tried:
self.tabBarItem.imageInsets=UIEdgeInsetsMake(5, 0, -5, 0);
and also
for (RAMAnimatedTabBarItem *item in self.tabBarController.tabBar.items) {
item.imageInsets=UIEdgeInsetsMake(5, 0, -5, 0);
}

Thanks!

EXC_BAD_INSTRUCTION when using programatically

Hey guys,

I'm not using storyboard or any nib files to build up my view - just doing it manually. To give you a short overview:

I've a custom class which inherits from RAMAnimatedTabBarController. In the viewDidLoad of my custom class I call super.viewDidLoad which calls the one of RAMAnimatedTabBarController.

Then I got the described error in line:157:

func createViewContainers() -> NSDictionary {
    // ...
    let itemsCount : Int = tabBar.items!.count as Int - 1
    // ...
}

tabBar.items is by default nil, at least the public api says it:

var items: [AnyObject]? // get/set visible UITabBarItems. default is nil. changes not animated. shown in order

So I guess here is the problem. Would be nice if you can give a hint on how to implement your controller manually. I followed the steps you show up and exchanged all UITabBar* classes with the ones you declared and set the animation but as said it crashes on the viewDidLoad of the RAMAnimatedTabBarController.

RAMAnimatedTabBarController swiped,RAMAnimatedTabBarItem not swipe

currentIndex is 3 , UIButton click to exec
self.tabBarController?.selectedIndex = 0
The RAMAnimatedTabBarItem not change

Raised middle tab icon

Have you included a custom class for the raised middle tab bar icon included in your first mockup GIF?

need update is for swift 2.1 and xcode 7.1

UITabbarItem hidden issue

When I pushed from a VC to anothor VC,I want to hide the tabbar. So what I do first is set the "Hide Bottom Bar on Push" in the Storyboard ,the result is the tabbar is hidden indeed but the UITabbarItems are still.I also use UIVIew.animateWIthDurarion() to hide the tabbar but also failed.What can I do to hide the tabbar and the tabbaritem?

Cannot set tintColor

I have tried setting the tintColor via UITabBar.appearance().tintColor = UIColor.greenColor() or even in the Interface Builder and to no avail. It doesn't seem to work

RAMAnimatedTabBarController cannot work correctly with Objective-C code?

In my project, except RAMAnimatedTabBarController, all of the code is Objective-C. When I tap the tab bar item, the deselectItem does not invoke the deselect animation, it keeps the selected status always.

CocoaPod Support

Any plans to create a CocoaPod for this?

About the hidden problems

I set hidesBottomBarWhenPushed is YES.It's display like this.I want to hide it, can you tell me what should I do?

update to Swift 2.0

Hi, I'm getting errors in Xcode 7. Do you have plans to update to Swift 2.0?

Thanks

badgeValue for RAMAnimatedTabBarItem isn't rendered properly

The screenshot explains the problem :)

No shared scheme for Carthage

I'd like to include this project in my cartfile but the RAMAnimatedTabBarDemo project file doesn't contain a shared xcode scheme thus carthage update fails. An embedded framework wouldn't be necessary that way iOS 7 can still be targeted. I'd submit a pull request but I'm not certain how the .gitignore should be updated to allow these changes to be included.

UITabBarControllerDelegate Doesn't work

You can't delegate RAMAnimatedTabBarController.

Urgently: How can I change the selectedIndex tab?

When I use tabBarController?.selectedIndex it doesn't change the color in the animated tab, and I have tried using setSelectIndex() function but it didn't work, I really like this library but I have a deadline. Thanks in advance.

Maqueta de RAMAnimatedTabBarController programatically

i'm want to create a RAMAnimatedTabBarController programatically, there have some examples?

Can I integrate it into my OC project and use it programmatically?

As for my works, I have to do everything programmatically.
I know there is way to configure those attributes on StoryBorad which is simple.
But I prefer do it by coding.

Thank you, Nice project!

Make a V1.0.0 release tag

Can you please make a V1.0.0 release tag?

Support Carthage ?

Any plans to create a Carthage for this?

Swift 1.2 compatibility

Will this be ported over for swift 1.2 and Xcode 6.3?

Inspectable textColor is nil if set to default

If @IBInspectable var textColor: UIColor = UIColor.blackColor() set via IB to default, tint color of tab item will be blue (nil actually), not tab bar default tint. I think this should be fixed.
If you want, I can create PR with this fix.

Cocoapods available

Change tabTar image icon tintColor doesn't work.

There isn't a way to change the tabbar image icon tint color.

I've tried the:
UITabBar.appearance()tintColor = UIColorredColor()

Thanks

Errors in Project-swift.h

Having issues compiling in Xcode 7 beta 6 (Swift 2.0).

Getting a compile error:

Type argument 'CGImageRef' (aka 'struct CGImage *') is neither an Objective-C object nor a block type

Please see the attached screen. This is in the autogenerated "Project-swift.h" file.

Any ideas how to fix this? Kinda stuck here.

Thanks!

Delegate methods not being called

I have a subclass of RAMAnimatedTabBarController that works fine except that func tabBarController(tabBarController: UITabBarController, didSelectViewController viewController: UIViewController) is never called.

If my class is

class MasterTabBarViewController: RAMAnimatedTabBarController, UITabBarControllerDelegate

then that delegate method is never called.

But if I change it to

class MasterTabBarViewController: UITabBarController, UITabBarControllerDelegate

then it works as expected.

How can I get RAMAnimatedTabBarController to pass along the delegate method calls?

Have android platform？

This effect is so beautiful，can you commit an android platform for this？

Animated tab bar is hidden however still tap gesture is active

Hi,
I am trying to use this tab bar where I need to hide the tab bar however I am unable to remove gesture recogniser. Would it be possible so that in a particular view controller, i would disable selecting tab items.

fatal error: NSArray element failed to match the Swift Array Element type

After build succeeded I keep getting this error: fatal error:
"NSArray element failed to match the Swift Array Element type".
Im using Swift, 8.2.

fatal error: unexpectedly found nil while unwrapping an Optional value (lldb)

fatal error: unexpectedly found nil while unwrapping an Optional value
(lldb) 

How to make center uitabbar button raised as show in dribble gif

Badge position

I tried adding a badge to the RAMAnimatedTabBarItem and it is offset. Instead of sticking to the right it sticks to the left. Furthermore, it appears BEHIND the icon.

Can I integrate it into my OC project and use it programmatically?

As for my works, I have to do everything programmatically.
I know there is way to configure those attributes on StoryBorad which is simple.
But I prefer do it by coding.

Thank you, Nice project!

need update is for swift 2.1 and xcode 7.1

undefine key

reason: '[<UITabBarItem 0x170149e20> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key animation.'

I implement 5 points exactly as you mention also watch your video not sure where i am wrong.

Badge bug.

When I set the tabbar badge to nil twice in a row the badge appears just red circle without text (number) instead of disappearing.

I fixed it by update the method:

override var badgeValue: String? {
    get {
        return badge?.text
    }
    set(newValue) {

        if newValue == nil {
            badge?.removeFromSuperview()
            badge = nil;
            return
        }

        if badge == nil { // remove => && badge != nil
            badge = RAMBadge.bage()
            if let contanerView = self.iconView!.icon.superview {
                badge!.addBadgeOnView(contanerView)
            }
        }

        badge?.text = newValue
    }
}

Thanks

Pop to root view controller every time tab is clicked ?

please update cocoapod

here is the code
wupengdeAir:iOS-ArtCircle wupeng$ gem source -l
*** CURRENT SOURCES ***

https://rubygems.org/
wupengdeAir:iOS-ArtCircle wupeng$ pod search RAMAnimatedTabBarController

-> RAMAnimatedTabBarController (1.0.1)
RAMAnimatedTabBarController is a Swift module for adding animation to tabbar
items.
pod 'RAMAnimatedTabBarController', '~> 1.0.1'

• Homepage: https://github.com/Ramotion/animated-tab-bar
• Source: https://github.com/Ramotion/animated-tab-bar.git
• Versions: 1.0.1 [master repo]

why cocoapods installs outdated version

pod specs is outdated. How can we update this?

https://github.com/CocoaPods/Specs/blob/master/Specs/RAMAnimatedTabBarController/1.0.1/RAMAnimatedTabBarController.podspec.json

incorrect posizione on scale viewcontroller

when i scale view controller and show modal view. tab bar items changed position

How to use it with Code?

i never use storyboard, i need use it in code,

i try it like this,bug it failed:

    let tabVC = AnimTabVC()

    let tabBar = UITabBar()
    let vc1 = UIViewController()
    vc1.title = "首页"
    let tabbarItem1 = RAMAnimatedTabBarItem()
    tabbarItem1.animation = RAMLeftRotationAnimation()
    tabbarItem1.title = "首页"
    tabbarItem1.image = UIImage(named: "main")
    vc1.tabBarItem = tabbarItem1

    let vc2 = UIViewController()
    let tabbarItem2 = RAMAnimatedTabBarItem()
    tabbarItem2.animation = RAMLeftRotationAnimation()
    tabbarItem2.title = "聊天"
    tabbarItem2.image = UIImage(named: "favorites")
    vc2.tabBarItem = tabbarItem2

    let vc3 = UIViewController()
    let tabbarItem3 = RAMAnimatedTabBarItem()
    tabbarItem3.animation = RAMLeftRotationAnimation()
    tabbarItem3.title = "我的"
    tabbarItem3.image = UIImage(named: "mine")
    vc3.tabBarItem = tabbarItem3
    tabVC.viewControllers = [vc1,vc2,vc3]
    tabBar.items = [tabbarItem1,tabbarItem2,tabbarItem3]

    tabVC.setValue(tabBar, forKey: "tabBar")





    tabVC.tabBar.tintColor = UIColor.redColor()

Multiple errors when used with Xcode 7 beta and Swift 2

Hiding RAMAnimatedTabBarController on click/swipe?

Is there any way to hide/show RAMAnimatedTabBarController (with some animation effect) on UIButton action? I'm desperately trying to do something like that...

Build issues and crash in createViewContainers

Having several issues trying to get RAMAnimatedTabBarController working.

Steps:

1. Created a new Swift project and downloaded the code from github (tried to install the pod, but was told that the RAMAnimatedTabBarControllerpod couldn't be found).
2. Followed the instructions in the Main.storyboard that was created to get everything set up. When I tried to run the app I got the following:

2015-06-19 12:40:40.304 GoalsExperiment1[8598:154387] Unknown class RAMAnimatedTabBarItem in Interface Builder file.
2015-06-19 12:40:40.323 GoalsExperiment1[8598:154387] Unknown class RAMLeftRotationAnimation in Interface Builder file.
2015-06-19 12:40:40.324 GoalsExperiment1[8598:154387] Unknown class RAMAnimatedTabBarItem in Interface Builder file.
2015-06-19 12:40:40.324 GoalsExperiment1[8598:154387] Unknown class RAMBounceAnimation in Interface Builder file.
2015-06-19 12:40:40.324 GoalsExperiment1[8598:154387] Unknown class RAMAnimatedTabBarController in Interface Builder file.
2015-06-19 12:40:40.344 GoalsExperiment1[8598:154387] *** Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[<UITabBarItem 0x7fc24ad45c70> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key animation.'

In order to fix this, I created a new Storyboard file and replicated the setup, however I am now getting another

crash.

It looks like viewDidLoad is being called twice. The first time, tabBar.items has a count of 2 for the 2 tabs that I created, the second time it is nil.

Any help would be appreciated.

RAMAnimatedTabBarController with Swift 2 and Pod

I installed animated-tab-bar using Pod in this way

pod 'RAMAnimatedTabBarController', '~> 1.0'

but RAMAnimatedTabBarController.swift is not the same file that is here
https://github.com/Ramotion/animated-tab-bar/blob/master/RAMAnimatedTabBarController/RAMAnimatedTabBarController.swift

So, I'm having a lot of errors because the downloaded file is not Updated to Swift 2.0 syntax

What I'm doing wrong?

RAMBounceAnimation icon color initialization problem

BounceAnimation/RAMBounceAnimation.swift#L46

is not iconSelectedColor ?

how can i use pure code without xib/storyboard

thanks...

Crash on playRoatationAnimation

if direction == RAMRotationDirection.Left {

unexpectedly found nil while unwrapping an optional value

Issue with icon color

Hi,
I'm having a little issue with the icon's color.
Before a tab bar is selected, its icon's color is wrong.

For example: my TextColor is dark grey, and my TextSelectedColor and IconSelectedColor are white.
Before I select a tab bar it appears with dark grey text (which is correct) and white icon (which is wrong).

Have I configured something wrong? Or is it a bug?
Thanks!

Root View Controller seemingly lost upon tab switch while Modal View is active

I noticed that if I switch tabs while a modal window is up and then return to the tab, the controller behind the modal turns into a complete black screen. I imagine this is not intended behavior?

I was able to implement a fix by closing the modal upon tab switch, which was fine for me, however it's not the most elegant fix as closing a modal upon moving away from it is not a behavior desired by everyone.

Swift official 2.0

Do you have some plans to update to official swift 2.0?