CYLTabBarController
repository·master·Indexed 27 days ago
https://github.com/chenyilong/cyltabbarcontrollerA Swift-compatible iOS library for implementing highly animated TabBars. It supports Lottie animations and native liquid glass effects without using private APIs. Key features include support for custom irregularly shaped plus buttons via the CYLPlusButtonSubclassing protocol, native UITabBar and UITabBarItem integration, and compatibility with iOS 12.0+.
What's inside CYLTabBarController
- CYLTabBarController-Swift is the Swift implementation of the popular CYLTabBarController framework. It provides an animated TabBar that supports Lottie animations, allowing developers to implement complex, high-quality tab bar animations with minimal code.
Overview of CYLTabBarController
masterCYLTabBarController is an iOS library that provides an animated TabBar supporting Lottie animations with minimal code. It is designed for high-quality UI, featuring liquid glass effects and Lottie animation support.
Key features in version 1.99.39 and above:
- Simultaneous display of Lottie animations and liquid glass effects.
- Support for a centered '+' (plus) button overlaying the liquid glass effect.
- Uses pure native implementations for liquid glass effects (no private APIs), ensuring safety for Apple App Store reviews.
- Supports system-wide modifications to liquid glass attributes via iOS settings.
- Compatible with iOS 12.0+ (tested on iOS 26+).
- Designed for easy upgrades: existing integrations can typically upgrade with fewer than 10 lines of code changes.
Project Structure
masterThe repository is organized as follows:
CYLTabBarController/: The core library folder. If you are not using CocoaPods, drag this folder directly into your project.Example/: A demonstration project.Example/Classes/Module/: Contains module classes (e.g., Home, Message, Mine).Example/Classes/View/: ContainsCYLPlusButtonsubclasses, demonstrating how to create custom, irregularly shaped PlusButtons.
├── CYLTabBarController # Core library folder └── Example └── Classes ├── Module # Module class folder │ ├── Home │ ├── Message │ ├── Mine │ └── SameCity └── View # Custom CYLPlusButton subclassesCompare CYLTabBarController with other libraries
masterCYLTabBarController offers several advantages for iOS developers:
- Lottie Animation Support: Implement animated TabBar styles using Lottie with minimal code.
- Loose Coupling: The library is independent of business logic. It only requires two arrays (controllers and properties) to set up the framework.
- Native System Components: Uses native
UITabBarandUITabBarItemobjects rather than customUIButtonorUIViewsubclasses. This ensures consistent push/pop transition animations and allows the use of standard system APIs like[UITabBar appearance]and[UITabBarItem appearance]. - Automatic PlusButton Detection: Automatically detects if a custom
CYLPlusButtonsubclass is provided and adjusts the TabBar item layout accordingly (e.g., supporting both standard WeChat-style and irregular Weibo-style layouts). - Robust Interaction: Even if a custom PlusButton extends beyond the standard TabBar area, the extended area remains responsive to touch events.
- Advanced Layout Support: Supports custom TabBar heights, icon-only TabBarItems with vertical centering, custom badge views, and nested TabBars with specific PlusButton positioning.
Apps using CYLTabBarController
masterCYLTabBarController is used in various published iOS applications, including:
- Haidilao (海底捞)
- C Family (C家)
- Taobimiddle (淘必中)
- Huizhen Health (慧诊健康)
- Jiujing University (究竟大学)
- Jiaopian (蕉片)
- Shanjv (闪剧)
- Tugou Mall (土狗云商城)
- Analyst.ai
- Meizhan Campus (美膳校园)
- Quanju Xing (全聚星)
- Yesoul
- Guizhou Charging (贵州充电通)
- Zhuoer Buy (卓尔购)
- Zhuoyue Manager (卓越管家)
- Yue Shuhou (悦守护)
- Zhujicai Procurement End (筑集采采购端)
- Zhujicai Supply End (筑集采供应端)
- Guifubao (桂富宝)
- Xiaozhu Benben (小猪奔奔)
If you are using this library in your app, you can report it in the GitHub Issues section.
Ensure Plus Button touch area responsiveness
masterTheCYLTabBarControllerensures that anyUIButtonwithin its frame is responsive. If you have a custom icon (like a middle protruding button) that is larger than the standard 49pt height, ensure theUIButtonframe itself is large enough to cover the intended touch area. Note thatUIImageobjects do not respond to touches; only theUIControl(the button) does.Correctly set ViewController titles
masterTo avoid incorrect sorting or visual errors in the tab bar, ensure that theUIViewControllertitle is set usingnavigationItem.titlerather thanself.title. Usingself.titlecan cause conflicts if it differs from thetabBarItemsAttributestitle.Create a custom Plus Button (Add Button)
masterYou can create a custom, irregularly shaped plus button by subclassing
CYLPlusButtonand implementing theCYLPlusButtonSubclassingprotocol.Steps to Implement:
- Subclass
CYLPlusButtonand implement theCYLPlusButtonSubclassingprotocol. - Register the subclass: Call
[YourClass registerPlusButton]in yourRootViewController'sviewDidLoador inapplication:didFinishLaunchingWithOptions:. Do not use+loadas it may cause crashes on iOS 10. - Implement Optional Protocol Methods:
+ (NSUInteger)indexOfPlusButtonInTabBar: Defines the position of the plus button. If the number of tab items is odd, this method must be implemented to avoid an exception.+ (CGFloat)multiplierOfTabBarHeight:(CGFloat)tabBarHeight: Adjusts the Y-axis center of the button. A value of0.5is centered. Values< 0.5move it up,> 0.5move it down.+ (CGFloat)constantOfPlusButtonCenterYOffsetForTabBarHeight:(CGFloat)tabBarHeight: Provides a fixed offset. If implemented withoutmultiplierOfTabBarHeight, it applies an offset to the default position.+ (UIViewController *)plusChildViewController: Returns the view controller to present when the plus button is tapped.+ (BOOL)shouldSelectPlusChildViewController: Determines if the plus button should trigger a selection.
Customizing Width
The width of other
TabBarItems is automatically calculated as:TabBarItem Width = (Total TabBar Width - PlusButton Width) / (Number of TabBarItems)To change the width of the items, simply change the frame/size of yourPlusButton.Removing Tab Bar Shadow
If your custom button extends beyond the tab bar boundary, you may need to hide the default shadow:
// For iOS 10+ [self hideTabBarShadowImageView]; // Alternative approach [[UITabBar appearance] setShadowImage:[[UIImage alloc] init]];- Subclass
Install CYLTabBarController via CocoaPods
masterTo use
CYLTabBarController, install it using CocoaPods.- Install CocoaPods (if not already installed):
- Standard:
sudo gem install cocoapods - Using Ruby China mirror:
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/ sudo gem install cocoapods
- Standard:
- Initialize Podfile: Run
pod initin your project directory. - Add Dependency: Add the following line to your
Podfileunder your target (use the latest version from the podspec):pod 'CYLTabBarController', '~> 1.24.0' - Install: Run
pod installorpod update --verbose --no-repo-updateto install the library.
Note: After installation, open the
.xcworkspacefile instead of the.xcodeprojfile.pod 'CYLTabBarController', '~> 1.24.0'- Install CocoaPods (if not already installed):
Configure CYLTabBarController with View Controllers and Attributes
masterTo set up the tab bar, you need to provide two arrays: one for the
viewControllersand one for thetabBarItemsAttributes.Tab Bar Item Attributes
Each item in the attributes array is a dictionary containing:
CYLTabBarItemTitle: The title of the item. If omitted, only the icon is displayed and it will be centered.CYLTabBarItemImage: The icon for the normal state. SupportsNSString(image name) orUIImage.CYLTabBarItemSelectedImage: The icon for the selected state. SupportsNSStringorUIImage.
Implementation Example
Subclass
CYLTabBarControllerand override the necessary methods to provide your controllers and attributes.// Example implementation in Objective-C @interface MainTabBarController : CYLTabBarController @end @implementation MainTabBarController - (instancetype)init { if (!(self = [super init])) { return nil; } UIEdgeInsets imageInsets = UIEdgeInsetsZero; UIOffset titlePositionAdjustment = UIOffsetMake(0, -3.5); CYLTabBarController *tabBarController = [CYLTabBarController tabBarControllerWithViewControllers:self.viewControllers tabBarItemsAttributes:self.tabBarItemsAttributesForController imageInsets:imageInsets titlePositionAdjustment:titlePositionAdjustment context:nil ]; [self customizeTabBarAppearance:tabBarController]; return (self = (MainTabBarController *)tabBarController; } - (NSArray *)viewControllers { CYLHomeViewController *firstViewController = [[CYLHomeViewController alloc] init]; UIViewController *firstNavigationController = [[CYLBaseNavigationController alloc] initWithRootViewController:firstViewController]; CYLSameCityViewController *secondViewController = [[CYLSameCityViewController alloc] init]; UIViewController *secondNavigationController = [[CYLBaseNavigationController alloc] initWithRootViewController:secondViewController]; return @[firstNavigationController, secondNavigationController]; } - (NSArray *)tabBarItemsAttributesForController { NSDictionary *firstTabBarItemsAttributes = @{ CYLTabBarItemTitle : @"首页", CYLTabBarItemImage : @Register the Plus Button safely
masterWhen registering the plus button, you must call[YourClass registerPlusButton]inside theapplication:didFinishLaunchingWithOptions:method of your AppDelegate. Do not call it inside a+loadmethod, as this can cause crashes on iOS 10.Fix black edges on pop transitions
masterIf you encounter black edges when using-[UIViewController cyl_popSelectTabBarChildViewControllerAtIndex:]on older iOS versions, you can mitigate this by setting therootWindowbackground color to white in yourAppDelegate.