iOS开发小技巧——增加图片按钮的响应区域

Posted 2022-12-10 追到梦的魔术师

在ios的日常开发中，经常会碰到这样的需求：图片很小，但是需要它点击的“热区”很大。

方案一 控件叠加

直接将一个透明的button覆盖在imageView上，来扩大图片的点击热区，这种方法简单粗暴，但是很不优雅~

方案二 设置imageEdgeInsets

正常情况，我们为了让图片显示大小按照规定显示，就将按钮的大小设置成和图片一样，此时图片的热区就是图片的大小

    UIButton *btn = [UIButton new];
    [btn setImage:[UIImage imageNamed:@"s"] forState:UIControlStateNormal];
    btn.frame = CGRectMake(200, 200, 20, 20);
    [self.view addSubview:btn];

若想让图片显示的大小不变，只更改按钮的小，此时就需要设置按钮的imageEdgeInsets：

    UIButton *btn = [UIButton new];
    [btn setImage:[UIImage imageNamed:@"s"] forState:UIControlStateNormal];
    [btn setImageEdgeInsets:UIEdgeInsetsMake(10, 10, 10, 10)];
    btn.frame = CGRectMake(200, 200, 40, 40);
    [self.view addSubview:btn];

此时按钮大小为40x40，而图片仍然按照20x20显示。

此种方式虽然实现了增加热区的需求，但是仍然是已增加了控件大小为代价实现的。

方案三 依据响应链的原理来实现

此种方法不用以牺牲增加控件大小为代价来增加热区，是最为优雅的一种实现方式。

如果你熟悉响应链，一定知道pointInside，该函数判断当前碰触的屏幕坐标是否在当前视图中，如果不熟悉也没关系，我已经在之前的博客中进行过详细的解释：点击查看

响应链原理图：

依据响应链的原理，我们可以自定义按钮继承自UIButton，重写pointInside来扩大控件的响应区域。

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
    // 按钮中心点坐标
    float centerX = self.bounds.size.width / 2;
    float centerY = self.bounds.size.height / 2;

    // 点击位置坐标
    float pointX = point.x;
    float pointY = point.y;

    // 分别获取点击位置坐标X、Y与按钮中心坐标距离
    float dltX = fabsf(pointX - centerX);
    float dltY = fabsf(pointY - centerY);

    float width = self.frame.size.width;
    float height = self.frame.size.height;
    
    //在控件大小基础上，四周扩大10像素，来增加响应区域
    return dltX<=width/2 + 10 &&dltY<=height/2 + 10;

这样即使点击区域不在按钮上面，但是距离按钮边缘没有超过10像素，按钮仍然会认为当前碰触的屏幕坐标是在按钮控件当中，因此按钮可以成为此次操作的响应者来响应点击事件，这样就可以实现增大热区的效果。