iOS 自定义 Tabbar 样式设计 及 按钮事件热区修改

一、需求背景

现在越来越多的应用追求个性化的页面风格，类似下图的UI设计，原生的tabbar已经不能满足应用的需求，那么我们就需要对tabbar 进行自定义处理了。

截屏2020-03-03下午4.25.51.png

那么如何才能达到这种设计需求呢

1、自定义一个类继承至 UITabBar

@interface BaseTabbar : UITabBar

2、重写BaseTabbar layoutSubviews方法

- (void)layoutSubviews {
    [super layoutSubviews];
    TSUser *user = [TSUser currentUser];
    TSNationConfigModel *config = [TSNationConfigModel currentConfig];
    if (config.enabled_sns && config.enabled_sns_user_content && user.user_level == 20) {
        CGFloat index = 0;
        //每个item的宽高
        CGFloat w = self.width / (self.subviews.count+1);
        CGFloat h = self.height;
        //设置中间 按钮 publishButton的frame(-40 设置发布按钮向上偏移量 )
        self.publishButton.frame = CGRectMake(2 * w, -40 , w, h+50);
        for (UIView *button in self.subviews) {
          if ([button isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
              //跳过中间 按钮
              if (index == 2)  index = 3;
                 button.frame = CGRectMake(index * w, 0, w, h);
                 index ++;
             }
         }
     }
}

3、到此自定义UITabBar布局已经完成 ，接下来最关键一步要即将上演， 那就是 通过KVC 将UITabBarController控制器中自带的的tabBar 替换成 我们自定义完成的BaseTabbar。

BaseTabbar *customTabBar = [[BaseTabbar alloc]init]
//使用KVC重设tabBar
 [self setValue:customTabBar forKey:@"tabBar"];

至此 自定义的Tabbar已经创建成功,快去看看是不是已经是符合产品需求的布局吧，大老爷你以为到此就结束了吗，当然还有请继续往下看。。。

二、中间按钮 超出 UITabBar（见图一 按钮3部分）不响应事件问题处理

父视图是图中蓝色框大小，中间按钮凸起部分在视图外，在这种情况下如果我们不做任何处理，点击图中红色区域是无法被响应的。

响应链在这里就不过多介绍了，我们主要介绍事件分发时是如何找到最合适的事件处理者。
这里需要了解两个方法：

// 判断点击区域是否在当前视图范围内
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
// 最适合处理事件的试图
View- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event

方法一用于判断点击区域是否在当前视图范围内
方法二用于寻找最适合的View

我们以上图的例子进行说明，暂时称呼它为tabbar，其视图范围为图中1区域，中间凸起部分button在视图外的部分为2区域，两者重合部分为3区域。
在点击1、2、3区域时都会先调用tabbar的- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event，只不过返回值不同，结果不同，我们详细来看看会发生什么。

1.1、点击区域 -> 1

tabbar的方法一返回YES，接着会去遍历tabbar上所有子控件并调用子控件中的方法一，也就是会调用button的方法一，由于button不在1区域内，所以button的方法一返回NO，并且button的方法二返回null，然后调用tabbar的方法二并返回self即tabbar本身处理点击事件。

2013977-9e08ba1bbbce13ed.jpeg

1.2、点击区域 -> 2

tabbar的方法一返回YES，接着会去遍历tabbar上所有子控件并调用子控件中的方法一，也就是会调用button的方法一，所以button的方法一返回YES，并且button的方法二返回本身，然后调用tabbar的方法二并返回button，最终由button处理点击事件。

2013977-9eb024566ab3a575.jpeg

1.3、点击区域 -> 3

我们在自定义tabbar时，一般有两种方式：
1、将自定义的tabbar添加到原来的tabbar上。
2、利用KVC替换掉原来的tabbar。

方式一
事件分发是由下往上进行分发，在调用系统tabbar方法一的时候，返回值为NO，事件不会继续向上分发，即不会调用自定义的tabbar的那两个方法，由系统的tabbar成为事件的接收者。此时无法实现我们的需求。

方式二
我们知道最终的接收者实际上是通过tabbar的方法二的返回值决定的，所以我们只需要修改自定义tabbar的方法二的实现即可。

// 其中self.plusButton为中间凸起按钮
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
     CGPoint newPoint = [self convertPoint:point toView:self.plusButton];
     //tabbar 是否隐藏，隐藏了就不需要考虑点击了(tabbar 不展示的二级页面需要处理，否则二级页面将会触发 plusButton按钮的点击事件)
     if (self.hidden) {
           return [super hitTest:point withEvent:event];
        
     }else{
         // 判断是否属于按钮范围
         if ([self.plusButton pointInside:newPoint withEvent:event]) { 
               return self.plusButton;
         } else {
              return [super hitTest:point withEvent:event];
         }
      }
}

三、总结

在做类似这种UI时，需要将自定义tabbar通过KVC替换掉原有tabbar，并重写- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event返回合适的View去处理事件。

文章部分内容借鉴链接：(https://www.jianshu.com/p/dd39c49e7931)

文章持续更新中、希望对各位有所帮助、有问题可留言 大家共同学习.