 
[](https://twitter.com/stevechen1010)[](http://weibo.com/luohanchenyilong) [](https://gitter.im/ChenYilong/CYLTabBarController?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
- 与其他自定义TabBarController的区别
- 集成后的效果
- 项目结构
- 使用CYLTabBarController
- 第一步：使用CocoaPods导入CYLTabBarController
- 第二步：设置CYLTabBarController的两个数组：控制器数组和TabBar属性数组
- 第三步：将CYLTabBarController设置为window的RootViewController
- 第四步（可选）：创建自定义的形状不规则加号按钮
- 补充说明
- 自定义 TabBar 样式
- 横竖屏适配
- 访问初始化好的 CYLTabBarController 对象
- 点击 PlusButton 跳转到指定 UIViewController
- 让TabBarItem仅显示图标，并使图标垂直居中
- 在 Swift 项目中使用 CYLTabBarController
- 源码实现原理
- Q-A
| - | 特点 | 解释 |
|---|---|---|
| 1 | 低耦合，易删除 | 1、TabBar设置与业务完全分离，最低只需传两个数组即可完成主流App框架搭建。 2、 PlusButton 的所有设置都在单独的一个类（ CYLPlusButton 的子类）中实现：删除该特定的类，就能完全将 PlusButton 从项目中删除掉。 |
| 2 | TabBar 以及 TabBar 内的 TabBarItem 均使用系统原生的控件 |
因为使用原生的控件，并非 UIButton 或 UIView 。好处如下： 1. 无需反复调“间距位置等”来接近系统效果。 2. 在push到下一页时 TabBar 的隐藏和显示之间的过渡效果跟系统一致（详见“ 集成后的效果 ”部分，给出了效果图） 3. 原生控件，所以可以使用诸多系统API，比如：可以使用 [UITabBar appearance]; 、 [UITabBarItem appearance]; 设置样式。（详见“补充说明 ”部分，给出了响应代码示例） |
| 3 | 自动监测是否需要添加“加号”按钮，并能自动设置位置 | CYLTabBarController 既支持类似微信的“中规中矩”的 TabBarController 样式，并且默认就是微信这种样式，同时又支持类似“微博”或“淘宝闲鱼”这种具有不规则加号按钮的 TabBarController 。想支持这种样式，只需自定义一个加号按钮，CYLTabBarController 能检测到它的存在并自动将 tabBar 排序好，无需多余操作，并且也预留了一定接口来满足自定义需求。“加号”按钮的样式、frame均在自定义的类中独立实现，不会涉及tabbar相关设置。 |
| 4 | 即使加号按钮超出了tabbar的区域，超出部分依然能响应点击事件 | 红线内的区域均能响应tabbar相关的点击事件， |
| 5 | 允许指定加号按钮位置 | 效果如下： Airbnb-app效果： |
| 6 | 支持让 TabBarItem 仅显示图标，并自动使图标垂直居中，支持自定义TabBar高度 |
效果可见Airbnb-app效果，或者下图 |
| 7 | 支持CocoaPods | 容易集成 |
| 8 | 支持Swift项目导入 | 兼容 |
| 9 | 支持横竖屏 | －－ |
（学习交流群：529753706）
| 既支持默认样式 | 同时也支持创建自定义的形状不规则加号按钮 |
|---|---|
 |
 |
支持横竖屏
| 本仓库配套Demo的效果： | 另一个Demo 使用CYLTabBarController实现了微博Tabbar框架，效果如下 |
|---|---|
 |
 |
做下说明：
├── CYLTabBarController ＃核心库文件夹，如果不使用 CocoaPods 集成，请直接将这个文件夹拖拽带你的项目中
└── Example
└── Classes
├── Module #模块类文件夹
│ ├── Home
│ ├── Message
│ ├── Mine
│ └── SameCity
└── View #这里放着 CYLPlusButton 的子类 CYLPlusButtonSubclass，演示了如何创建自定义的形状不规则加号按钮
四步完成主流App框架搭建：
- 第一步：使用CocoaPods导入CYLTabBarController
- 第二步：设置CYLTabBarController的两个数组：控制器数组和TabBar属性数组
- 第三步：将CYLTabBarController设置为window的RootViewController
- 第四步（可选）：创建自定义的形状不规则加号按钮
在 Podfile 中进行如下导入：
pod 'CYLTabBarController'然后使用 cocoaPods 进行安装：
如果尚未安装 CocoaPods, 运行以下命令进行安装:
gem install cocoapods安装成功后就可以安装依赖了：
建议使用如下方式：
# 禁止升级CocoaPods的spec仓库，否则会卡在 Analyzing dependencies ，非常慢
pod update --verbose --no-repo-update如果提示找不到库，则可去掉 --no-repo-update
pod update- (void)setupViewControllers {
CYLHomeViewController *firstViewController = [[CYLHomeViewController alloc] init];
UIViewController *firstNavigationController = [[UINavigationController alloc]
initWithRootViewController:firstViewController];
CYLSameFityViewController *secondViewController = [[CYLSameFityViewController alloc] init];
UIViewController *secondNavigationController = [[UINavigationController alloc]
initWithRootViewController:secondViewController];
CYLTabBarController *tabBarController = [[CYLTabBarController alloc] init];
[self customizeTabBarForController:tabBarController];
[tabBarController setViewControllers:@[
firstNavigationController,
secondNavigationController,
]];
self.tabBarController = tabBarController;
}
/*
*
在`-setViewControllers:`之前设置TabBar的属性，
*
*/
- (void)customizeTabBarForController:(CYLTabBarController *)tabBarController {
NSDictionary *dict1 = @{
CYLTabBarItemTitle : @"首页",
CYLTabBarItemImage : @"home_normal",
CYLTabBarItemSelectedImage : @"home_highlight",
};
NSDictionary *dict2 = @{
CYLTabBarItemTitle : @"同城",
CYLTabBarItemImage : @"mycity_normal",
CYLTabBarItemSelectedImage : @"mycity_highlight",
};
NSArray *tabBarItemsAttributes = @[ dict1, dict2 ];
tabBarController.tabBarItemsAttributes = tabBarItemsAttributes;
}- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
/* *省略部分： * */
[self.window setRootViewController:self.tabBarController];
/* *省略部分： * */
return YES;
}创建一个继承于 CYLPlusButton 的类，要求和步骤：
-
实现
CYLPlusButtonSubclassing协议 -
子类将自身类型进行注册，一般可在
application的applicationDelegate方法里面调用[YourClass registerPlusButton]或者在子类的+load方法中调用：
+(void)load {
[super registerPlusButton];
}协议提供了可选方法：
+ (NSUInteger)indexOfPlusButtonInTabBar;
+ (CGFloat)multiplierOfTabBarHeight:(CGFloat)tabBarHeight;
+ (UIViewController *)plusChildViewController;作用分别是：
+ (NSUInteger)indexOfPlusButtonInTabBar;用来自定义加号按钮的位置，如果不实现默认居中，但是如果 tabbar 的个数是奇数则必须实现该方法，否则 CYLTabBarController 会抛出 exception 来进行提示。
主要适用于如下情景：
Airbnb-app效果：
+ (CGFloat)multiplierOfTabBarHeight:(CGFloat)tabBarHeight;该方法是为了调整自定义按钮中心点Y轴方向的位置，建议在按钮超出了 tabbar 的边界时实现该方法。返回值是自定义按钮中心点Y轴方向的坐标除以 tabbar 的高度，如果不实现，会自动进行比对，预设一个较为合适的位置，如果实现了该方法，预设的逻辑将失效。
内部实现时，会使用该返回值来设置 PlusButton 的 centerY 坐标，公式如下：
PlusButtonCenterY = multiplierOfTabBarHeight * taBarHeight + constantOfPlusButtonCenterYOffset;
也就是说：如果 constantOfPlusButtonCenterYOffset 为0，同时 multiplierOfTabBarHeight 的值是0.5，表示 PlusButton 居中，小于0.5表示 PlusButton 偏上，大于0.5则表示偏下。
+ (CGFloat)constantOfPlusButtonCenterYOffsetForTabBarHeight:(CGFloat)tabBarHeight;参考 +multiplierOfTabBarHeight: 中的公式：
PlusButtonCenterY = multiplierOfTabBarHeight * taBarHeight + constantOfPlusButtonCenterYOffset;
也就是说： constantOfPlusButtonCenterYOffset 大于0会向下偏移，小于0会向上偏移。
注意：实现了该方法，但没有实现 +multiplierOfTabBarHeight: 方法，在这种情况下，会在预设逻辑的基础上进行偏移。
详见Demo中的 CYLPlusButtonSubclass 类的实现。
+ (UIViewController *)plusChildViewController;详见： 点击 PlusButton 跳转到指定 UIViewController
另外，如果加号按钮超出了边界，一般需要手动调用如下代码取消 tabbar 顶部默认的阴影，可在 AppDelegate 类中调用：
//去除 TabBar 自带的顶部阴影
[[UITabBar appearance] setShadowImage:[[UIImage alloc] init]];如何调整、自定义 PlusButton 与其它 TabBarItem 的宽度？
CYLTabBarController 规定：
TabBarItem 宽度 ＝ ( TabBar 总宽度 － PlusButton 宽度 ) / (TabBarItem 个数)所以想自定义宽度，只需要修改 PlusButton 的宽度即可。
比如你就可以在 Demo中的 CYLPlusButtonSubclass.m 类里：
把
[button sizeToFit]; 改为
button.frame = CGRectMake(0.0, 0.0, 250, 100);
button.backgroundColor = [UIColor redColor];效果如下，
同时你也可以顺便测试下 CYLTabBarController 的这一个特性：
即使加号按钮超出了tabbar的区域，超出部分依然能响应点击事件
并且你可以在项目中的任意位置读取到 PlusButton 的宽度，借助 CYLTabBarController.h 定义的 CYLPlusButtonWidth 这个extern。可参考 +[CYLTabBarControllerConfig customizeTabBarAppearance:] 里的用法。
如果想更进一步的自定义 TabBar 样式可在 -application:didFinishLaunchingWithOptions: 方法中设置
/**
* tabBarItem 的选中和不选中文字属性、背景图片
*/
- (void)customizeInterface {
// 普通状态下的文字属性
NSMutableDictionary *normalAttrs = [NSMutableDictionary dictionary];
normalAttrs[NSForegroundColorAttributeName] = [UIColor grayColor];
// 选中状态下的文字属性
NSMutableDictionary *selectedAttrs = [NSMutableDictionary dictionary];
selectedAttrs[NSForegroundColorAttributeName] = [UIColor darkGrayColor];
// 设置文字属性
UITabBarItem *tabBar = [UITabBarItem appearance];
[tabBar setTitleTextAttributes:normalAttrs forState:UIControlStateNormal];
[tabBar setTitleTextAttributes:selectedAttrs forState:UIControlStateSelected];
// 设置背景图片
UITabBar *tabBarAppearance = [UITabBar appearance];
[tabBarAppearance setBackgroundImage:[UIImage imageNamed:@"tabbar_background"]];
}
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
/* *省略部分： * */
[self.window makeKeyAndVisible];
[self customizeInterface];
return YES;
}TabBar 横竖屏适配时，如果你添加了 PlusButton，且适配时用到了 TabBarItem 的宽度, 不建议使用系统的UIDeviceOrientationDidChangeNotification , 请使用库里的 CYLTabBarItemWidthDidChangeNotification 来更新 TabBar 布局，最典型的场景就是，根据 TabBarItem 在不同横竖屏状态下的宽度变化来切换选中的TabBarItem 的背景图片。Demo 里 CYLTabBarControllerConfig.m 给出了这一场景的用法:
CYLTabBarController.h 中提供了 CYLTabBarItemWidth 这一extern常量，并且会在 TabBarItem 的宽度发生变化时，及时更新该值，所以用法就如下所示：
- (void)updateTabBarCustomizationWhenTabBarItemWidthDidUpdate {
void (^deviceOrientationDidChangeBlock)(NSNotification *) = ^(NSNotification *notification) {
[self tabBarItemWidthDidUpdate];
};
[[NSNotificationCenter defaultCenter] addObserverForName:CYLTabBarItemWidthDidChangeNotification
object:nil
queue:[NSOperationQueue mainQueue]
usingBlock:deviceOrientationDidChangeBlock];
}
- (void)tabBarItemWidthDidUpdate {
UIDeviceOrientation orientation = [[UIDevice currentDevice] orientation];
if ((orientation == UIDeviceOrientationLandscapeLeft) || (orientation == UIDeviceOrientationLandscapeRight)) {
NSLog(@"Landscape Left or Right !");
} else if (orientation == UIDeviceOrientationPortrait){
NSLog(@"Landscape portrait!");
}
CGSize selectionIndicatorImageSize = CGSizeMake(CYLTabBarItemWidth, [self cyl_tabBarController].tabBar.bounds.size.height);
[[self cyl_tabBarController].tabBar setSelectionIndicatorImage:[[self class]
imageFromColor:[UIColor yellowColor]
forSize:selectionIndicatorImageSize
withCornerRadius:0]];
}对于任意 NSObject 对象：
CYLTabBarController.h 中为 NSObject 提供了分类方法 -cyl_tabBarController ，所以在任意对象中，一行代码就可以访问到一个初始化好的 CYLTabBarController 对象，-cyl_tabBarController 的作用你可以这样理解：与获取单例对象的 +shareInstance 方法作用一样。
接口如下：
// CYLTabBarController.h
@interface NSObject (CYLTabBarController)
/**
* If `self` is kind of `UIViewController`, this method will return the nearest ancestor in the view controller hierarchy that is a tab bar controller. If `self` is not kind of `UIViewController`, it will return the `rootViewController` of the `rootWindow` as long as you have set the `CYLTabBarController` as the `rootViewController`. Otherwise return nil. (read-only)
*/
@property (nonatomic, readonly) CYLTabBarController *cyl_tabBarController;
@end用法：
//导入 CYLTabBarController.h
#import "CYLTabBarController.h"
- (void)viewDidLoad {
[super viewDidLoad];
CYLTabBarController *tabbarController = [self cyl_tabBarController];
/*...*/
}提供了一个协议方法来完成本功能：
实现该方法后，能让 PlusButton 的点击效果与跟点击其他 UITabBarButton 效果一样，跳转到该方法指定的 UIViewController 。
注意：必须同时实现 +indexOfPlusButtonInTabBar 来指定 PlusButton 的位置。
遵循两个协议：
要想实现该效果，只需要在设置 tabBarItemsAttributes该属性时不传 title 即可。
比如：在Demo的基础上，注释掉图中红框部分：
| 注释前 | 注释后 |
|---|---|
 |
 |
可以通过这种方式来达到 Airbnb-app 的效果：
如果想手动设置偏移量来达到该效果：
可以在 -setViewControllers: 方法前设置 CYLTabBarController 的 imageInsets 和 titlePositionAdjustment 属性
这里注意：设置这两个属性后，TabBar 中所有的 TabBarItem 都将被设置。并且第一种做法的逻辑将不会执行，也就是说该做法优先级要高于第一种做法。
做法如下：
但是想达到Airbnb-app的效果只有这个接口是不行的，还需要自定义下 TabBar 的高度，你需要设置 CYLTabBarController 的 tabBarHeight 属性。你可以在Demo的 CYLTabBarControllerConfig.m 中的 -customizeTabBarAppearance: 方法中设置。
注：“仅显示图标，并使图标垂直居中”这里所指的“图标”，其所属的类是私有类： UITabBarSwappableImageView，所以 CYLTabBarController 在相关的接口命名时会包含 SwappableImageView 字样。另外，使用该特性需要 pod update 到 1.5.5以上的版本。
参考： 《从头开始swift2.1 仿搜材通项目（三） 主流框架Tabbed的搭建》
这里注意，文章的示例代码有问题，少了设置 PlusButton 大小的代码：
这将导致 PlusButton 点击事件失效，具体修改代码如下：
参考： 《[Note] CYLTabBarController》
更多文档信息可查看 CocoaDocs：CYLTabBarController 。
Q：为什么放置6个TabBarItem会显示异常？
A：
Apple 规定：
一个
TabBar上只能出现最多5个TabBarItem，第六个及更多的将不被显示。
另外注意，Apple检测的是 UITabBarItem 及其子类，所以放置“加号按钮”，这是 UIButton 不在“5个”里面。
最多只能添加5个 TabBarItem ，也就是说加上“加号按钮”，一共最多在一个 TabBar 上放置6个控件。否则第6个及之后出现 TabBarItem 会被自动屏蔽掉。而且就Apple的审核机制来说，超过5个也会被直接拒绝上架。
Q：我把 demo 两侧的 item 各去掉一个后，按钮的响应区域就变成下图的样子了：
A：v1.5.5 版本已经修复了该问题，现在不会出现类似的问题了：点击按钮区域却不响应，响应区域有偏移。
Q： 如何实现添加选中背景色的功能 ，像下面这样：
A：我已经在 Demo 中添加了如何实现该功能的代码：
详情见 CYLTabBarControllerConfig 类中下面方法的实现：
/**
* 更多TabBar自定义设置：比如：tabBarItem 的选中和不选中文字和背景图片属性、tabbar 背景图片属性
*/
- (void)customizeTabBarAppearance:(CYLTabBarController *)tabBarController;
效果如下：
Q: 当 ViewController 设置的 self.title 和 tabBarItemsAttributes 中对应的 title 不一致的时候，会出现如图的错误，排序不对了
A：在 v1.0.7 版本中已经修复了该 bug，但是也需要注意：
请勿使用 self.title = @"同城"; 这种方式，请使用 self.navigationItem.title = @"同城";
self.title = @"同城"; 这种方式，如果和 tabBarItemsAttributes 中对应的 title 不一致的时候可能会导致如下现象（不算 bug，但看起来也很奇怪）：
规则如下：
self.navigationItem.title = @"同城"; //✅sets navigation bar title.The right way to set the title of the navigation
self.tabBarItem.title = @"同城23333"; //❌sets tab bar title. Even the `tabBarItem.title` changed, this will be ignored in tabbar.
self.title = @"同城1"; //❌sets both of these. Do not do this‼️‼️ This may cause something strange like this : http://i68.tinypic.com/282l3x4.jpg
Q : 当使用这个方法时 -[UIViewController cyl_popSelectTabBarChildViewControllerAtIndex:] 系列方法时，会出现如下的黑边问题。
A： 这个是 iOS 系统的BUG，经测试iOS9.3已经修复了，如果在更早起版本中出现了，可以通过下面将 rootWindow 的背景色改为白色来避免：比如你可以 Appdelegate 类里这样设置：
//#import "CYLTabBarController.h"
[[self cyl_tabBarController] rootWindow].backgroundColor = [UIColor whiteColor];Q:我现在已经做好了一个比较简单的中间凸起的 icon 但是超过了49这个高度的位置是不能效应的 我想请问你的demo哪个功能是可以使我超出的范围也可以响应的呢?
A: 这个是自动做的，但是 CYLTabBarController 只能保证的是：只要是 UIButton 的 frame 区域内就能响应。
请把 button 的背景颜色设置为显眼的颜色，比如红色，比如像下面的plus按钮，红色部分是能接收点击事件的，但是超出了红色按钮的，黄色的图片区域，依然是无法响应点击事件的。
这是因为，在响应链上，UIControl 能响应点击事件， UIImage 无法响应。
（更多iOS开发干货，欢迎关注 微博@iOS程序犭袁 ）
Posted by 微博@iOS程序犭袁
原创文章，版权声明：自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0
