iOS扩大按钮的点击范围

前言

• 前端页面开发中,经常用到按钮,按钮的图片是比较小的,但是需要扩大按钮的点击范围.这时,我们一般会想到在响应链上动手

• hitTest

/// 返回视图层次结构(包括它自己)中包含指定点的接收方的最远后代。
func hitTest(_ point: CGPoint, 
        with event: UIEvent?) -> UIView?

• 这个方法通过调用每个子视图的point(inside:with:)方法来遍历视图层次结构，以确定哪个子视图应该接收触摸事件。如果point(inside:with:)返回true，则子视图的层次结构将被类似地遍历，直到找到包含指定点的最前面的视图为止。如果一个视图不包含这个点，它的视图层次结构分支将被忽略。你很少需要自己调用这个方法，但是你可以覆盖它来隐藏子视图中的触摸事件。
• 此方法忽略隐藏的、禁用用户交互或alpha级别小于0.01的视图对象。在确定命中时，此方法不考虑视图的内容。因此，即使指定的点位于视图内容的透明部分，视图仍然可以被返回。
• 位于接收方边界之外的点永远不会被报告为命中，即使它们实际上位于接收方的子视图之一。如果当前视图的clipsToBounds属性设置为false并且受影响的子视图扩展超出了视图的边界，就会发生这种情况。

实现方案

• 扩大的点击区域,我们不用去给按钮添加上下左右单独的属性,直接用UIEdgeInsets即可,方便直观,不容易设置错误
• 下面是实现代码

open class EnlargeEdgeButton: UIButton {
    
    open var enlargeEdge: UIEdgeInsets = .zero
    
    open override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        if alpha == 0 || isHidden == true || enlargeEdge == .zero {
            return super.hitTest(point, with: event)
        }
        let rect = bounds.enlargeRect(edgeInsets: enlargeEdge)
        return rect.contains(point) ? self : nil
    }
}

extension CGRect {
    public func enlargeRect(edgeInsets: UIEdgeInsets) -> CGRect {
        return CGRect(x: minX - edgeInsets.left, y: minY - edgeInsets.top, width: width + (edgeInsets.left + edgeInsets.right), height: height + (edgeInsets.top + edgeInsets.bottom))
    }
}

• 这是特别需要注意的是,按钮的几种特殊情况,需要做处理

1. alpha == 0,透明度为0时,相当是按钮是看不见的,那么这时,我们的期望时按钮是隐藏状态的,如果这里加了扩大按钮点击范围的代码,会导致虽然按钮是隐藏的,但是点击按钮的放大区域,还是会响应事件,这会出现一个非常奇怪的bug,而且bug还不好找,本人在工作中就出现过这个失误
   2.isHidden == true,同理,隐藏状态时更不应该去扩大点击范围了
   3.enlargeEdge == .zero,扩大区域的edge为.zero,相当于是没有加点击范围,那就可以直接调用父类方法,不做额外处理

分类 VS 子类化

• 个人觉得的分类的侵入性比较大,如果给UIButton添加分类属性enlargeEdge,导致任何继承自UIButton的类都有这个功能.有可能人家压根就不想要这个功能,但是你本来就有这个功能
• 子类化的话,你想要这个功能,你就用这个类,或者继承自这个类,能够做到精准控制