仿闲鱼APP,中间凸起tab页面

1）前言

仿闲鱼APP，中间凸起Tab页面；

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

2）解决方案

首先创建CCTabBarController继承于UITabBarController，
然后和常规一样创建5个Item,中间的按钮不设置图片，代码如下

  //添加子控制器
- (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"];
   //不设置图片,先占位
  CCReleaseViewController *release = [[CCReleaseViewController alloc] init];
  release.tabBarItem.title = @"发布";

  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];
}

这样实现后，应该是这个样子的

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

3)添加凸起按钮

现在我们可以在UITabBar上添加凸起按钮,让他的位置在没有设置的中间按钮偏上，
按钮的点击事件和中间按钮点击事件绑定。
⚠️这样直接添加会有问题，
①因为添加的按钮超过了UITabBar的父视图，这样超过了区域点击按钮会没有响应（如图红色区域所示）

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

②由于UITabBar是只读的，所以我们不能直接对他进行赋值，利用KVC访问私有变量将CCTabBar赋值给 UITabBar

代码实现如下

CCTabBar.h文件

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

CCTabBar.m文件

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

//设置UI布局
- (void)setUI{
  self.centerBtn = [UIButton buttonWithType:UIButtonTypeCustom];
  //设置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];
  //去除选择时高亮
  self.centerBtn.adjustsImageWhenHighlighted = NO;
  //设置图片位置居中显示
  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点击无效问题
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{
  UIView *view = [super hitTest:point withEvent:event];
  if (!view){
    //转换坐标
    CGPoint tempPoint = [self.centerBtn convertPoint:point fromView:self];
    //判断点击的点是否在按钮区域内
    if (CGRectContainsPoint(self.centerBtn.bounds, tempPoint)){
        //返回按钮
        return self.centerBtn;
    }
  }
  return view;
}

利用KVC赋值

// CCTabBarController.m文件

 @interface CCTabBarController ()
 @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];
   //设置背景颜色不透明
   self.tabBar.translucent = NO;
   //利用KVC,将自定义tabBar,赋给系统tabBar
   [self setValue:self.tabBar forKeyPath:@"tabBar"];

   [self addChildViewControllers];
}

点击按钮事件

- (void)buttonAction{
   //关联中间按钮
   self.selectedIndex = 2;
   //播放动画
   [self rotationAnimation];
}

tabBar相关代理事件

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

旋转动画

- (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）相关连接

Demo地址