[CN]CYLTabBarController【一行代码实现 Lottie 动画 TabBar】iOS27+ Tested

[EN]CYLTabBarController [An animated tabBar supported by Lottie with one line of code]

--------------------------------------------

[CN]阅读须知

[EN]Before Reading

- [CN] mark means Chinese language by default. - [EN] mark means English language. - [CN] 点此获取 QQ 群,Telegram 群交流信息 。 - [EN]Telegram Group to communicate the features or bugs: https://t.me/CYLTabBarController

Preview of latest version

Preview of the latest version on iOS 27+

CYLTabBarController 现已适配iOS27， 新增如下功能：

现在适配iPhone duo，横向布局与竖向布局，请更新 CYLTabBarController 1.99.66查看

CYLTabBarController现已适配iOS 27 和 iPhone Duo，更新内容如下：

✅支持横向布局与竖向布局

✅支持扁平样式与液态玻璃样式

✅所有样式均支持加号➕按钮居中显示。

✅零代码适配：已经接入CYLTabBar液态玻璃样式或扁平样式的代码，无需修改代码，更新版本即可适配iPhone duo。

✅审核友好，适配代码均为纯原生公有api，无审核风险。

请更新 CYLTabBarController 1.99.66查看 https://github.com/ChenYilong/CYLTabBarController 演示如下：

• ✅支持iOS27下，0代码，实现扁平风格样式。 无需新增代码， 即可继续使用UI兼容模式，如果你在iOS27下 保留 UIDesignRequiresCompatibility 字段， CYLTabBarController 将会检测该字段， 如果为True，将切换至UI扁平设计样式。iOS27之前， UIDesignRequiresCompatibi字段， 维持系统逻辑。以此实现0代码，切换到扁平风格样式。
• ✅UI扁平风格作为独立组件集成， 插件化集成， 若仅需液态玻璃效果， 则可实现更低耦合，更小包体积。
• ✅1比1实现系统扁平风格样式，API接口完全与液态玻璃样式共享， 仅需修改样式属性，即可实现样式切换。
• ✅支持液态玻璃样式与扁平设计样式，运行期间切换， 支持AB test， 仅需一行代码，修改 样式属性， 即可实现。支持， 默认扁平样式， 灰度下发，逐渐切换至液态玻璃。
• ✅液态玻璃 继承自UITabBar ， 在支持所有系统样式设置。在此基础上， 实现加号按钮， 灵活性优于系统 TabBar。
• ✅支持Lottie 动画， iOS26和iOS27液态玻璃， 红点角标动画， 同时展示。
• ✅即刻升级至 1.99.41 尝试， iOS27正式版本发布前， 我将至少发布3个版本，用来支持iOS27正式版适配， 如遇到问题请前往 GitHub 提issue， 请勿社交媒体留言。issue为唯一问题反馈途径。

• ✅同时展示 Lottie动画与液态玻璃效果；
• ✅支持将加号➕按钮，展示在液态玻璃效果上，并居中展示。保留 CYLTabBarController 旧版本的所有加号按钮逻辑。仅增加玻璃遮罩效果；
• ✅未使用私有API实现液态玻璃，可通过代码静态扫描，Apple 审核过审安全；
• ✅采用纯原生的液态玻璃效果，支持 iOS 系统设置对液态玻璃属性的全部修改操作；
• ✅企业生产环境级别开源解决方案；
• ✅对于已经集成 CYLTabBarController 的开发者友好，升级适配开发难度， 代码修改低于10行，升级总时长低于1小时；
• ✅不依赖UI兼容模式， iOS27 过审友好；
• ✅不依赖UI兼容模式， 实现扁平风格UI， iOS27 过审友好；
• ✅ GitHub.com/ChenYilong/CYLTabBarController

!Image

!Image !Image !Image !Image !Image 1.99.39 版本， 现已支持 iOS26上 ， APP 运行中， 增加或者删除加号按钮， 效果见下面的演示，即刻访问：https://github.com/ChenYilong/CYLTabBarController Demo 进行尝试：

[CN]谁在用?上架APP列表[EN]who are using? List of App published

APP name link icon | image |APP name link icon | image :-------------:|:-------------:|:-------------:|:-------------: 海底捞 App Store Link !enter image description here | !enter image description here | C家 App Store Link !enter image description here | Lottie 效果 | 淘必中-淘宝推出的一款具有营销购物功能的APP App Store Link !enter image description here | !enter image description here | 慧诊健康 App Store Link !enter image description here|!enter image description here 究竟大学 App Store Link !enter image description here | !enter image description here | 蕉片 - 短视频拍摄剪辑出电影大片 App Store Link !enter image description here| 闪剧 - 可以玩的短视频 App Store Link !enter image description here| !enter image description here | 土狗云商城 App Store Link !enter image description here| Analyst.ai App Store Link !enter image description here| !enter image description here | 美膳校园 App Store Link !enter image description here| !enter image description here 全聚星 App Store Link !enter image description here |!enter image description here | Yesoul App Store Link !enter image description here | !enter image description here 贵州充电通 App Store Link !enter image description here | !enter image description here | 卓尔购 App Store Link !enter image description here | !enter image description here 卓越管家 App Store Link !enter image description here | !enter image description here | 悦守护 App Store Link | 筑集采采购端 App Store Link !enter image description here | | 筑集采供应端 App Store Link !enter image description here | | 桂富宝 App Store Link !enter image description here | !enter image description here | 小猪奔奔 App Store Link !enter image description here | !enter image description here 娃娃坞(开发中) | | 更多APP请访问 《使用 CYLTabBarController 做的 APP，来这里报道下吧》 | 如果你正在使用也请提交到这里 《使用 CYLTabBarController 做的 APP，来这里报道下吧》

[CN]导航

[EN]CONTENTS

• 与其他自定义TabBarController的区别
• 集成后的效果：
• 项目结构
• 使用CYLTabBarController

• 补充说明

• FAQ

与其他自定义TabBarController的区别

Comparetion with other Libraries

[CN]特点

（学习交流群：515295083）

集成后的效果：

支持横竖屏

本仓库配套Demo的效果：| 另一个Demo

项目结构

!https://github.com/ChenYilong

做下说明：

``Objective-C

## 使用CYLTabBarController

四步完成主流App框架搭建：
1.   第一步：使用CocoaPods导入CYLTabBarController  
  2.  第二步：设置CYLTabBarController的两个数组：控制器数组和TabBar属性数组 
  3.  第三步：将CYLTabBarController设置为window的RootViewController 
  4.  第四步（可选）：创建自定义的形状不规则加号按钮
第一步：使用CocoaPods导入CYLTabBarController
1. CocoaPods 安装
  如果您的机器上已经安装了 CocoaPods，直接进入下一步即可。
  如果您的网络已经翻墙，在终端中运行如下命令直接安装：
 

  如果您的网络不能翻墙，可以通过国内 Ruby China 的 RubyGems 镜像进行安装。

  在终端依次运行以下命令：
 

2. 查询 CocoaPods 源中的本库

  在终端中运行以下命令：
 

   这里注意，这个命令搜索的是本机上的最新版本，并没有联网查询。如果运行以上命令，没有搜到或者搜不到最新版本，您可以运行以下命令，更新一下您本地的 CocoaPods 源列表。

 

3. 使用 CocoaPods 导入

  打开终端，进入到您的工程目录，执行以下命令，会自动生成一个 Podfile 文件。
 

  然后使用 CocoaPods 进行安装。如果尚未安装 CocoaPods，运行以下命令进行安装：

  打开 Podfile，在您项目的 target 下加入以下内容。（此处示例可能是旧版本，使用时请替换为最新版，最新版信息可以从这里获取：<a href="https://github.com/ChenYilong/CYLTabBarController/blob/master/CYLTabBarController.podspec"><img src="https://img.shields.io/badge/Pod-GetLatestVersion-green.svg?style=flat"></a>）

  在文件 Podfile 中加入以下内容：

  然后在终端中运行以下命令：

  或者这个命令：

  如果提示找不到库，则可去掉 --no-repo-update。

  完成后1.24.0，CocoaPods 会在您的工程根目录下生成一个 .xcworkspace 文件。您需要通过此文件打开您的工程，而不是之前的 .xcodeproj。

CocoaPods 使用说明
指定 CYLTabBarController 版本
CocoaPods 中，有几种设置 CYLTabBarController 版本的方法。如：
>= 1.n.X 会根据您本地的 CocoaPods 源列表，导入不低于 1.(n+1).X 版本的 CYLTabBarController。

~> 1.n.X 会根据您本地的 CocoaPods 源列表，介于 1.n.X~1.(n+1).0 之前版本的 CYLTabBarController。

建议选择后者：锁定版本，便于团队开发。如：
（此处示例可能是旧版本，使用时请替换为最新版，最新版信息可以从这里获取：<a href="https://github.com/ChenYilong/CYLTabBarController/blob/master/CYLTabBarController.podspec"><img src="https://img.shields.io/badge/Pod-GetLatestVersion-green.svg?style=flat"></a>）

- 升级本地 CocoaPods 源

  CocoaPods 有一个中心化的源，默认本地会缓存 CocoaPods 源服务器上的所有 CYLTabBarController 版本。
如果搜索的时候没有搜到或者搜不到最新版本，可以执行以下命令更新一下本地的缓存。

- 升级工程的 CYLTabBarController 版本

更新您工程目录中 Podfile 指定的 CYLTabBarController 版本后，在终端中执行以下命令。

- 清除 Cocoapods 本地缓存

特殊情况下，由于网络或者别的原因，通过 CocoaPods 下载的文件可能会有问题。
这时候您可以删除 CocoaPods 的缓存(~/Library/Caches/CocoaPods/Pods/Release 目录)，再次导入即可。
- 查看当前使用的 CYLTabBarController 版本
您可以在 Podfile.lock 文件中看到您工程中使用的 CYLTabBarController 版本。
关于 CocoaPods 的更多内容，您可以参考 CocoaPods 文档。
使用 Carthage 导入 CYLTabBarController（可选）
除了 CocoaPods 和 Swift Package Manager，也可以通过 Carthage 集成本库。在 Cartfile 中添加：

然后执行：

构建完成后，将生成的 CYLTabBarController.xcframework 拖入工程，并在 "Frameworks, Libraries, and Embedded Content" 中设置为 Embed & Sign。

> 说明：Carthage 构建的是不含 Lottie 动画相关文件（LottieSwift 目录）的核心功能集，与 CocoaPods 的 Core子规范（subspec）范围一致。
 第二步：设置CYLTabBarController的两个数组：控制器数组和TabBar属性数组

• (instancetype)init {

• (NSArray *)viewControllers {

• (NSArray *)tabBarItemsAttributesForController {

NSArray *tabBarItemsAttributes = @[ firstTabBarItemsAttributes, secondTabBarItemsAttributes, ]; return tabBarItemsAttributes; }

在这个字典中，CYLTabBarItemImage 和 CYLTabBarItemSelectedImage 支持 NSString、UIImage
两种格式。CYLTabBarItemTitle 不设置将只展示图标，并会对布局作出居中处理。

 第三步：将CYLTabBarController设置为window的RootViewController

或者将 CYLTabBarController 的子类设为 RootViewCOntroller ，也可以将CYLTabBarController子类的 NavigationViewController 作为 RootViewCOntroller，方便动态更新，Demo 中就是采用后者。
 第四步（可选）：创建自定义的形状不规则加号按钮
创建一个继承于 CYLPlusButton 的类，要求和步骤：
1. 实现  CYLPlusButtonSubclassing  协议
2. 子类将自身类型进行注册：调用 [YourClass registerPlusButton]，需要在 RootViewCOntroller 的 ViewDidLoad 中注册，也可以在 -application:didFinishLaunchingWithOptions: 方法里面操作。
这里注意，不建议在子类的 +load 方法中调用，比如像下面这样做，在 iOS10 系统上有 Crash 的风险：

协议提供了可选方法：

作用分别是：

用来自定义加号按钮的位置，如果不实现默认居中，但是如果 tabbar 的个数是奇数则必须实现该方法，否则 CYLTabBarController 会抛出 exception 来进行提示。

主要适用于如下情景：
<p align="center"><a href="https://mp.weixin.qq.com/s/A4e5h3xgIEh6PInf1Rjqsw"><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g92nics1hvj30a906u3ym.jpg"></a></p>
Airbnb-app效果：
<p align="center"><a href="https://mp.weixin.qq.com/s/A4e5h3xgIEh6PInf1Rjqsw"><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g92nir57tmg308w0fsapi.gif"></a></p>

该方法是为了调整自定义按钮中心点Y轴方向的位置，建议在按钮超出了 tabbar 的边界时实现该方法。返回值是自定义按钮中心点Y轴方向的坐标除以 tabbar 的高度，如果不实现，会自动进行比对，预设一个较为合适的位置，如果实现了该方法，预设的逻辑将失效。

内部实现时，会使用该返回值来设置 PlusButton 的 centerY 坐标，公式如下：
              
PlusButtonCenterY = multiplierOfTabBarHeight * taBarHeight + constantOfPlusButtonCenterYOffset;
也就是说：如果 constantOfPlusButtonCenterYOffset 为0，同时 multiplierOfTabBarHeight 的值是0.5，表示 PlusButton 居中，小于0.5表示 PlusButton 偏上，大于0.5则表示偏下。

参考 +multiplierOfTabBarHeight: 中的公式：

PlusButtonCenterY = multiplierOfTabBarHeight * taBarHeight + constantOfPlusButtonCenterYOffset;
也就是说： constantOfPlusButtonCenterYOffset 大于0会向下偏移，小于0会向上偏移。
注意：实现了该方法，但没有实现 +multiplierOfTabBarHeight: 方法，在这种情况下，会在预设逻辑的基础上进行偏移。
详见Demo中的 CYLPlusButtonSubclass 类的实现。

详见： 点击 PlusButton 跳转到指定 UIViewController

另外，如果加号按钮超出了边界，一般需要手动调用如下代码取消 tabbar 顶部默认的阴影，可在 AppDelegate 类中调用：

// iOS10 后 需要使用 -[CYLTabBarController hideTabBarShadowImageView] 见 AppDelegate 类中的演示;

如何调整、自定义 PlusButton 与其它 TabBarItem 的宽度？
CYLTabBarController 规定：

所以想自定义宽度，只需要修改 PlusButton 的宽度即可。

比如你就可以在 Demo中的 CYLPlusButtonSubclass.m 类里：
   
把

改为

效果如下，
1.24.0

<p align="center"><a href="https://mp.weixin.qq.com/s/A4e5h3xgIEh6PInf1Rjqsw"><img src="https://tva1.sinaimg.cn/large/006y8mN6ly1g6ur17yxa3j30yi0c6abk.jpg"></a></p>
同时你也可以顺便测试下 CYLTabBarController 的这一个特性：
> 即使加号按钮超出了tabbar的区域，超出部分依然能响应点击事件
并且你可以在项目中的任意位置读取到 PlusButton 的宽度，借助 CYLTabBarController.h 定义的 CYLPlusButtonWidth 这个extern。可参考 +[CYLTabBarControllerConfig customizeTabBarAppearance:] 里的用法。
补充说明
自定义 TabBar 样式
如果想更进一步的自定义 TabBar 样式可在 -application:didFinishLaunchingWithOptions: 方法中设置

• (void)customizeInterface {

- (BOOL)application:(UIApplication )application didFinishLaunchingWithOptions:(NSDictionary )launchOptions { / 省略部分： / [self.window makeKeyAndVisible]; [self customizeInterface]; return YES; }

####  捕获 TabBar 点击事件

实现 CYLTabBarController 的如下几个代理方法即可捕获点击事件。 
  
  下面这个方法能捕获当前点击的 TabBar 上的控件，可以是 UITabBarButton、也可以 PlusButton、也可以是添加到 TabBar 上的任意 UIControl 的子类。但是如果 PlusButton 也添加了点击事件，那么点击 PlusButton 将不会被触发这个代理方法。

@protocol CYLTabBarControllerDelegate

/*! * @param tabBarController The tab bar controller containing viewController. * @param control Selected UIControl in TabBar. * @attention If PlusButton also add an action, then this delegate method will not be invoked when the PlusButton is selected. */

• (void)tabBarController:(UITabBarController )tabBarController didSelectControl:(UIControl )control;

下面这个方法能捕获跳转前所在的控制器，以及跳转到的目标控制器。

注意：在调用该方法时应该始终调用
    [[self cyl_tabBarController] updateSelectionStatusIfNeededForTabBarController:tabBarController shouldSelectViewController:viewController]; 来确保 PlusButton 的选中状态。示例如下：

相关用法已经在 Demo 中展示。
遵循协议的方式如下：

###  点击 TabBarButton 时添加动画
Demo 演示的效果图：
<p align="center"><a href="https://mp.weixin.qq.com/s/A4e5h3xgIEh6PInf1Rjqsw"><img src="https://ww1.sinaimg.cn/large/006tNbRwly1fg9hu6qnwbg308v0gctcc.gif"></a></p>
实现如下代理方法，就能得到对应的选中控件，可以在控件上直接添加动画。

Demo 中示例代码如下：
遵循协议

### 横竖屏适配

TabBar 横竖屏适配时，如果你添加了 PlusButton，且适配时用到了 TabBarItem 的宽度, 不建议使用系统的UIDeviceOrientationDidChangeNotification , 请使用库里的 CYLTabBarItemWidthDidChangeNotification 来更新 TabBar 布局，最典型的场景就是，根据 TabBarItem 在不同横竖屏状态下的宽度变化来切换选中的TabBarItem 的背景图片。Demo 里 CYLTabBarControllerConfig.m 给出了这一场景的用法:
CYLTabBarController.h  中提供了 CYLTabBarItemWidth 这一extern常量，并且会在 TabBarItem 的宽度发生变化时，及时更新该值，所以用法就如下所示：