- GitHub 源码: CYLTabBarController
- Star: 6.1k
【中国特色 TabBar】一行代码实现 Lottie 动画 TabBar,支持中心带 + 号的 TabBar 样式,自带红点角标,支持动态革新。【iOS13 & Dark Mode & iPhone XS MAX supported】。
前言
起首:不光仅是一行代码!
官方声称的 "一行代码实现 Lottie 动画 TabBar" 着实有虚晃一枪的怀疑,让你听起来误以为用一行代码就可以实现淘宝「闲鱼」那种既带 ➕ 号按钮又带 Lottie 动画的 TabBar 了。着实折腾下来照旧要写个几百行代码的。正确的形貌应该是:集成 CYLTabBarController 之后,再导入所需的 JSON 文件(该文件用于形貌 TabBar 的 Lottie 动画),并添加一行代码,即可让 TabBar 实现 Lottie 动画。
因此,所谓的 "一行代码实现 Lottie 动画”,着实就是设置方法里面再加一个 key 值为 CYLTabBarLottieURL 的属性,它的值是一个 NSURL 链接,指向你项目中形貌 Lottie 动画的 JSON 文件。你照旧必要本身提前准备好 Lottie 的 JSON 文件的,以是说,所谓的一行代码就是,当涉及到 Lottie 动画时,你给体系传一个带 Lottie 动画的 URL 文件(既然“一行代码”是这个意思的话,我是不是可以说一行代码实现一个全套 Google 搜刮引擎功能呢?打开一个 google.com 的 HTML 5 页面不就实现了嘛)。
别的,一望见 CYLTabBarController 这个框架是国人写的,而且 README 文档是中文的,真的是喜极而泣?,让我误以为花个 5 分钟便可以从入门到醒目,终极折腾了好几天,下载了好几个 Demo 才算弄明白。
鉴于官方 README.md 文档的“暗昧不清”,与配套 Demo 写法上也存在很大的收支,照旧让一开始初入相识该框架的同砚造成了很大的困扰。
接下来,我会通过实现一个模仿「闲鱼」TabBar 动画的 Demo 来让各人重新相识它。
开始利用
准备:新建 Xcode 项目
在 Xcode 11 情况下新建一个 Single View App 项目,打开这个新的项目,可以看到体系除了会自动天生 AppDelegate 文件外,还会自动天生一个名为 SceneDelegate 的类文件。
⚠️ SceneDelegate 是 iOS 13 下的新特性,检察 WWDC 2019: Optimizing App Launch 可以知道这到底是啥,但是 CYLTabBarController 还未适配该特性(截止 1.28.3 版本),基于 SceneDelegate 集成该框架应用会瓦解!以是我们要先把 SceneDelegate 特性删除才行。
步调:
- 起首打开 Info.plist 文件,找到下面这两个属性并删除。
- 删除 SceneDelegate 类文件,着实可删可不删,但既然我们用不到就删了吧。
- 修改 AppDelegate.h 文件,加上 UIWindow 属性。
#import <UIKit/UIKit.h>@interface AppDelegate : UIResponder <UIApplicationDelegate>@property (strong, nonatomic) UIWindow * window;@end
- 修改 AppDelegate.m 文件,设置 UIWindow 设置主窗口,并删除多余的 <UISceneSession> 署理协议。
#import "AppDelegate.h"#import "ViewController.h"@interface AppDelegate ()@end@implementation AppDelegate- (BOOL)applicationUIApplication *)application didFinishLaunchingWithOptionsNSDictionary *)launchOptions { self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; // 设置根视图控制器 ViewController *controller = [[ViewController alloc] init]; // 窗口根视图控制器 self.window.rootViewController = controller; self.window.backgroundColor = [UIColor whiteColor]; [self.window makeKeyAndVisible]; return YES;}// 下面多余的代码请删除@end运行项目,无报错则继承往下。
第一步:利用 CocoaPods 导入 CYLTabBarController
可以很本心的说,README.md 文档中在 第一步利用 CocoaPods 导入 CYLTabBarController 一章算是形貌地最详尽的了,它居然还教你怎样安装 CocoaPods,堪比 CocoaPods 情况搭建教程了。
但是,有一点必要提示的是,安装 CocoaPods 请勿利用 sudo gem install cocoapods 这个下令,如果运行该下令提示存在权限题目:
# 错误示例$ sudo gem install cocoapodsPassword:Fetching cocoapods-1.8.4.gemFetching cocoapods-core-1.8.4.gemSuccessfully installed cocoapods-core-1.8.4ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the /usr/bin directory.# Mac OS 体系升级之后,体系把 /usr/bin 目次的写入权限禁用了,因此我们必要指定安装到别的目次下。# 正确示例,必要安装 cocoapods 到指定目次下$ sudo gem install cocoapods -n /usr/local/binSuccessfully installed cocoapods-1.8.4Parsing documentation for cocoapods-1.8.4Installing ri documentation for cocoapods-1.8.4Done installing documentation for cocoapods after 2 seconds1 gem installed别的,Podfile 示例文件如下:
# Uncomment the next line to define a global platform for your projectplatform :ios, '9.0'target 'CYLTabBarControllerDemo' do # Comment the next line if you don't want to use dynamic frameworks # use_frameworks! # Pods for CYLTabBarControllerDemo pod 'CYLTabBarController', '~> 1.28.3' # 默认不依赖Lottie pod 'CYLTabBarController/Lottie', '~> 1.28.1' # 依赖Lottie库 pod 'ChameleonFramework' # 颜色框架 pod 'YYKit' # 会用到几个辅助方法end第二步:新建 AppDelegate 分类文件,初始化并设置 CYLTabBarController
如果你检察 CYLTabBarController 框架的 README.md 文档,作者会让你把许多设置方法写在 AppDelegate 这个类中。
但现实应用场景中,有许多设置方法都要写在这个文件里面,比如日志框架的设置、推送关照框架、第三方付出回调设置...另有一大堆工具类设置。
以是我风俗上会把差异的设置文件单独写在各自的分类(Category)中。
具体缘故原由可以去看看《Effective Objective-C 2.0 编写高质量 iOS 与 OS X 代码的 52 个有效方法 》一书中的第 24 条发起。
因此,我们必要新建一个 AppDelegate 分类文件,然后把全部与初始化 CYLTabBarController 框架相干的代码都写在 AppDelegate+CYLTabBar 文件里面,保持代码整洁,方便修改。
- 新建一个 AppDelegate 分类文件。
点击 Xcode 导航栏 — File — New — File...— 选择 iOS Source 列表下的「Objective-C File」,新建文件范例和文件名如下:
- 在 Assets.xcassets 资产库中导入你所必要的图片文件。
- 在分类中新建一个方法,用于设置主窗口:
#import "AppDelegate.h"NS_ASSUME_NONNULL_BEGIN/// 这是 AppDelegate 的分类,用于设置 CYLTabBarController@interface AppDelegate (CYLTabBar)/// 设置主窗口- (void)hql_configureForTabBarController;@endNS_ASSUME_NONNULL_END然后我们在 .m 文件中实现它,设置 CYLTabBarController 的两个数组:控制器数组和设置 tabBar 外观样式的属性数组:
@implementation AppDelegate (CYLTabBar)#pragma mark - Public- (void)hql_configureForTabBarController { // 设置主窗口,并设置根视图控制器 self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; self.window.backgroundColor = [UIColor whiteColor]; [self.window makeKeyAndVisible]; // 初始化 CYLTabBarController 对象 CYLTabBarController *tabBarController = [CYLTabBarController tabBarControllerWithViewControllers:[self viewControllers] tabBarItemsAttributes:[self tabBarItemsAttributes]]; // 设置服从委托协议 tabBarController.delegate = self; // 将 CYLTabBarController 设置为 window 的 RootViewController self.window.rootViewController = tabBarController;}#pragma mark - Private/// 控制器数组- (NSArray *)viewControllers { // 首页 HomeViewController *homeVC = [[HomeViewController alloc] init]; homeVC.navigationItem.title = @"首页"; CYLBaseNavigationController *homeNC = [[CYLBaseNavigationController alloc] initWithRootViewController:homeVC]; [homeNC cyl_setHideNavigationBarSeparator:YES]; // 同城 MyCityViewController *myCityVC = [[MyCityViewController alloc] init]; myCityVC.navigationItem.title = @"同城"; CYLBaseNavigationController *myCityNC = [[CYLBaseNavigationController alloc] initWithRootViewController:myCityVC]; [myCityNC cyl_setHideNavigationBarSeparator:YES]; // 消息 MessageViewController *messageVC = [[MessageViewController alloc] init]; messageVC.navigationItem.title = @"消息"; CYLBaseNavigationController *messageNC = [[CYLBaseNavigationController alloc] initWithRootViewController:messageVC]; [messageNC cyl_setHideNavigationBarSeparator:YES]; // 我的 AccountViewController *accountVC = [[AccountViewController alloc] init]; accountVC.navigationItem.title = @"我的"; CYLBaseNavigationController *accountNC = [[CYLBaseNavigationController alloc] initWithRootViewController:accountVC]; [accountNC cyl_setHideNavigationBarSeparator:YES]; NSArray *viewControllersArray = @[homeNC, myCityNC, messageNC, accountNC]; return viewControllersArray;}/// tabBar 属性数组- (NSArray *)tabBarItemsAttributes { NSDictionary *homeTabBarItemsAttributes = @{ CYLTabBarItemTitle: @"首页", CYLTabBarItemImage: @"home_normal", CYLTabBarItemSelectedImage: @"home_highlight", }; NSDictionary *myCityTabBarItemsAttributes = @{ CYLTabBarItemTitle: @"同城", CYLTabBarItemImage: @"mycity_normal", CYLTabBarItemSelectedImage: @"mycity_highlight", }; NSDictionary *messageTabBarItemsAttributes = @{ CYLTabBarItemTitle: @"消息", CYLTabBarItemImage: @"message_normal", CYLTabBarItemSelectedImage: @"message_highlight", }; NSDictionary *accountTabBarItemsAttributes = @{ CYLTabBarItemTitle: @"我的", CYLTabBarItemImage: @"account_normal", CYLTabBarItemSelectedImage: @"account_highlight", }; NSArray *tabBarItemsAttributes = @[ homeTabBarItemsAttributes, myCityTabBarItemsAttributes, messageTabBarItemsAttributes, accountTabBarItemsAttributes ]; return tabBarItemsAttributes;}@end
- 末了,我们回到 AppDelegate.m 文件,导入上一步新建的分类头文件 :
#import "AppDelegate+CYLTabBar.h"#import "AppDelegate.h"#import "AppDelegate+CYLTabBar.h" // 导入的分类文件@implementation AppDelegate- (BOOL)applicationUIApplication *)application didFinishLaunchingWithOptionsNSDictionary *)launchOptions { // 调用分类文件中的设置主窗口方法: [self hql_configureForTabBarController]; return YES;}@end
- 至此,常见的带 4 个 TabBarItem 的应用框架就搭建好啦:
小结:将 CYLTabBarController 实例化为窗口的根视图控制器即可。
第三步:添加不规则加号按钮
创建一个继承自 CYLPlusButton 的子类对象 CYLPlusButtonSubclass。
CYLPlusButtonSubclass.h 声明服从 <CYLPlusButtonSubclassing> 协议
#import "CYLPlusButton.h"NS_ASSUME_NONNULL_BEGIN@interface CYLPlusButtonSubclass : CYLPlusButton <CYLPlusButtonSubclassing>@endNS_ASSUME_NONNULL_ENDCYLPlusButtonSubclass.m 中实现创建按钮的方法和服从的协议方法
#import "CYLPlusButtonSubclass.h"@implementation CYLPlusButtonSubclass#pragma mark - Lifecycle- (instancetype)initWithFrameCGRect)frame { if (self = [super initWithFrame:frame]) { self.titleLabel.textAlignment = NSTextAlignmentCenter; self.adjustsImageWhenHighlighted = NO; } return self;}//上下布局的 button- (void)layoutSubviews { [super layoutSubviews]; // 控件巨细,间距巨细 // 注意:肯定要根据项目中的图片去调解下面的0.7和0.9,Demo之以是这么设置,由于demo中的 plusButton 的 icon 不是正方形。 CGFloat const imageViewEdgeWidth = self.bounds.size.width * 0.7; CGFloat const imageViewEdgeHeight = imageViewEdgeWidth; CGFloat const centerOfView = self.bounds.size.width * 0.5; CGFloat const labelLineHeight = self.titleLabel.font.lineHeight; CGFloat const verticalMargin = (self.bounds.size.height - labelLineHeight - imageViewEdgeHeight) * 0.5; // imageView 和 titleLabel 中心的 Y 值 CGFloat const centerOfImageView = verticalMargin + imageViewEdgeHeight * 0.5; CGFloat const centerOfTitleLabel = imageViewEdgeHeight + verticalMargin * 2 + labelLineHeight * 0.5 - 1; //imageView position 位置 self.imageView.bounds = CGRectMake(0, 0, imageViewEdgeWidth, imageViewEdgeHeight); self.imageView.center = CGPointMake(centerOfView, centerOfImageView); //title position 位置 self.titleLabel.bounds = CGRectMake(0, 0, self.bounds.size.width, labelLineHeight); self.titleLabel.center = CGPointMake(centerOfView, centerOfTitleLabel);}#pragma mark - IBActions- (void)clickPublish { // 如果按钮的作用是触发点击变乱,则调用此方法}#pragma mark - CYLPlusButtonSubclassing+ (id)plusButton { CYLPlusButtonSubclass *button = [CYLPlusButtonSubclass buttonWithType:UIButtonTypeCustom]; // 图片尺寸:56*56、67*66、49*48(凸出 15) UIImage *normalButtonImage = [UIImage imageNamed"post_normal"]; UIImage *hlightButtonImage = [UIImage imageNamed"post_highlight"]; [button setImage:normalButtonImage forState:UIControlStateNormal]; [button setImage:hlightButtonImage forState:UIControlStateHighlighted]; [button setImage:hlightButtonImage forState:UIControlStateSelected]; // 设置配景图片// UIImage *normalButtonBackImage = [UIImage imageNamed"tabBar_post_back"];// [button setBackgroundImage:normalButtonBackImage forState:UIControlStateNormal];// [button setBackgroundImage:normalButtonBackImage forState:UIControlStateSelected]; // 按钮图片间隔上边距增长 5,即向下偏移,按钮图片间隔下边距淘汰 5,即向下偏移。 //button.imageEdgeInsets = UIEdgeInsetsMake(5, 0, -5, 0); [button setTitle"发布" forState:UIControlStateNormal]; [button setTitleColor:[UIColor grayColor] forState:UIControlStateNormal]; button.titleLabel.font = [UIFont systemFontOfSize:10 weight:UIFontWeightBold]; [button sizeToFit]; // or set frame in this way `button.frame = CGRectMake(0.0, 0.0, 250, 100);` //自界说宽度 button.frame = CGRectMake(0.0, 0.0, 59, 59); // button.backgroundColor = [UIColor redColor]; // if you use `+plusChildViewController` , do not addTarget to plusButton. // [button addTarget:button actionselector(clickPublish) forControlEvents:UIControlEventTouchUpInside]; return button;}// 用来自界说加号按钮的位置,如果不实现默认居中。+ (NSUInteger)indexOfPlusButtonInTabBar { return 2;}// 实现该方法后,能让 PlusButton 的点击结果与跟点击其他 TabBar 按钮结果一样,跳转到该方法指定的 UIViewController+ (UIViewController *)plusChildViewController { UIViewController *v = [[UIViewController alloc] init]; return v;}// 该方法是为了调解 PlusButton 中心点Y轴方向的位置,发起在按钮超出了 tabbar 的边界时实现该方法。// 返回值是自界说按钮中心点 Y 轴方向的坐标除以 tabbar 的高度,小于 0.5 表现 PlusButton 偏上,大于 0.5 则表现偏下。// PlusButtonCenterY = multiplierOfTabBarHeight * tabBarHeight + constantOfPlusButtonCenterYOffset;+ (CGFloat)multiplierOfTabBarHeightCGFloat)tabBarHeight { return 0.3;}// constantOfPlusButtonCenterYOffset 大于 0 会向下偏移,小于 0 会向上偏移。+ (CGFloat)constantOfPlusButtonCenterYOffsetForTabBarHeightCGFloat)tabBarHeight { return (CYL_IS_IPHONE_X ? - 6 : 4);}@end在 AppDelegate+CYLTabBar.m 中注册该按钮
在初始化 CYLTabBarController 对象步调之前注册按钮:
- (void)hql_configureForTabBarController { // 设置主窗口,并设置根视图控制器 self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; self.window.backgroundColor = [UIColor whiteColor]; [self.window makeKeyAndVisible]; // ??? 注册加号按钮 [CYLPlusButtonSubclass registerPlusButton]; // 初始化 CYLTabBarController 对象 CYLTabBarController *tabBarController = [CYLTabBarController tabBarControllerWithViewControllers:[self viewControllers] tabBarItemsAttributes:[self tabBarItemsAttributes]]; // 设置服从委托协议 tabBarController.delegate = self; self.window.rootViewController = tabBarController;}自此,加号按钮也添加完成啦。
第四步:设置自界说 TabBar 样式
自界说 TabBar 字体、配景、阴影。
在 AppDelegate+CYLTabBar.m 文件中新增一个方法,用于设置 TabBar 样式:
/// 自界说 TabBar 字体、配景、阴影- (void)customizeTabBarInterface { // 设置笔墨属性 if (@available(iOS 10.0, *)) { [self cyl_tabBarController].tabBar.unselectedItemTintColor = [UIColor cyl_systemGrayColor]; [self cyl_tabBarController].tabBar.tintColor = [UIColor cyl_labelColor]; } else { UITabBarItem *tabBar = [UITabBarItem appearance]; // 平常状态下的笔墨属性 [tabBar setTitleTextAttributes{NSForegroundColorAttributeName: [UIColor cyl_systemGrayColor]} forState:UIControlStateNormal]; // 选中状态下的笔墨属性 [tabBar setTitleTextAttributes{NSForegroundColorAttributeName: [UIColor cyl_labelColor]} forState:UIControlStateSelected]; } // 设置 TabBar 配景颜色:白色 // ?[UIImage imageWithColor] 表现根据指定颜色天生图片,该方法来自 <YYKit> 框架 [[UITabBar appearance] setBackgroundImage:[UIImage imageWithColor:[UIColor whiteColor]]]; // 去除 TabBar 自带的顶部阴影 [[self cyl_tabBarController] hideTabBarShadowImageView]; // 设置 TabBar 阴影,无效 // [[UITabBar appearance] setShadowImage:[UIImage imageNamed"tabBar_background_shadow"]]; // 设置 TabBar 阴影 CYLTabBarController *tabBarController = [self cyl_tabBarController]; tabBarController.tabBar.layer.shadowColor = [UIColor blackColor].CGColor; tabBarController.tabBar.layer.shadowRadius = 15.0; tabBarController.tabBar.layer.shadowOpacity = 0.2; tabBarController.tabBar.layer.shadowOffset = CGSizeMake(0, 3); tabBarController.tabBar.layer.masksToBounds = NO; tabBarController.tabBar.clipsToBounds = NO;}然后在该文件的设置方法中调用:
- (void)hql_configureForTabBarController { // 设置主窗口,并设置根视图控制器 self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; self.window.backgroundColor = [UIColor whiteColor]; [self.window makeKeyAndVisible]; // 注册加号按钮 [CYLPlusButtonSubclass registerPlusButton]; // 初始化 CYLTabBarController 对象 CYLTabBarController *tabBarController = [CYLTabBarController tabBarControllerWithViewControllers:[self viewControllers] tabBarItemsAttributes:[self tabBarItemsAttributes]]; // 设置服从委托协议 tabBarController.delegate = self; self.window.rootViewController = tabBarController; // ??? 自界说 TabBar 字体、配景、阴影 [self customizeTabBarInterface];}别的,不规则加号按钮的配景图片必要在 CYLPlusButtonSubclass.m 文件的 + (id)plusButton 中设置:
// 设置配景图片UIImage *normalButtonBackImage = [UIImage imageNamed"tabBar_post_back"];[button setBackgroundImage:normalButtonBackImage forState:UIControlStateNormal];[button setBackgroundImage:normalButtonBackImage forState:UIControlStateSelected];下面是自界说后的 TabBar 样式示例:
第五步:添加点击旋转动画
当点击 TabBarItem 时,为它设置旋转动画,必要让 AppDelegate 服从 <CYLTabBarControllerDelegate, UITabBarControllerDelegate> 委托协议,以监听点击触发变乱:
// ??? 声明服从委托协议@interface AppDelegate () <CYLTabBarControllerDelegate, UITabBarControllerDelegate>@end@implementation AppDelegate (CYLTabBar)- (void)hql_configureForTabBarController { // 省略... // 初始化 CYLTabBarController 对象 CYLTabBarController *tabBarController = [CYLTabBarController tabBarControllerWithViewControllers:[self viewControllers] tabBarItemsAttributes:[self tabBarItemsAttributes]]; // ??? 设置让 AppDelegate 服从委托协议 tabBarController.delegate = self; self.window.rootViewController = tabBarController;}接下来是让 AppDelegate 实现委托协议方法,点击 TabBarItem 时触发旋转动画,点不规则加号按钮时触发放大动画:
- (BOOL)tabBarControllerUITabBarController *)tabBarController shouldSelectViewControllerUIViewController *)viewController { // 确保 PlusButton 的选中状态 [[self cyl_tabBarController] updateSelectionStatusIfNeededForTabBarController:tabBarController shouldSelectViewController:viewController]; return YES;}- (void)tabBarControllerUITabBarController *)tabBarController didSelectControl:(UIControl *)control { UIView *animationView; NSLog(@"?\n 类名与方法名:%@,\n 第 %@ 行,\n description : %@,\n tabBarChildViewControllerIndex: %@, tabBarItemVisibleIndex : %@", @(__PRETTY_FUNCTION__), @(__LINE__), control, @(control.cyl_tabBarChildViewControllerIndex), @(control.cyl_tabBarItemVisibleIndex)); // 纵然 PlusButton 也添加了点击变乱,点击 PlusButton 后也会触发该署理方法。 if ([control cyl_isPlusButton]) { UIButton *button = CYLExternPlusButton; animationView = button.imageView; // 为加号按钮添加「缩放动画」 [self addScaleAnimationOnView:animationView repeatCount:1]; } else if ([control isKindOfClass:NSClassFromString(@"UITabBarButton")]) { for (UIView *subView in control.subviews) { if ([subView isKindOfClass:NSClassFromString(@"UITabBarSwappableImageView")]) { animationView = subView; // 为其他按钮添加「旋转动画」 [self addRotateAnimationOnView:animationView]; } } }}/// 缩放动画- (void)addScaleAnimationOnView:(UIView *)animationView repeatCount:(float)repeatCount { //必要实现的帧动画,这里根据需求自界说 CAKeyframeAnimation *animation = [CAKeyframeAnimation animation]; animation.keyPath = @"transform.scale"; animation.values = @[@1.0,@1.3,@0.9,@1.15,@0.95,@1.02,@1.0]; animation.duration = 0.5; animation.repeatCount = repeatCount; animation.calculationMode = kCAAnimationCubic; [animationView.layer addAnimation:animation forKey:nil];}/// 旋转动画- (void)addRotateAnimationOnView:(UIView *)animationView { [UIView animateWithDuration:0.32 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{ animationView.layer.transform = CATransform3DMakeRotation(M_PI, 0, 1, 0); } completion:nil]; dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ [UIView animateWithDuration:0.70 delay:0 usingSpringWithDamping:1 initialSpringVelocity:0.2 options:UIViewAnimationOptionCurveEaseOut animations:^{ animationView.layer.transform = CATransform3DMakeRotation(2 * M_PI, 0, 1, 0); } completion:nil]; });}实现结果:
第六步:添加 Lottie 动画
参考:https://github.com/ChenYilong/CYLTabBarController/issues/341
起首,为方便演示,我们从官方 Demo 中获取 Lottie 动画的 JSON 文件和相干资源文件。
然后,修改设置 tabBar 属性数组的方法 - (NSArray *)tabBarItemsAttributes,把 Lottie 文件的 URL 路径加上:
/* * tabBar 属性数组,带 Loggie 动画 * 参考:<https://github.com/ChenYilong/CYLTabBarController/issues/341> * * 与上面的设置相比,必要再多设置两个属性: * CYLTabBarLottieURL: 传入 lottie 动画 JSON 文件地点路径 * CYLTabBarLottieSize: LottieView 巨细,选填 * */- (NSArray *)tabBarItemsAttributes { NSDictionary *homeTabBarItemsAttributes = @{ CYLTabBarItemTitle: @"首页", CYLTabBarLottieURL : [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource"tab_home_animate" ofType:@"json"]], CYLTabBarLottieSize: [NSValue valueWithCGSize:CGSizeMake(33, 33)], }; NSDictionary *myCityTabBarItemsAttributes = @{ CYLTabBarItemTitle: @"同城", CYLTabBarLottieURL : [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"tab_search_animate" ofType:@"json"]], CYLTabBarLottieSize: [NSValue valueWithCGSize:CGSizeMake(33, 33)], }; NSDictionary *messageTabBarItemsAttributes = @{ CYLTabBarItemTitle: @"消息", CYLTabBarLottieURL : [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"tab_message_animate" ofType:@"json"]], CYLTabBarLottieSize: [NSValue valueWithCGSize:CGSizeMake(33, 33)], }; NSDictionary *accountTabBarItemsAttributes = @{ CYLTabBarItemTitle: @"我的", CYLTabBarLottieURL : [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"tab_me_animate" ofType:@"json"]], CYLTabBarLottieSize: [NSValue valueWithCGSize:CGSizeMake(33, 33)], }; NSArray *tabBarItemsAttributes = @[ homeTabBarItemsAttributes, myCityTabBarItemsAttributes, messageTabBarItemsAttributes, accountTabBarItemsAttributes ]; return tabBarItemsAttributes;}自此,我们通过 CYLTabBarController 框架实现了一个仿「闲鱼」TabBar 动画的应用。
Demo:HQLTableViewDemo
原文链接:https://www.jianshu.com/p/50735aa8a9f2 |