简介
由于项目中需要改变TabBar的样式，网上找了一些例子，发现这篇文章比较符合项目需求（先膜拜大神），所以按照大神的思路，自己写了一个自定义TabBar，完整dome GitHub地址，这是另一种形式，样式自定义。
效果图
Simulator Screen Shot 2017年8月14日 上午11.41.48.png
1. 先继承UIView搭建tabBar的样式，封装view没什么难点，这里直接上代码了
.h文件
#import <UIKit/UIKit.h>
@protocol CJTabBarViewDelegate <NSObject>
// 返回点击index
- (void)selectIndex:(NSInteger)index;
// 点击center
- (void)selectCenter;
@end
@interface CJTabBarView : UIView
@property (nonatomic, assign) id <CJTabBarViewDelegate> delegate;
@end
.m文件
#import "CJTabBarView.h"
@implementation CJTabBarView
{
NSInteger saveIndex;// 保存上次点击的index
}
#pragma mark 初始化
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
saveIndex = 100;
[self createView];
}
return self;
}
#pragma mark 创建视图
- (void)createView
{
NSArray *titleArr = @[@"首页", @"发现", @"收藏", @"设置"];
NSArray *imageArr = @[@"wxb主页", @"iconfont-yiqiyibiao", @"iconfont-xingxing", @"iconfont-jixieqimo"];
NSArray *selectImageArr = @[@"wxb主页-2", @"iconfont-yiqiyibiao-2", @"iconfont-xingxing-2", @"iconfont-jixieqimo-2"];
// 设置item大小 根据项目具体情况修改
CGFloat centerW = 80;
CGFloat centerH = 60;
CGFloat itemW = ([UIScreen mainScreen].bounds.size.width-80)/4.0;
CGFloat itemH = 35;
// 循环创建4个item
for (int i = 0; i < imageArr.count; i++) {
UIButton *item = [UIButton buttonWithType:UIButtonTypeCustom];
item.frame = CGRectMake(itemW * i + centerW * (i/2), 0, itemW, itemH);
// 对，主页的图片还是那个灰的，不懂的童鞋去看（一），反正没有影响
[item setImage:[UIImage imageNamed:imageArr[i]] forState:UIControlStateNormal];
[item setImage:[UIImage imageNamed:selectImageArr[i]] forState:UIControlStateSelected];
[self addSubview:item];
item.tag = 100+i;
[item addTarget:self action:@selector(itemClick:) forControlEvents:UIControlEventTouchDown];
UILabel *itemLabel = [[UILabel alloc] initWithFrame:CGRectMake(itemW * i + centerW * (i/2), itemH, itemW, 14)];
itemLabel.text = titleArr[i];
[self addSubview:itemLabel];
itemLabel.font = [UIFont systemFontOfSize:10];
itemLabel.textColor = [UIColor blackColor];
itemLabel.tag = 200+i;
itemLabel.textAlignment = NSTextAlignmentCenter;
if (i == 0) {
[self itemClick:item];
}
}
// 创建center
UIButton *center = [UIButton buttonWithType:UIButtonTypeCustom];
center.frame = CGRectMake(itemW*2, 49-centerH, centerW, centerH);
[center setImage:[UIImage imageNamed:@"08"] forState:UIControlStateHighlighted];
[center setImage:[UIImage imageNamed:@"08"] forState:UIControlStateNormal];
[self addSubview:center];
[center addTarget:self action:@selector(centerClick:) forControlEvents:UIControlEventTouchDown];
}
#pragma mark item点击事件
- (void)itemClick:(UIButton *)btn
{
// 将之前点击的item恢复原样
UIButton *tempB = [self viewWithTag:saveIndex];
tempB.selected = NO;
tempB.userInteractionEnabled = YES;
UILabel *tempL = [self viewWithTag:saveIndex+100];
tempL.textColor = [UIColor blackColor];
// 将点击的item变成选中状态
saveIndex = btn.tag;
btn.selected = YES;
btn.userInteractionEnabled = NO;
UILabel *tempL1 = [self viewWithTag:saveIndex+100];
tempL1.textColor = [UIColor colorWithRed:32/255.0 green:151/255.0 blue:217/255.0 alpha:1];
if ([self.delegate respondsToSelector:@selector(selectIndex:)]) {
[self.delegate selectIndex:btn.tag - 100];
}
}
#pragma mark center点击事件
- (void)centerClick:(UIButton *)btn
{
if ([self.delegate respondsToSelector:@selector(selectCenter)]) {
[self.delegate selectCenter];
}
}
@end
2. 继承UITabBar创建CJCustomTabBar 并在.h声明CJTabBarView属性
#import <UIKit/UIKit.h>
#import "CJTabBarView.h"
@interface CJCustomTabBar : UITabBar
@property (nonatomic, strong) CJTabBarView *tabBarView;
@end
3. 在.m中创建自定义tabBar
#pragma mark 初始化
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self addSubview:self.tabBarView];
}
return self;
}
#pragma mark layout
- (void)layoutSubviews
{
[super layoutSubviews];
// 设置tabBarView的frame
self.tabBarView.frame = self.bounds;
// 把tabBarView带到最前面，覆盖tabBar的内容
[self bringSubviewToFront:self.tabBarView];
}
#pragma mark - getter
- (CJTabBarView *)tabBarView
{
if (_tabBarView == nil) {
_tabBarView = [[CJTabBarView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, 49)];
}
return _tabBarView;
}
// 重写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.tabBarView.subviews) {
// 把这个坐标从tabbar的坐标系转为subview的坐标系
CGPoint subPoint = [subview convertPoint:point fromView:self];
result = [subview hitTest:subPoint withEvent:event];
// 如果事件发生在subView里就返回
if (result) {
return result;
}
}
return nil;
}
4.创建CJTabBarController 继承UITabBarController
.m文件
- (void)viewDidLoad {
[super viewDidLoad];
// 利用 KVC 来使用自定义的tabBar；
CJCustomTabBar *tabBar = [[CJCustomTabBar alloc] init];
[self setValue:tabBar forKey:@"tabBar"];
tabBar.tabBarView.delegate = self;
[self createControllers];
}
#pragma mark 创建controller
- (void)createControllers
{
NSArray *titleArr = @[@"首页", @"发现", @"收藏", @"设置"];
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];
// 添加
[self addChildViewController:nav];
}
}
#pragma mark CJTabBarView delegate
- (void)selectIndex:(NSInteger)index
{
self.selectedIndex = index;
NSLog(@"%ld", index);
}
- (void)selectCenter
{
NSLog(@"center");
}
这样样式自定义tabBar就完成了。由于部分方法、思路和（一）里相同，这里就没做过多解释。
结语：限于水平，本文只写了一些基本用法和注意事项，如果文中存在错误请指出，我会及时修改。
