CYLTabBarController

repository·master·Indexed 27 days ago

https://github.com/chenyilong/cyltabbarcontroller

A 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+.

Tokens
3.6K
Snippets
4
Records
15
Agent score
42%

What's inside CYLTabBarController

  1. Overview of CYLTabBarController

    master

    CYLTabBarController 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.
  2. Project Structure

    master

    The 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/: Contains CYLPlusButton subclasses, 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 subclasses
  3. Compare CYLTabBarController with other libraries

    master

    CYLTabBarController 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 UITabBar and UITabBarItem objects rather than custom UIButton or UIView subclasses. 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 CYLPlusButton subclass 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.
  4. Apps using CYLTabBarController

    master

    CYLTabBarController 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.

  5. Ensure Plus Button touch area responsiveness

    master
    The CYLTabBarController ensures that any UIButton within its frame is responsive. If you have a custom icon (like a middle protruding button) that is larger than the standard 49pt height, ensure the UIButton frame itself is large enough to cover the intended touch area. Note that UIImage objects do not respond to touches; only the UIControl (the button) does.
  6. Correctly set ViewController titles

    master
    To avoid incorrect sorting or visual errors in the tab bar, ensure that the UIViewController title is set using navigationItem.title rather than self.title. Using self.title can cause conflicts if it differs from the tabBarItemsAttributes title.
  7. Create a custom Plus Button (Add Button)

    master

    You can create a custom, irregularly shaped plus button by subclassing CYLPlusButton and implementing the CYLPlusButtonSubclassing protocol.

    Steps to Implement:

    1. Subclass CYLPlusButton and implement the CYLPlusButtonSubclassing protocol.
    2. Register the subclass: Call [YourClass registerPlusButton] in your RootViewController's viewDidLoad or in application:didFinishLaunchingWithOptions:. Do not use +load as it may cause crashes on iOS 10.
    3. 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 of 0.5 is centered. Values < 0.5 move it up, > 0.5 move it down.
      • + (CGFloat)constantOfPlusButtonCenterYOffsetForTabBarHeight:(CGFloat)tabBarHeight: Provides a fixed offset. If implemented without multiplierOfTabBarHeight, 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 your PlusButton.

    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]];
  8. Install CYLTabBarController via CocoaPods

    master

    To use CYLTabBarController, install it using CocoaPods.

    1. 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
    2. Initialize Podfile: Run pod init in your project directory.
    3. Add Dependency: Add the following line to your Podfile under your target (use the latest version from the podspec):
      pod 'CYLTabBarController', '~> 1.24.0'
    4. Install: Run pod install or pod update --verbose --no-repo-update to install the library.

    Note: After installation, open the .xcworkspace file instead of the .xcodeproj file.

    pod 'CYLTabBarController', '~> 1.24.0'
  9. Configure CYLTabBarController with View Controllers and Attributes

    master

    To set up the tab bar, you need to provide two arrays: one for the viewControllers and one for the tabBarItemsAttributes.

    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. Supports NSString (image name) or UIImage.
    • CYLTabBarItemSelectedImage: The icon for the selected state. Supports NSString or UIImage.

    Implementation Example

    Subclass CYLTabBarController and 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 : @