iOS Tabbar中間添加凸起按鈕

前言

最近的項目中有需求在tabbar中間添加凸起按鈕，並且點擊時按鈕要旋轉，看了仿鬥魚的凸起，點擊後是present出來View，而不是像常規的tabbar上添加一個頁面，所以不符合要求，經過一段摸索最後得的一個比較好的效果，下面看效果圖

需求分析

• tabbar有5個item，每個對應一個頁面
• 中間item爲凸起按鈕
• 中間按鈕點擊後旋轉

效果實現

• 設置5個item
  我們一步步來解決這個問題，首先創建MCTabBarController繼承UITabBarController，然後和常規一樣創建5個item，中間的按鈕不設置圖片，代碼如下

//MCTabBarController.m
//添加子控制器
- (void)addChildViewControllers{
    //圖片大小建議32*32
    [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"首頁" andImageName:@"tab1_n" andSelectImage:@"tab1_p"];
    [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"擴展" andImageName:@"tab2_n" andSelectImage:@"tab2_p"];
    //中間這個不設置東西，只佔位
    [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"旋轉" andImageName:@"" andSelectImage:@""];
    [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"發現" andImageName:@"tab3_n" andSelectImage:@"tab3_p"];
    [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"我" andImageName:@"tab4_n" andSelectImage:@"tab4_p"];
}

- (void)addChildrenViewController:(UIViewController *)childVC andTitle:(NSString *)title andImageName:(NSString *)imageName andSelectImage:(NSString *)selectedImage{
    childVC.tabBarItem.image = [UIImage imageNamed:imageName];
    childVC.tabBarItem.selectedImage =  [UIImage imageNamed:selectedImage];
    childVC.title = title;

    BaseNavigationController *baseNav = [[BaseNavigationController alloc] initWithRootViewController:childVC];

    [self addChildViewController:baseNav];
}

這樣實現的效果如下圖所示

• 添加凸起按鈕
  我們可以在UITabBar上添加我們的凸起按鈕，讓他的位置在沒有設置的中間按鈕偏上，按鈕的點擊和中間按鈕點擊綁定，這裏直接在MCTabBarController.m中添加會有問題
  1、因爲凸起按鈕的frame超出了UITabBar的frame，這樣超出的區域點擊按鈕會沒有響應（圖二紅框區域），原因和解決辦法詳情參考我的這篇iOS UIButton 點擊無響應的解決辦法，由於要在UITabBar上添加凸起按鈕，並且處理點擊無效的問題，所以這裏創建了MCTabBar繼承UITabBar
  
  2、由於UITabBar是readonly的，所以我們不能直接對他進行賦值，這裏利用KVC訪問私有變量將MCTabBar賦值給”tabBar”
  具體實現
  MCTabBar

#import <UIKit/UIKit.h>

@interface MCTabBar : UITabBar
@property (nonatomic, strong) UIButton *centerBtn; //中間按鈕
@end

@implementation MCTabBar
- (instancetype)init{
    if (self = [super init]){
        [self initView];
    }
    return self;
}

- (void)initView{
    _centerBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    //  設定button大小爲適應圖片
    UIImage *normalImage = [UIImage imageNamed:@"tabbar_add"];
    _centerBtn.frame = CGRectMake(0, 0, normalImage.size.width, normalImage.size.height);
    [_centerBtn setImage:normalImage forState:UIControlStateNormal];
    //去除選擇時高亮
    _centerBtn.adjustsImageWhenHighlighted = NO;
    //根據圖片調整button的位置(圖片中心在tabbar的中間最上部，這個時候由於按鈕是有一部分超出tabbar的，所以點擊無效，要進行處理)
    _centerBtn.frame = CGRectMake(([UIScreen mainScreen].bounds.size.width - normalImage.size.width)/2.0, - normalImage.size.height/2.0, normalImage.size.width, normalImage.size.height);
    [self addSubview:_centerBtn];
}

//處理超出區域點擊無效的問題
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{
    UIView *view = [super hitTest:point withEvent:event];
    if (view == nil){
        //轉換座標
        CGPoint tempPoint = [self.centerBtn convertPoint:point fromView:self];
        //判斷點擊的點是否在按鈕區域內
        if (CGRectContainsPoint(self.centerBtn.bounds, tempPoint)){
            //返回按鈕
            return _centerBtn;
        }
    }
    return view;
}

利用KVC賦值

//MCTabBarController.m
- (void)viewDidLoad {
    [super viewDidLoad];

    _mcTabbar = [[MCTabBar alloc] init];
     [_mcTabbar.centerBtn addTarget:self action:@selector(buttonAction:) forControlEvents:UIControlEventTouchUpInside];
    //選中時的顏色
    _mcTabbar.tintColor = [UIColor colorWithRed:27.0/255.0 green:118.0/255.0 blue:208/255.0 alpha:1];
   //透明設置爲NO，顯示白色，view的高度到tabbar頂部截止，YES的話到底部
    _mcTabbar.translucent = NO;
    //利用KVC 將自己的tabbar賦給系統tabBar
    [self setValue:_mcTabbar forKeyPath:@"tabBar"];

    self.delegate = self;
    [self addChildViewControllers];
}

• 點擊旋轉
  在中間按鈕的點擊事件執行時旋轉第二個index，然後執行旋轉動畫，
  在tabbar的代理事件中監聽旋中中間按鈕的事件，然後執行旋轉動畫，其他按鈕則移除動畫，代碼如下

- (void)buttonAction:(UIButton *)button{
    self.selectedIndex = 2;//關聯中間按鈕
    [self rotationAnimation];
}

//tabbar選擇時的代理
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController{
    if (tabBarController.selectedIndex == 2){//選中中間的按鈕
        [self rotationAnimation];
    }else {
        [_mcTabbar.centerBtn.layer removeAllAnimations];
    }
}
//旋轉動畫
- (void)rotationAnimation{
    CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    rotationAnimation.toValue = [NSNumber numberWithFloat:M_PI*2.0];
    rotationAnimation.duration = 3.0;
    rotationAnimation.repeatCount = HUGE;
    [_mcTabbar.centerBtn.layer addAnimation:rotationAnimation forKey:@"key"];
}

• 其他
  這裏寫了BaseNavigationController繼承自UINavigationController，處理了push後隱藏底部UITabBar的情況，並解決了iPhonX上push時UITabBar上移的問題。

最後，附上Demo地址，如果對你有所幫助，不要吝嗇你的Star✨哦！MCTabBarDemo