Top Related Projects
A highly customizable drop-in replacement for UISegmentedControl.
:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion
:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion
Animated side menu with customizable UI
You can easily add awesome animated context menu to your app.
Quick Overview
FoldingTabBar.iOS is a custom tab bar control for iOS applications that provides a unique folding animation effect. It offers a visually appealing alternative to the standard UITabBar, allowing developers to create engaging and interactive tab bar interfaces with customizable icons and colors.
Pros
- Visually appealing folding animation effect
- Highly customizable appearance and behavior
- Easy integration with existing iOS projects
- Written in Swift, supporting modern iOS development
Cons
- Limited documentation and examples
- May not be suitable for apps requiring standard tab bar functionality
- Potential performance impact on older devices due to animations
- Not actively maintained (last update was several years ago)
Code Examples
- Creating a FoldingTabBar instance:
let tabBar = YALFoldingTabBar()
tabBar.delegate = self
tabBar.dataSource = self
view.addSubview(tabBar)
- Implementing the data source methods:
func numberOfItems(inTabBar tabBar: YALFoldingTabBar) -> UInt {
return 5
}
func tabBar(_ tabBar: YALFoldingTabBar, itemAt index: UInt) -> YALTabBarItem {
let item = YALTabBarItem(itemImage: UIImage(named: "icon\(index)"),
leftItemImage: nil,
rightItemImage: nil)
return item
}
- Handling tab bar selection:
func tabBar(_ tabBar: YALFoldingTabBar, didSelectItemAt index: UInt) {
print("Selected item at index: \(index)")
// Handle tab selection
}
Getting Started
- Install FoldingTabBar.iOS using CocoaPods:
pod 'FoldingTabBar'
- Import the module in your Swift file:
import FoldingTabBar
- Create and configure a FoldingTabBar instance:
let tabBar = YALFoldingTabBar()
tabBar.delegate = self
tabBar.dataSource = self
view.addSubview(tabBar)
// Implement YALFoldingTabBarDataSource and YALFoldingTabBarDelegate protocols
- Customize the appearance and behavior as needed:
tabBar.backgroundColor = .white
tabBar.selectedColor = .blue
tabBar.tabBarColor = .lightGray
Competitor Comparisons
A highly customizable drop-in replacement for UISegmentedControl.
Pros of HMSegmentedControl
- More customizable appearance with options for text attributes, background colors, and selection indicators
- Supports both text and images for segment content
- Lighter weight and focused solely on segmented control functionality
Cons of HMSegmentedControl
- Lacks the unique folding animation effect of FoldingTabBar.iOS
- Does not include a built-in tab bar controller for managing multiple view controllers
Code Comparison
HMSegmentedControl:
let segmentedControl = HMSegmentedControl(sectionTitles: ["One", "Two", "Three"])
segmentedControl.frame = CGRect(x: 10, y: 10, width: 300, height: 60)
segmentedControl.addTarget(self, action: #selector(segmentedControlChangedValue(_:)), for: .valueChanged)
view.addSubview(segmentedControl)
FoldingTabBar.iOS:
let tabBarController = YALFoldingTabBarController()
tabBarController.viewControllers = [firstViewController, secondViewController]
tabBarController.leftBarItems = [YALTabBarItem(itemImage: UIImage(named: "nearby_icon"), leftItemImage: nil)]
tabBarController.rightBarItems = [YALTabBarItem(itemImage: UIImage(named: "profile_icon"), leftItemImage: nil)]
HMSegmentedControl offers a more traditional segmented control with extensive customization options, while FoldingTabBar.iOS provides a unique folding animation and built-in tab bar controller functionality. The choice between the two depends on the specific design requirements and desired user experience for your iOS application.
:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion
Pros of folding-cell
- More versatile: Can be used for various UI elements, not just tab bars
- Smoother animations and transitions
- Actively maintained with recent updates
Cons of folding-cell
- More complex implementation
- Steeper learning curve for developers
- May require more customization for specific use cases
Code Comparison
FoldingTabBar.iOS:
let tabBarController = YALFoldingTabBarController()
tabBarController.viewControllers = [firstViewController, secondViewController]
tabBarController.leftBarItems = [firstItem, secondItem]
tabBarController.rightBarItems = [thirdItem, fourthItem]
folding-cell:
let cell = FoldingCell()
cell.itemCount = 2
cell.delegate = self
cell.foregroundView = customView
cell.containerView = containerView
The FoldingTabBar.iOS code focuses on setting up a tab bar controller with specific view controllers and items, while the folding-cell code is more centered around configuring individual cells with custom views and content.
FoldingTabBar.iOS is specifically designed for creating folding tab bars, making it easier to implement this particular UI element. On the other hand, folding-cell offers more flexibility for creating various folding UI components, but may require more setup and customization for specific use cases.
:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion
Pros of animated-tab-bar
- More customization options for animations and appearance
- Supports both Swift and Objective-C
- Actively maintained with recent updates
Cons of animated-tab-bar
- Slightly more complex implementation
- Larger file size due to additional features
Code Comparison
FoldingTabBar.iOS:
let tabBarController = YALFoldingTabBarController()
tabBarController.viewControllers = [firstViewController, secondViewController]
tabBarController.leftBarItems = [firstItem, secondItem]
tabBarController.rightBarItems = [thirdItem, fourthItem]
animated-tab-bar:
let tabBar = RAMAnimatedTabBarController()
tabBar.viewControllers = [firstViewController, secondViewController]
let item1 = RAMAnimatedTabBarItem(title: "First", image: UIImage(named: "first"), selectedImage: nil)
item1.animation = RAMBounceAnimation()
tabBar.setViewControllers([item1, item2], animated: true)
Both libraries provide custom tab bar implementations for iOS applications. FoldingTabBar.iOS offers a unique folding animation, while animated-tab-bar provides a wider range of animation options. animated-tab-bar is more actively maintained and supports both Swift and Objective-C, making it more versatile for different projects. However, it has a slightly more complex implementation and a larger file size due to its additional features. FoldingTabBar.iOS may be simpler to implement for basic use cases but has fewer customization options. The code comparison shows that both libraries require similar setup, with animated-tab-bar offering more granular control over individual tab item animations.
Animated side menu with customizable UI
Pros of Side-Menu.iOS
- More versatile and customizable UI component
- Supports both left and right side menus
- Easier to integrate with existing navigation patterns
Cons of Side-Menu.iOS
- Potentially more complex to implement and customize
- May require more code to set up and configure
- Less unique visual design compared to FoldingTabBar.iOS
Code Comparison
Side-Menu.iOS:
let menuLeftNavigationController = UISideMenuNavigationController(rootViewController: YourViewController)
SideMenuManager.default.leftMenuNavigationController = menuLeftNavigationController
SideMenuManager.default.addPanGestureToPresent(toView: self.navigationController!.navigationBar)
SideMenuManager.default.addScreenEdgePanGesturesToPresent(toView: self.navigationController!.view)
FoldingTabBar.iOS:
let tabBarController = YALFoldingTabBarController()
tabBarController.viewControllers = [firstViewController, secondViewController]
tabBarController.leftBarItems = [firstItem, secondItem]
tabBarController.rightBarItems = [thirdItem, fourthItem]
self.window?.rootViewController = tabBarController
Both repositories offer unique UI components for iOS applications. Side-Menu.iOS provides a more traditional and widely-used navigation pattern, while FoldingTabBar.iOS offers a visually striking and innovative tabbar design. The choice between the two depends on the specific needs of your app and the desired user experience.
You can easily add awesome animated context menu to your app.
Pros of Context-Menu.iOS
- More versatile UI component, suitable for various app sections
- Offers a wider range of customization options
- Provides a more modern and visually appealing animation
Cons of Context-Menu.iOS
- Potentially more complex to implement and customize
- May require more screen space to display effectively
- Could be less intuitive for users accustomed to traditional tab bars
Code Comparison
FoldingTabBar.iOS:
let tabBarController = YALFoldingTabBarController()
tabBarController.viewControllers = [firstViewController, secondViewController]
tabBarController.leftBarItems = [firstItem, secondItem]
tabBarController.rightBarItems = [thirdItem, fourthItem]
Context-Menu.iOS:
let menuController = ContextMenuController()
menuController.dataSource = self
menuController.delegate = self
menuController.settings = ContextMenuSettings()
view.addSubview(menuController.view)
Both libraries offer unique UI components for iOS applications. FoldingTabBar.iOS provides a customizable tab bar with a folding animation, while Context-Menu.iOS offers a versatile context menu with various animation options. The choice between the two depends on the specific needs of your app and the desired user experience. FoldingTabBar.iOS may be more suitable for apps with a traditional tab-based navigation structure, while Context-Menu.iOS can be used in various scenarios where contextual actions are needed.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
FoldingTabBar.iOS
Folding Tab Bar and Tab Bar Controller
Inspired by this project on Dribbble
Also, read how it was done in our blog
Requirements
iOS 7.0
Installation
CocoaPods
pod 'FoldingTabBar', '~> 1.2.1'
Carthage
github "Yalantis/FoldingTabBar.iOS" ~> 1.2.1
Manual Installation
Alternatively you can directly add all the source files from FoldingTabBar folder to your project.
- Download the latest code version or add the repository as a git submodule to your git-tracked project.
- Open your project in Xcode, then drag and drop all the folder directories in FoldingTabBar folder onto your project (use the "Product Navigator view"). Make sure to select Copy items when asked if you extracted the code archive outside of your project.
Introduction
YALFoldingTabBarController
YALFoldingTabBarController
is a subclass of UITabBarController
with custom animating YALFoldingTabBar
.
YALFoldingTabBar
YALFoldingTabBar is a subclass of a standard UIView. We wanted to make this component expand and contract in response to a user tapping. When the component is closed you can only see a central button (â+â). When tapping on it, our custom Tab Bar expands letting other tabBarItems appear, so that the user can switch the controllers.
Each separate tabBarItem can have two additional buttons on the left and right. These buttons can be used to let a user interact with a selected screen on the YALFoldingTabBarController without even having to leave it.
YALTabBarItem
YALTabBarItem
is a model to configure your tab bar items with images.
Usage
Option 1: The simplest way is to use YALFoldingTabBarController
as it is. You can also subclass it if you indend to change the default behaviour.
Option 2: You can write your own implementation of UITabBarController
and use YALFoldingTabBar
or its subclass.
Here is an instruction of how to use YALFoldingTabBarController
in the Storyboard.
- Add native
UITabBarController
to the storyboard, establish relationships with its view controllers. - Choose
YALFoldingTabBarController
as custom class forUITabBarController
. - Choose
YALCustomHeightTabBar
as custom class forUITabBar
insideYALFoldingTabBarController
- In AppDelegate method take out an instance of
YALFoldingTabBarController
from the window.rootViewController and supply it with images for the left and right tabBarItems respectively. Also you can add your own image for the center button ofYALFoldingTabBar
.
Objective-C
YALFoldingTabBarController *tabBarController = (YALFoldingTabBarController *) self.window.rootViewController;
//prepare leftBarItems
YALTabBarItem *item1 = [[YALTabBarItem alloc] initWithItemImage:[UIImage imageNamed:@"nearby_icon"]
leftItemImage:nil
rightItemImage:nil];
YALTabBarItem *item2 = [[YALTabBarItem alloc] initWithItemImage:[UIImage imageNamed:@"profile_icon"]
leftItemImage:[UIImage imageNamed:@"edit_icon"]
rightItemImage:nil];
tabBarController.leftBarItems = @[item1, item2];
//prepare rightBarItems
YALTabBarItem *item3 = [[YALTabBarItem alloc] initWithItemImage:[UIImage imageNamed:@"chats_icon"]
leftItemImage:[UIImage imageNamed:@"search_icon"]
rightItemImage:[UIImage imageNamed:@"new_chat_icon"]];
YALTabBarItem *item4 = [[YALTabBarItem alloc] initWithItemImage:[UIImage imageNamed:@"settings_icon"]
leftItemImage:nil
rightItemImage:nil];
tabBarController.rightBarItems = @[item3, item4];
Swift
if let tabBarController = window?.rootViewController as? YALFoldingTabBarController {
//leftBarItems
let firstItem = YALTabBarItem(
itemImage: UIImage(named: "nearby_icon")!,
leftItemImage: nil,
rightItemImage: nil
)
let secondItem = YALTabBarItem(
itemImage: UIImage(named: "profile_icon")!,
leftItemImage: UIImage(named: "edit_icon")!,
rightItemImage: nil
)
tabBarController.leftBarItems = [firstItem, secondItem]
//rightBarItems
let thirdItem = YALTabBarItem(
itemImage: UIImage(named: "chats_icon")!,
leftItemImage: UIImage(named: "search_icon")!,
rightItemImage: UIImage(named: "new_chat_icon")!
)
let forthItem = YALTabBarItem(
itemImage: UIImage(named: "settings_icon")!,
leftItemImage: nil,
rightItemImage: nil
)
tabBarController.rightBarItems = [thirdItem, forthItem]
}
If you want to handle touches on extra tabBarItems import YALTabBarDelegate
protocol to the subclass of the proper UIVIewController
and implement these methods:
##Objective-C
- (void)tabBarDidSelectExtraLeftItem:(YALFoldingTabBar *)tabBar;
- (void)tabBarDidSelectExtraRightItem:(YALFoldingTabBar *)tabBar;
Swift
func tabBarDidSelectExtraLeftItem(tabBar: YALFoldingTabBar!)
func tabBarDidSelectExtraRightItem(tabBar: YALFoldingTabBar!)
If you want to handle touches on tabBarItems by indexes import YALTabBarDelegate
protocol to the subclass of the proper UIVIewController
and implement these methods:
Objective-C
- (void)tabBar:(YALFoldingTabBar *)tabBar didSelectItemAtIndex:(NSUInteger)index;
- (BOOL)tabBar:(YALFoldingTabBar *)tabBar shouldSelectItemAtIndex:(NSUInteger)index;
Swift
func tabBar(tabBar: YALFoldingTabBar!, didSelectItemAtIndex index: UInt)
func tabBar(tabBar: YALFoldingTabBar!, shouldSelectItemAtIndex index: UInt) -> Bool
If you want to observe contracting and expanding animation states in YALFoldingTabBar
the following methods of YALTabBarDelegate
protocol can be implemented:
Objective-C
- (void)tabBarWillCollapse:(YALFoldingTabBar *)tabBar;
- (void)tabBarWillExpand:(YALFoldingTabBar *)tabBar;
- (void)tabBarDidCollapse:(YALFoldingTabBar *)tabBar;
- (void)tabBarDidExpand:(YALFoldingTabBar *)tabBar;
Swift
func tabBarWillCollapse(tabBar: YALFoldingTabBar!)
func tabBarWillExpand(tabBar: YALFoldingTabBar!)
func tabBarDidCollapse(tabBar: YALFoldingTabBar!)
func tabBarDidExpand(tabBar: YALFoldingTabBar!)
Important notes
Because we changed the height of the default UITabBar
you should adjust your content to the bottom of viewcontroller's superview, and ignore Bottom Layout Guide. You should also uncheck 'Under bottom bars'
You can see how we did it on the example project.
Tips for customization
You can make the following configurations for custom tabBar:
- Specify height
Objective-C
tabBarController.tabBarViewHeight = YALTabBarViewDefaultHeight;
Swift
tabBarController.tabBarViewHeight = YALTabBarViewDefaultHeight
- Specify insets and offsets
Objective-C
tabBarController.tabBarView.tabBarViewEdgeInsets = YALTabBarViewHDefaultEdgeInsets;
tabBarController.tabBarView.tabBarItemsEdgeInsets = YALTabBarViewItemsDefaultEdgeInsets;
tabBarController.tabBarView.offsetForExtraTabBarItems = YALForExtraTabBarItemsDefaultOffset;
Swift
tabBarController.tabBarView.tabBarViewEdgeInsets = YALTabBarViewHDefaultEdgeInsets
tabBarController.tabBarView.tabBarItemsEdgeInsets = YALTabBarViewItemsDefaultEdgeInsets
tabBarController.tabBarView.offsetForExtraTabBarItems = YALForExtraTabBarItemsDefaultOffset
- Specify colors
Objective-C
tabBarController.tabBarView.backgroundColor = [UIColor colorWithRed:94.0/255.0 green:91.0/255.0 blue:149.0/255.0 alpha:1];
tabBarController.tabBarView.tabBarColor = [UIColor colorWithRed:72.0/255.0 green:211.0/255.0 blue:178.0/255.0 alpha:1];
tabBarController.tabBarView.dotColor = [UIColor colorWithRed:94.0/255.0 green:91.0/255.0 blue:149.0/255.0 alpha:1];
Swift
tabBarController.tabBarView.backgroundColor = UIColor(
red: 94.0/255.0,
green: 91.0/255.0,
blue: 149.0/255.0,
alpha: 1
)
tabBarController.tabBarView.tabBarColor = UIColor(
red: 72.0/255.0,
green: 211.0/255.0,
blue: 178.0/255.0,
alpha: 1
)
tabBarController.tabBarView.dotColor = UIColor(
red: 94.0/255.0,
green: 91.0/255.0,
blue: 149.0/255.0,
alpha: 1
)
- Specify height for additional left and right buttons
Objective-C
tabBarController.tabBarView.extraTabBarItemHeight = YALExtraTabBarItemsDefaultHeight;
Swift
tabBarController.tabBarView.extraTabBarItemHeight = YALExtraTabBarItemsDefaultHeight
Let us know!
Weâd be really happy if you sent us links to your projects where you use our component. Just send an email to github@yalantis.com And do let us know if you have any questions or suggestion regarding the animation.
P.S. Weâre going to publish more awesomeness wrapped in code and a tutorial on how to make UI for iOS (Android) better than better. Stay tuned!
License
The MIT License (MIT)
Copyright © 2017 Yalantis
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.
Top Related Projects
A highly customizable drop-in replacement for UISegmentedControl.
:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion
:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion
Animated side menu with customizable UI
You can easily add awesome animated context menu to your app.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot