梯形按钮的绘制与响应处理

项目首页大改版，有个UI需求是这样的：

首页.gif

汽车票、火车票两个tab需要做成梯形的样式。并且切tab的时候，梯形的样式需要随之变化。

这边的梯形绘制是比较简单的，直接用贝塞尔曲线绘制即可：

- (void)refreshBusTabWithSel:(BOOL)bSel
{
    if (_busBGLayer) {
        [_busBGLayer removeFromSuperlayer];
    }
    CGFloat differX = -HomeTabDifferX;
    UIColor *fillColor = RGBA(0, 0, 0, 0.3);
    UIColor *titleColor = def_text_White;
    if (bSel) {
        differX = HomeTabDifferX;
        fillColor = def_text_White;
        titleColor = def_BG_Blue;
    }
    UIBezierPath *pathBus = [UIBezierPath bezierPath];
    [pathBus moveToPoint:CGPointMake(0, 0)];
    [pathBus addLineToPoint:CGPointMake(HomeProjectTabWidth/2 - differX, 0)];
    [pathBus addLineToPoint:CGPointMake(HomeProjectTabWidth/2 + differX, HomeTabHeight)];
    [pathBus addLineToPoint:CGPointMake(0 , HomeTabHeight)];
    [pathBus closePath];
    [pathBus fill];
    
    _busBGLayer = [[CAShapeLayer alloc] init];
    _busBGLayer.frame = CGRectMake(0, 0, HomeProjectTabWidth/2 + HomeTabDifferX,HomeTabHeight);
    _busBGLayer.path = pathBus.CGPath;
    _busBGLayer.fillColor = fillColor.CGColor;
    [self.btnBusTab.layer insertSublayer:_busBGLayer atIndex:0];
    [self.btnBusTab setTitleColor:titleColor forState:UIControlStateNormal];
}

主要想记录一下的是对于点击区域的处理，如何在梯形变化的时候响应正确的点击事件～

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    [super hitTest:point withEvent:event];
    CGFloat minX = HomeProjectTabWidth/2-HomeTabDifferX;
    CGFloat maxX = HomeProjectTabWidth/2+HomeTabDifferX;
    CGFloat ratio = HomeTabHeight/(HomeTabDifferX*2);
    CGFloat pointY = HomeTabHeight - point.y;
    if ([self pointInside:point withEvent:event]) {
        if (point.x <= minX) {
            return _btnBusTab;
        }
        if (point.x >= maxX) {
            return _btnTrainTab;
        }
        if (_bSelTrainTab) {
            NSDebugLog(@"@@@%d",pointY > (point.x-minX)*ratio);
            return pointY > (point.x-minX)*ratio ? _btnBusTab : _btnTrainTab;
        } else {
            NSDebugLog(@"@@@%d",pointY > (point.x-minX)*(-ratio) + HomeTabHeight);
            return pointY > (point.x-minX)*(-ratio) + HomeTabHeight ? _btnTrainTab : _btnBusTab;
        }
    } else {
        return [super hitTest:point withEvent:event];
    }
}

hitTest:withEvent:

每个UIView对象都有一个 hitTest:withEvent: 方法，这个方法是Hit-Testing过程中最核心的存在，其作用是询问事件在当前视图中的响应者，同时又是作为事件传递的桥梁。
这边重写了两个tab的父View的hitTest方法，需要特殊处理的就是中间那条斜线所在的x坐标范围。

如何处理斜线所在x区域的点击？

利用一次函数（形如y=kx+b）的概念将斜线作为一次函数放置在数学平面坐标系中，通过计算点击的坐标是在函数的上方/下方，来判断点击区域是在汽车票tab还是火车票。

y=kx.png

值得注意一下的是，当点击坐标不在这两个tab范围内的时候，需要调用一下[super hitTest:point withEvent:event]，以保证点击到坐标范围外可以响应其他本该响应的事件，而不是被我们重写的这个方法消耗掉。

注：如果对hitTest等响应链相关知识不太熟悉的，可以看一下这篇：iOS触摸事件全家桶