1）前言

仿閑魚APP己儒，中間凸起Tab頁面讶凉；

屏幕快照 2019-09-30 下午4.54.48.png

2）解決方案

首先創(chuàng)建CCTabBarController繼承于UITabBarController声滥，
然后和常規(guī)一樣創(chuàng)建5個(gè)Item,中間的按鈕不設(shè)置圖片跺株，代碼如下

  //添加子控制器
- (void)addChildViewControllers{
   CCFishViewController *fish = [[CCFishViewController alloc] init];
   fish.tabBarItem.title = @"閑魚";
   fish.tabBarItem.image = [UIImage imageNamed:@"home_normal"];
   fish.tabBarItem.selectedImage = [UIImage imageNamed:@"home_highlight"];

   CCPondViewController *pond = [[CCPondViewController alloc] init];
   pond.tabBarItem.title = @"魚塘";
   pond.tabBarItem.image = [UIImage imageNamed:@"fishpond_normal"];
   pond.tabBarItem.selectedImage = [UIImage imageNamed:@"fishpond_highlight"];
   //不設(shè)置圖片,先占位
  CCReleaseViewController *release = [[CCReleaseViewController alloc] init];
  release.tabBarItem.title = @"發(fā)布";

  CCNewsViewController *news = [[CCNewsViewController alloc] init];
  news.tabBarItem.title = @"消息";
  news.tabBarItem.image = [UIImage imageNamed:@"message_normal"];
  news.tabBarItem.selectedImage = [UIImage imageNamed:@"message_highlight"];

  CCManagerViewController *manager = [[CCManagerViewController alloc] init];
  manager.tabBarItem.title = @"我的";
  manager.tabBarItem.image = [UIImage imageNamed:@"account_normal"];
  manager.tabBarItem.selectedImage = [UIImage imageNamed:@"account_highlight"];

  NSArray *itemArrays   = @[fish,pond,release,news,manager];
  self.viewControllers  = itemArrays;
  self.tabBar.tintColor = [UIColor blackColor];
}

這樣實(shí)現(xiàn)后苍日，應(yīng)該是這個(gè)樣子的

屏幕快照 2019-09-30 下午4.07.36.png

3)添加凸起按鈕

現(xiàn)在我們可以在UITabBar上添加凸起按鈕,讓他的位置在沒有設(shè)置的中間按鈕偏上宅楞，
按鈕的點(diǎn)擊事件和中間按鈕點(diǎn)擊事件綁定针姿。
??這樣直接添加會有問題，
①因?yàn)樘砑拥陌粹o超過了UITabBar的父視圖厌衙，這樣超過了區(qū)域點(diǎn)擊按鈕會沒有響應(yīng)（如圖紅色區(qū)域所示）

屏幕快照 2019-09-30 下午4.04.41.png

②由于UITabBar是只讀的距淫，所以我們不能直接對他進(jìn)行賦值，利用KVC訪問私有變量將CCTabBar賦值給 UITabBar

代碼實(shí)現(xiàn)如下

CCTabBar.h文件

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

CCTabBar.m文件

- (instancetype)init{
   self = [super init];
   if (self) {
    [self setUI];
   }
   return self;
}

//設(shè)置UI布局
- (void)setUI{
  self.centerBtn = [UIButton buttonWithType:UIButtonTypeCustom];
  //設(shè)置button大小為圖片尺寸
  UIImage *normalImage = [UIImage imageNamed:@"post_normal"];
  self.centerBtn.frame = CGRectMake(0,0,normalImage.size.width,normalImage.size.height);
  [self.centerBtn setImage:normalImage forState:UIControlStateNormal];
  //去除選擇時(shí)高亮
  self.centerBtn.adjustsImageWhenHighlighted = NO;
  //設(shè)置圖片位置居中顯示
  self.centerBtn.frame = CGRectMake(([UIScreen mainScreen].bounds.size.width - normalImage.size.width)/2, - normalImage.size.height/2,normalImage.size.width, normalImage.size.height);
  [self addSubview:self.centerBtn];
}

//解決超出superView點(diǎn)擊無效問題
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{
  UIView *view = [super hitTest:point withEvent:event];
  if (!view){
    //轉(zhuǎn)換坐標(biāo)
    CGPoint tempPoint = [self.centerBtn convertPoint:point fromView:self];
    //判斷點(diǎn)擊的點(diǎn)是否在按鈕區(qū)域內(nèi)
    if (CGRectContainsPoint(self.centerBtn.bounds, tempPoint)){
        //返回按鈕
        return self.centerBtn;
    }
  }
  return view;
}

利用KVC賦值

// CCTabBarController.m文件

 @interface CCTabBarController ()<UITabBarControllerDelegate>
 @property (nonatomic,strong)CCTabBar    *tabBar;
 @end

 - (void)viewDidLoad {
   [super viewDidLoad];

   self.delegate = self;

   self.tabBar = [[CCTabBar alloc] init];
   [self.tabBar.centerBtn addTarget:self action:@selector(buttonAction) forControlEvents:UIControlEventTouchUpInside];
   //設(shè)置背景顏色不透明
   self.tabBar.translucent = NO;
   //利用KVC,將自定義tabBar,賦給系統(tǒng)tabBar
   [self setValue:self.tabBar forKeyPath:@"tabBar"];

   [self addChildViewControllers];
}

點(diǎn)擊按鈕事件

- (void)buttonAction{
   //關(guān)聯(lián)中間按鈕
   self.selectedIndex = 2;
   //播放動畫
   [self rotationAnimation];
}

tabBar相關(guān)代理事件

- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController{
   if (tabBarController.selectedIndex == 2){
    //選中中間的按鈕
    [self rotationAnimation];
   }else {
    [self.tabBar.centerBtn.layer removeAllAnimations];
   }
}

旋轉(zhuǎn)動畫

- (void)rotationAnimation{
  CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
  rotationAnimation.toValue = [NSNumber numberWithFloat:M_PI*0.5];
  rotationAnimation.duration = 1.0;
  rotationAnimation.repeatCount = DOMAIN;
  [self.tabBar.centerBtn.layer addAnimation:rotationAnimation forKey:@"key"];
}

4）相關(guān)連接

Demo地址