iOS開發之實現TabBar中間凸起“+”按鈕（自定義TabBar）

參考：http://www.jianshu.com/p/46f61bc7a938，https://github.com/Mringkang/KBCustomCenterTabbar

效果：

PS：這里需要用到UIView一個分類的一些屬性，參考http://www.cnblogs.com/guitarandcode/p/5758995.html   ，圖標素材等自行上網找或者自己設計，這里就不提供了。最后在StoryBoard中選擇TabBarController對應下面自定義的TabBarController即可

 

自定義TabBar：

 MyTabBar.h

#import <UIKit/UIKit.h>

@class MyTabBar;

//MyTabBar的代理必須實現addButtonClick，以響應中間“+”按鈕的點擊事件
@protocol MyTabBarDelegate <NSObject>

-(void)addButtonClick:(MyTabBar *)tabBar;

@end

@interface MyTabBar : UITabBar

//指向MyTabBar的代理
@property (nonatomic,weak) id<MyTabBarDelegate> myTabBarDelegate;

@end

 

MyTabBar.m

#import "MyTabBar.h"
#import "UIView+Category.h"

#define AddButtonMargin 10

@interface MyTabBar()

//指向中間“+”按鈕
@property (nonatomic,weak) UIButton *addButton;
//指向“添加”標簽
@property (nonatomic,weak) UILabel *addLabel;

@end

@implementation MyTabBar

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

-(instancetype)initWithFrame:(CGRect)frame
{
    if(self = [super initWithFrame:frame])
    {
        //創建中間“+”按鈕
        UIButton *addBtn = [[UIButton alloc] init];
        //設置默認背景圖片
        [addBtn setBackgroundImage:[UIImage imageNamed:@"AddButtonIcon"] forState:UIControlStateNormal];
        //設置按下時背景圖片
        [addBtn setBackgroundImage:[UIImage imageNamed:@"AddButtonIcon-Active"] forState:UIControlStateHighlighted];
        //添加響應事件
        [addBtn addTarget:self action:@selector(addBtnDidClick) forControlEvents:UIControlEventTouchUpInside];
        //將按鈕添加到TabBar
        [self addSubview:addBtn];
        
        self.addButton = addBtn;
    }
    return self;
}

//響應中間“+”按鈕點擊事件
-(void)addBtnDidClick
{
    if([self.myTabBarDelegate respondsToSelector:@selector(addButtonClick:)])
    {
        [self.myTabBarDelegate addButtonClick:self];
    }
}

-(void)layoutSubviews
{
    [super layoutSubviews];
    
    //去掉TabBar上部的橫線
    for (UIView *view in self.subviews)
    {
        if ([view isKindOfClass:[UIImageView class]] && view.bounds.size.height <= 1)   //橫線的高度為0.5
        {
            UIImageView *line = (UIImageView *)view;
            line.hidden = YES;
        }
    }
    
    //設置“+”按鈕的位置
    self.addButton.centerX = self.centerX;
    self.addButton.centerY = self.height * 0.5 - 1.5 * AddButtonMargin;
    //設置“+”按鈕的大小為圖片的大小
    self.addButton.size = CGSizeMake(self.addButton.currentBackgroundImage.size.width, self.addButton.currentBackgroundImage.size.height);
    
    //創建並設置“+”按鈕下方的文本為“添加”
    UILabel *addLbl = [[UILabel alloc] init];
    addLbl.text = @"添加";
    addLbl.font = [UIFont systemFontOfSize:10];
    addLbl.textColor = [UIColor grayColor];
    [addLbl sizeToFit];

    //設置“添加”label的位置
    addLbl.centerX = self.addButton.centerX;
    addLbl.centerY = CGRectGetMaxY(self.addButton.frame) + 0.5 * AddButtonMargin + 0.5;
    
    [self addSubview:addLbl];
    
    self.addLabel = addLbl;
    
    int btnIndex = 0;
    //系統自帶的按鈕類型是UITabBarButton，找出這些類型的按鈕，然后重新排布位置，空出中間的位置
    Class class = NSClassFromString(@"UITabBarButton");
    for (UIView *btn in self.subviews) {//遍歷TabBar的子控件
        if ([btn isKindOfClass:class]) {//如果是系統的UITabBarButton，那么就調整子控件位置，空出中間位置
            //每一個按鈕的寬度等於TabBar的三分之一
            btn.width = self.width / 3;
            
            btn.x = btn.width * btnIndex;
            
            btnIndex++;
            //如果索引是1(即“+”按鈕)，直接讓索引加一
            if (btnIndex == 1) {
                btnIndex++;
            }
            
        }
    }
    //將“+”按鈕放到視圖層次最前面
    [self bringSubviewToFront:self.addButton];
}

//重寫hitTest方法，去監聽"+"按鈕和“添加”標簽的點擊，目的是為了讓凸出的部分點擊也有反應
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    
    //這一個判斷是關鍵，不判斷的話push到其他頁面，點擊“+”按鈕的位置也是會有反應的，這樣就不好了
    //self.isHidden == NO 說明當前頁面是有TabBar的，那么肯定是在根控制器頁面
    //在根控制器頁面，那么我們就需要判斷手指點擊的位置是否在“+”按鈕或“添加”標簽上
    //是的話讓“+”按鈕自己處理點擊事件，不是的話讓系統去處理點擊事件就可以了
    if (self.isHidden == NO)
    {
        
        //將當前TabBar的觸摸點轉換坐標系，轉換到“+”按鈕的身上，生成一個新的點
        CGPoint newA = [self convertPoint:point toView:self.addButton];
        //將當前TabBar的觸摸點轉換坐標系，轉換到“添加”標簽的身上，生成一個新的點
        CGPoint newL = [self convertPoint:point toView:self.addLabel];
        
        //判斷如果這個新的點是在“+”按鈕身上，那么處理點擊事件最合適的view就是“+”按鈕
        if ( [self.addButton pointInside:newA withEvent:event])
        {
            return self.addButton;
        }
        //判斷如果這個新的點是在“添加”標簽身上，那么也讓“+”按鈕處理事件
        else if([self.addLabel pointInside:newL withEvent:event])
        {
            return self.addButton;
        }
        else
        {//如果點不在“+”按鈕身上，直接讓系統處理就可以了
            
            return [super hitTest:point withEvent:event];
        }
    }
    else
    {
        //TabBar隱藏了，那么說明已經push到其他的頁面了，這個時候還是讓系統去判斷最合適的view處理就好了
        return [super hitTest:point withEvent:event];
    }
}

@end

 

自定義TabBarController：

MyTabBarController.h

#import <UIKit/UIKit.h>

@interface MyTabBarController : UITabBarController

@end

 

 

MyTabBarController.m

#import "MyTabBarController.h"
#import "MyTabBar.h"


@interface MyTabBarController () <MyTabBarDelegate> //實現自定義TabBar協議

@end

@implementation MyTabBarController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    //設置TabBar上第一個Item（明細）選中時的圖片
    UIImage *listActive = [UIImage imageNamed:@"ListIcon - Active(blue)"];
    UITabBarItem *listItem = self.tabBar.items[0];
    //始終按照原圖片渲染
    listItem.selectedImage = [listActive imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    
    
    //設置TabBar上第二個Item（報表）選中時的圖片
    UIImage *chartActive = [UIImage imageNamed:@"ChartIcon - Active(blue)"];
    UITabBarItem *chartItem = self.tabBar.items[1];
    //始終按照原圖片渲染
    chartItem.selectedImage = [chartActive imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    
    //創建自定義TabBar
    MyTabBar *myTabBar = [[MyTabBar alloc] init];
    myTabBar.myTabBarDelegate = self;
    
    //利用KVC替換默認的TabBar
    [self setValue:myTabBar forKey:@"tabBar"];
}


-(void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    //設置TabBar的TintColor
    self.tabBar.tintColor = [UIColor colorWithRed:89/255.0 green:217/255.0 blue:247/255.0 alpha:1.0];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}



#pragma mark - MyTabBarDelegate
-(void)addButtonClick:(MyTabBar *)tabBar
{
    //測試中間“+”按鈕是否可以點擊並處理事件
    UIAlertController *controller = [UIAlertController alertControllerWithTitle:@"test" message:@"Test" preferredStyle:UIAlertControllerStyleAlert];
    UIAlertAction *action = [UIAlertAction actionWithTitle:@"test" style:UIAlertActionStyleDefault handler:nil];
    [controller addAction:action];
    [self presentViewController:controller animated:YES completion:nil];
    
}

@end