Convert Figma logo to code with AI

Ramotion logoanimated-tab-bar

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

11,123
1,328
11,123
16

Top Related Projects

SlideUp is a small library that allows you to add sweet slide effect to any view.

(Deprecated) A custom view component that mimics the new Material Design Bottom Navigation pattern.

This Library helps users to use Bottom Navigation Bar (A new pattern from google) with ease and allows ton of customizations

A library to reproduce the behavior of the Bottom Navigation guidelines from Material Design.

An android lib for enhancing BottomNavigationView. 一个增强BottomNavigationView的安卓库。

An bottom navigation bar for Android

Quick Overview

The Ramotion/animated-tab-bar repository is a Swift library that provides a customizable and animated tab bar for iOS applications. It offers a visually appealing and interactive user interface for navigating between different views in an iOS app.

Pros

  • Customizable Appearance: The library allows developers to easily customize the appearance of the tab bar, including the size, color, and animation style.
  • Smooth Animations: The tab bar animations are smooth and fluid, providing a polished and engaging user experience.
  • Flexible Integration: The library can be easily integrated into existing iOS projects, with minimal setup required.
  • Active Development: The project is actively maintained, with regular updates and bug fixes.

Cons

  • Swift-only: The library is written in Swift, which may limit its use in projects that rely on Objective-C.
  • Limited Customization: While the library offers a good degree of customization, some developers may require more advanced or specific customization options.
  • Dependency on External Libraries: The library depends on the RBBAnimation library, which may add an additional dependency to the project.
  • Potential Performance Impact: Depending on the complexity of the animations and the number of tabs, the library may have a slight performance impact on the app.

Code Examples

Here are a few examples of how to use the Ramotion/animated-tab-bar library:

  1. Creating a Tab Bar Controller:
let tabBarController = AnimatedTabBarController()
tabBarController.viewControllers = [firstViewController, secondViewController, thirdViewController]
  1. Customizing the Tab Bar Appearance:
let tabBarItem1 = TabBarItemInfo(title: "Home", image: UIImage(named: "home_icon"))
let tabBarItem2 = TabBarItemInfo(title: "Search", image: UIImage(named: "search_icon"))

tabBarController.tabBarHeight = 80
tabBarController.tabBarItemInfos = [tabBarItem1, tabBarItem2]
tabBarController.tabBarItemSelectedColor = .red
tabBarController.tabBarItemUnselectedColor = .gray
  1. Handling Tab Bar Item Selection:
tabBarController.didSelectTabBarItem = { (index) in
    print("Selected tab bar item at index: \(index)")
}
  1. Animating the Tab Bar:
tabBarController.animationOptions = .scale
tabBarController.animationDuration = 0.3

Getting Started

To get started with the Ramotion/animated-tab-bar library, follow these steps:

  1. Add the library to your project using a dependency manager like CocoaPods or Carthage.

  2. Import the library in your Swift file:

import AnimatedTabBar
  1. Create an instance of the AnimatedTabBarController and set the view controllers for each tab:
let tabBarController = AnimatedTabBarController()
tabBarController.viewControllers = [firstViewController, secondViewController, thirdViewController]
  1. Customize the tab bar appearance and behavior as needed:
tabBarController.tabBarHeight = 80
tabBarController.tabBarItemInfos = [tabBarItem1, tabBarItem2]
tabBarController.tabBarItemSelectedColor = .red
tabBarController.tabBarItemUnselectedColor = .gray
tabBarController.animationOptions = .scale
tabBarController.animationDuration = 0.3
  1. Set the tabBarController as the root view controller of your application:
window?.rootViewController = tabBarController

That's it! You should now have a customized and animated tab bar in your iOS application.

Competitor Comparisons

SlideUp is a small library that allows you to add sweet slide effect to any view.

Pros of SlideUp-Android

  • Focuses on a specific sliding panel functionality, making it easier to implement for this particular use case
  • Provides more customization options for the sliding behavior, such as slide direction and touch area
  • Smaller library size, potentially reducing app bloat

Cons of SlideUp-Android

  • Limited to sliding panel functionality, whereas animated-tab-bar offers a wider range of animation options
  • Less active development and community support compared to animated-tab-bar
  • May require more manual setup for complex UI interactions

Code Comparison

SlideUp-Android implementation:

SlideUp(slideView)
    .withStartGravity(Gravity.BOTTOM)
    .withLoggingEnabled(true)
    .withStartState(SlideUp.State.HIDDEN)
    .withSlideFromOtherView(otherView)
    .build()

animated-tab-bar implementation:

let tabBar = RAMAnimatedTabBarController()
tabBar.viewControllers = [firstViewController, secondViewController]
tabBar.animation = RAMBounceAnimation()

Both libraries offer straightforward implementation, but SlideUp-Android provides more granular control over the sliding behavior, while animated-tab-bar focuses on pre-defined tab bar animations.

(Deprecated) A custom view component that mimics the new Material Design Bottom Navigation pattern.

Pros of BottomBar

  • More customizable with extensive configuration options
  • Supports badges and notifications out of the box
  • Better documentation and examples for easier implementation

Cons of BottomBar

  • Less visually appealing animations compared to animated-tab-bar
  • Slightly more complex setup process
  • Limited to bottom bar positioning, less flexible for alternative layouts

Code Comparison

animated-tab-bar:

let tabBarController = RAMAnimatedTabBarController()
tabBarController.viewControllers = [firstViewController, secondViewController]

BottomBar:

val bottomBar = BottomBar.attach(this, savedInstanceState)
bottomBar.setItems(R.xml.bottombar_menu)
bottomBar.setOnMenuTabClickListener { /* Handle tab click */ }

Both libraries offer straightforward implementation, but BottomBar provides more granular control over tab behavior and appearance. animated-tab-bar focuses on pre-built animations, while BottomBar emphasizes customization and additional features like badges.

BottomBar is better suited for projects requiring extensive customization and additional functionality, while animated-tab-bar excels in providing visually appealing, pre-designed animations with minimal setup.

This Library helps users to use Bottom Navigation Bar (A new pattern from google) with ease and allows ton of customizations

Pros of BottomNavigation

  • More customizable with extensive configuration options
  • Supports both fixed and shifting modes out of the box
  • Better adherence to Material Design guidelines

Cons of BottomNavigation

  • Less visually appealing animations compared to animated-tab-bar
  • Slightly more complex setup process
  • Limited to bottom navigation, while animated-tab-bar can be used for top bars as well

Code Comparison

BottomNavigation setup:

val bottomNavigation = findViewById<BottomNavigationView>(R.id.bottom_navigation)
bottomNavigation.setOnNavigationItemSelectedListener { item ->
    when(item.itemId) {
        R.id.action_home -> // Handle home action
        R.id.action_search -> // Handle search action
        // ...
    }
    true
}

animated-tab-bar setup:

let tabBar = RAMAnimatedTabBarController()
tabBar.viewControllers = [firstViewController, secondViewController]
tabBar.animation = RAMBounceAnimation()

Both libraries offer easy-to-implement bottom navigation solutions, but BottomNavigation provides more customization options and adheres more closely to Material Design guidelines. animated-tab-bar, on the other hand, offers more visually appealing animations and can be used for both top and bottom bars. The choice between the two depends on specific project requirements and design preferences.

A library to reproduce the behavior of the Bottom Navigation guidelines from Material Design.

Pros of ahbottomnavigation

  • More customizable with extensive configuration options
  • Supports badges and notifications out of the box
  • Better adherence to Material Design guidelines

Cons of ahbottomnavigation

  • Less visually appealing animations compared to animated-tab-bar
  • Slightly more complex implementation due to additional features
  • Limited to bottom navigation, while animated-tab-bar can be used in other positions

Code Comparison

animated-tab-bar:

let tabBarController = RAMAnimatedTabBarController()
tabBarController.viewControllers = [firstViewController, secondViewController]

ahbottomnavigation:

val bottomNavigation = AHBottomNavigation(this)
bottomNavigation.addItem(AHBottomNavigationItem("Item 1", R.drawable.ic_item1, R.color.color_item1))
bottomNavigation.addItem(AHBottomNavigationItem("Item 2", R.drawable.ic_item2, R.color.color_item2))

Both libraries offer simple implementation, but ahbottomnavigation requires more explicit configuration for each item. animated-tab-bar focuses on animation and simplicity, while ahbottomnavigation provides more control over individual elements and features.

An android lib for enhancing BottomNavigationView. 一个增强BottomNavigationView的安卓库。

Pros of BottomNavigationViewEx

  • Built on top of the official Android BottomNavigationView, ensuring compatibility and adherence to Material Design guidelines
  • Offers more customization options, including badge support and dynamic item changes
  • Provides better support for ViewPager integration

Cons of BottomNavigationViewEx

  • Less visually appealing animations compared to animated-tab-bar
  • Limited to Android platform, while animated-tab-bar is for iOS
  • Requires more setup and configuration to achieve advanced customizations

Code Comparison

animated-tab-bar (Swift):

let tabBar = RAMAnimatedTabBarController()
tabBar.viewControllers = [firstViewController, secondViewController]

BottomNavigationViewEx (Kotlin):

val bottomNavView = findViewById<BottomNavigationViewEx>(R.id.bottom_nav_view)
bottomNavView.enableAnimation(false)
bottomNavView.enableShiftingMode(false)
bottomNavView.enableItemShiftingMode(false)

Both libraries aim to enhance the functionality of tab bars or bottom navigation views in mobile applications. animated-tab-bar focuses on providing visually appealing animations for iOS apps, while BottomNavigationViewEx extends the capabilities of Android's native BottomNavigationView with additional customization options and features.

BottomNavigationViewEx offers more flexibility in terms of item management and ViewPager integration, making it suitable for complex Android applications. However, it may require more setup and configuration compared to the simpler implementation of animated-tab-bar.

Ultimately, the choice between these libraries depends on the target platform (iOS vs. Android) and the specific requirements of the project, such as the need for advanced customization or animated effects.

An bottom navigation bar for Android

Pros of PagerBottomTabStrip

  • More customizable with various built-in styles and animations
  • Supports ViewPager integration out of the box
  • Written in Java, which may be preferred by some Android developers

Cons of PagerBottomTabStrip

  • Less visually appealing default animations compared to animated-tab-bar
  • Limited to Android platform, while animated-tab-bar is for iOS
  • May require more setup and configuration to achieve desired look

Code Comparison

PagerBottomTabStrip:

BottomTabLayout bottomTabLayout = findViewById(R.id.bottomTabLayout);
bottomTabLayout.setTabItems(
    new TabItem(R.drawable.ic_home, R.drawable.ic_home_selected, "Home"),
    new TabItem(R.drawable.ic_search, R.drawable.ic_search_selected, "Search"),
    new TabItem(R.drawable.ic_notifications, R.drawable.ic_notifications_selected, "Notifications"),
    new TabItem(R.drawable.ic_person, R.drawable.ic_person_selected, "Profile")
);

animated-tab-bar:

let tabBar = RAMAnimatedTabBarController()
let homeItem = RAMAnimatedTabBarItem(title: "Home", image: UIImage(named: "Home"), tag: 1)
homeItem.animation = RAMBounceAnimation()
tabBar.viewControllers = [homeViewController]
tabBar.animatedItems = [homeItem]

Both libraries offer easy-to-use APIs for creating animated tab bars, but PagerBottomTabStrip provides more built-in customization options, while animated-tab-bar focuses on sleek, pre-designed animations. The choice between them largely depends on the target platform (Android vs iOS) and the desired level of customization.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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:


CocoaPods CocoaPods Carthage compatible Swift 4.0 Twitter Travis Donate

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
  1. 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  
  }
  1. 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.