简介
由于项目中需要改变TabBar的样式，网上找了一些例子，发现这篇文章比较符合项目需求（先膜拜大神），所以按照大神的思路，自己写了一个自定义TabBar，完整dome GitHub地址，另外一种实现形式，我会在下篇文章更新。
效果图
Simulator Screen Shot 2017年8月11日 下午1.57.25.png
1.先继承UITabBar创建一个文件CJTabBar，然后声明一个中间按钮的button
@property (nonatomic, strong) UIButton *centerButton;
2.写初始化方法和centerButton getter方法以及点击事件
#pragma mark init
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self addSubview:self.centerButton];
}
return self;
}
#pragma mark getter
- (UIButton *)centerButton
{
if (_centerButton == nil) {
_centerButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 80, 60)];
[_centerButton setImage:[UIImage imageNamed:@"08"] forState:UIControlStateNormal];
[_centerButton addTarget:self action:@selector(centerAction:) forControlEvents:UIControlEventTouchUpInside];
}
return _centerButton;
}
#pragma mark centerButton click
- (void)centerAction:(UIButton *)btn
{
NSLog(@"center");
}
3.重新布局系统TabBar
// 重新布局
- (void)layoutSubviews
{
[super layoutSubviews];
// 获取原有tabBarButton
NSMutableArray *tabArr = [NSMutableArray array];
for (UIView *temp in self.subviews) {
if ([temp isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
[tabArr addObject:temp];
}
}
// 重新设置坐标
CGFloat btnWidth = (self.frame.size.width-self.centerButton.frame.size.width)/4.0;
CGFloat btnHeight = 48;
for (int i = 0; i < tabArr.count; i++) {
UIButton *temp = tabArr[i];
temp.frame = CGRectMake(btnWidth*i+(i/2)*btnWidth, 1, btnWidth, btnHeight);
}
// 设置中间按钮高
self.centerButton.center = CGPointMake(self.frame.size.width / 2, 48/2-6);
}
4. 重写hitTest方法，让超出tabBar部分也能响应事件
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
if (self.clipsToBounds || self.hidden || (self.alpha <= 0.01f)) {
return nil;
}
UIView *result = [super hitTest:point withEvent:event];
// 如果事件发生在tabbar里面直接返回
if (result) {
return result;
}
// 这里遍历那些超出的部分就可以了，不过这么写比较通用。
for (UIView *subview in self.subviews) {
// 把这个坐标从tabbar的坐标系转为subview的坐标系
CGPoint subPoint = [subview convertPoint:point fromView:self];
result = [subview hitTest:subPoint withEvent:event];
// 如果事件发生在subView里就返回
if (result) {
return result;
}
}
return nil;
}
5.创建一个继承UITabBarController的文件CJTabBarController，并创建controller
#pragma mark 创建controller
- (void)createControllers
{
NSArray *titleArr = @[@"首页", @"发现", @"收藏", @"设置"];
NSArray *imageArr = @[@"wxb主页", @"iconfont-yiqiyibiao", @"iconfont-xingxing", @"iconfont-jixieqimo"];
NSArray *selectImageArr = @[@"wxb主页-2", @"iconfont-yiqiyibiao-2", @"iconfont-xingxing-2", @"iconfont-jixieqimo-2"];
for (NSInteger i = 0; i < titleArr.count; i++) {
// 对应controller
UIViewController *VC = [[UIViewController alloc] init];
VC.view.backgroundColor = [UIColor colorWithRed:255.0/3*i/255.0 green:255.0/3*i/255.0 blue:255.0/3*i/255.0 alpha:1];
// 创建navigation
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:VC];
// nav标题
VC.navigationItem.title = titleArr[i];
// tabBar标题
nav.tabBarItem.title = titleArr[i];
// 设置未选中图片（原谅我首页图片颜色和其他不一样，弄错了）
nav.tabBarItem.image = [[UIImage imageNamed:imageArr[i]] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
// 设置选中图片
nav.tabBarItem.selectedImage = [[UIImage imageNamed:selectImageArr[i]] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
// 添加
[self addChildViewController:nav];
}
}
6.替换系统tabBar
- (void)viewDidLoad {
[super viewDidLoad];
// 设置tabBar
[self setValue:[CJTabBar new] forKey:@"tabBar"];
[self createControllers];
}
7.在AppDelegate中设置根视图
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// 设置根视图
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
self.window.backgroundColor = [UIColor whiteColor];
self.tabBarController = [CJTabBarController new];
self.window.rootViewController = self.tabBarController;
[self.window makeKeyAndVisible];
return YES;
}
这样一个简单的tabBar就自定义完成了。
结语：限于水平，本文只写了一些基本用法和注意事项，如果文中存在错误请指出，我会及时修改。
