簡(jiǎn)介
由于項(xiàng)目中需要改變TabBar的樣式阱佛，網(wǎng)上找了一些例子原环，發(fā)現(xiàn)這篇文章比較符合項(xiàng)目需求（先膜拜大神）箕肃，所以按照大神的思路坝锰，自己寫(xiě)了一個(gè)自定義TabBar粹懒，完整dome GitHub地址重付，這是另一種形式顷级，樣式自定義。
效果圖
Simulator Screen Shot 2017年8月14日 上午11.41.48.png
1. 先繼承UIView搭建tabBar的樣式确垫，封裝view沒(méi)什么難點(diǎn)弓颈，這里直接上代碼了
.h文件
#import <UIKit/UIKit.h>
@protocol CJTabBarViewDelegate <NSObject>
// 返回點(diǎn)擊index
- (void)selectIndex:(NSInteger)index;
// 點(diǎn)擊center
- (void)selectCenter;
@end
@interface CJTabBarView : UIView
@property (nonatomic, assign) id <CJTabBarViewDelegate> delegate;
@end
.m文件
#import "CJTabBarView.h"
@implementation CJTabBarView
{
NSInteger saveIndex;// 保存上次點(diǎn)擊的index
}
#pragma mark 初始化
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
saveIndex = 100;
[self createView];
}
return self;
}
#pragma mark 創(chuàng)建視圖
- (void)createView
{
NSArray *titleArr = @[@"首頁(yè)", @"發(fā)現(xiàn)", @"收藏", @"設(shè)置"];
NSArray *imageArr = @[@"wxb主頁(yè)", @"iconfont-yiqiyibiao", @"iconfont-xingxing", @"iconfont-jixieqimo"];
NSArray *selectImageArr = @[@"wxb主頁(yè)-2", @"iconfont-yiqiyibiao-2", @"iconfont-xingxing-2", @"iconfont-jixieqimo-2"];
// 設(shè)置item大小 根據(jù)項(xiàng)目具體情況修改
CGFloat centerW = 80;
CGFloat centerH = 60;
CGFloat itemW = ([UIScreen mainScreen].bounds.size.width-80)/4.0;
CGFloat itemH = 35;
// 循環(huán)創(chuàng)建4個(gè)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);
// 對(duì)，主頁(yè)的圖片還是那個(gè)灰的删掀，不懂的童鞋去看（一）翔冀，反正沒(méi)有影響
[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];
}
}
// 創(chuàng)建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點(diǎn)擊事件
- (void)itemClick:(UIButton *)btn
{
// 將之前點(diǎn)擊的item恢復(fù)原樣
UIButton *tempB = [self viewWithTag:saveIndex];
tempB.selected = NO;
tempB.userInteractionEnabled = YES;
UILabel *tempL = [self viewWithTag:saveIndex+100];
tempL.textColor = [UIColor blackColor];
// 將點(diǎn)擊的item變成選中狀態(tài)
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點(diǎn)擊事件
- (void)centerClick:(UIButton *)btn
{
if ([self.delegate respondsToSelector:@selector(selectCenter)]) {
[self.delegate selectCenter];
}
}
@end
2. 繼承UITabBar創(chuàng)建CJCustomTabBar 并在.h聲明CJTabBarView屬性
#import <UIKit/UIKit.h>
#import "CJTabBarView.h"
@interface CJCustomTabBar : UITabBar
@property (nonatomic, strong) CJTabBarView *tabBarView;
@end
3. 在.m中創(chuàng)建自定義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];
// 設(shè)置tabBarView的frame
self.tabBarView.frame = self.bounds;
// 把tabBarView帶到最前面，覆蓋tabBar的內(nèi)容
[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;
}
// 重寫(xiě)hitTest方法披泪，讓超出tabBar部分也能響應(yīng)事件
- (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];
// 如果事件發(fā)生在tabbar里面直接返回
if (result) {
return result;
}
// 這里遍歷那些超出的部分就可以了纤子，不過(guò)這么寫(xiě)比較通用。
for (UIView *subview in self.tabBarView.subviews) {
// 把這個(gè)坐標(biāo)從tabbar的坐標(biāo)系轉(zhuǎn)為subview的坐標(biāo)系
CGPoint subPoint = [subview convertPoint:point fromView:self];
result = [subview hitTest:subPoint withEvent:event];
// 如果事件發(fā)生在subView里就返回
if (result) {
return result;
}
}
return nil;
}
4.創(chuàng)建CJTabBarController 繼承UITabBarController
.m文件
- (void)viewDidLoad {
[super viewDidLoad];
// 利用 KVC 來(lái)使用自定義的tabBar款票；
CJCustomTabBar *tabBar = [[CJCustomTabBar alloc] init];
[self setValue:tabBar forKey:@"tabBar"];
tabBar.tabBarView.delegate = self;
[self createControllers];
}
#pragma mark 創(chuàng)建controller
- (void)createControllers
{
NSArray *titleArr = @[@"首頁(yè)", @"發(fā)現(xiàn)", @"收藏", @"設(shè)置"];
for (NSInteger i = 0; i < titleArr.count; i++) {
// 對(duì)應(yīng)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];
// 創(chuàng)建navigation
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:VC];
// nav標(biāo)題
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就完成了控硼。由于部分方法、思路和（一）里相同艾少，這里就沒(méi)做過(guò)多解釋卡乾。
結(jié)語(yǔ)：限于水平，本文只寫(xiě)了一些基本用法和注意事項(xiàng)缚够，如果文中存在錯(cuò)誤請(qǐng)指出幔妨，我會(huì)及時(shí)修改。
