扩大按钮点击范围

场景:

UI/PM说:你这个按钮根本就点不到嘛!

攻城狮说:你给我的效果图就这么大啊!!!!!

UI/PM说:尺寸大了不好看嘛~不管,反正我点不到…你给我弄大…还有,尺寸不准变!

旁 白说: UI/PM piapiapia 的走了…..

攻城狮说:凸=.=凸

需求:

按钮尺寸不变,按钮能够接收点击事件的范围变大

分析:

其实挺简单,WWDC 2012 Session中提到了一种解决方式。它重写了按钮中的pointInside方法,临时改变按钮的Inset来扩大点击事件的接收范围,来判断触摸点是否在按钮的点击热区(接收有效点击事件,触发按钮的点击方法)内

1 2 3 4 5 6 7 8

//官方在视频中给出的示例源码 - ( BOOL)pointInside:( CGPoint)point withEvent:( UIEvent*)withEvent { CGFloat widthDelta = 44.0 - bounds.size.width; CGFloat heightDelta = 44.0 - bounds.size.height; bounds = CGRectInset(bounds, -0.5 * widthDelta, -0.5 * heightDelta); return CGRectContainsPoint(bounds, point); }

code:

我自定义一个按钮类YCBigClickAreaBtn,实现如下

.h 文件

1 2 3 4 5 6 7 8 9

#import @interface YCBigClickAreaBtn : UIButton /// 1.想要放大 btn 的点击热区的范围,注意,只在 btn 的父视图范围内有效 /// 2.这个范围是按钮的整体宽度,如果需要以中心点开始计算,则需要*2 @property ( nonatomic, assign) CGFloat clickAreaRadious; @end

.m 文件   

1 2 3 4 5 6 7 8 9 10 11 12 13 14

#import "YCBigClickAreaBtn.h" @implementation YCBigClickAreaBtn - ( BOOL)pointInside:( CGPoint)point withEvent:( UIEvent*)event { CGRect bounds = self.bounds; CGFloat widthDelta = MAX( self.clickAreaRadious - bounds.size.width, 0); CGFloat heightDelta = MAX( self.clickAreaRadious - bounds.size.height, 0); bounds = CGRectInset(bounds, -0.5 * widthDelta, -0.5 * heightDelta); return CGRectContainsPoint(bounds, point); } @end

 

调用

1 2 3 4

YCBigClickAreaBtn *tickBtn = [[YCBigClickAreaBtn alloc] init]; //扩大按钮的点击热区,并且保持最小50 tickBtn.clickAreaRadious = MAX(变量, 50);