扩大按钮点击范围

转至：https://kevinmky.github.io

在不改变按钮尺寸的前提下,扩大按钮的点击范围

场景:

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

{

CGFloatwidthDelta =44.0- bounds.size.width;

CGFloatheightDelta =44.0- bounds.size.height;

bounds =CGRectInset(bounds,-0.5* widthDelta,-0.5* heightDelta);

returnCGRectContainsPoint(bounds, point);

}

44是人机交互设计指南推荐的点击范围,不过既然要改,咱们就改自由点,由咱们来控制多好

分析完了,开撸

code:

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

.h 文件

1

2

3

4

5

6

7

8

9#import

@interfaceYCBigClickAreaBtn:UIButton

/// 1.想要放大 btn 的点击热区的范围,注意,只在 btn 的父视图范围内有效

/// 2.这个范围是按钮的整体宽度,如果需要以中心点开始计算,则需要*2

@property(nonatomic,assign)CGFloatclickAreaRadious;

@end

.m 文件

1

2

3

4

5

6

7

8

9

10

11

12

13

14#import"YCBigClickAreaBtn.h"

@implementationYCBigClickAreaBtn

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent*)event

{

CGRectbounds =self.bounds;

CGFloatwidthDelta = MAX(self.clickAreaRadious - bounds.size.width,0);

CGFloatheightDelta = MAX(self.clickAreaRadious - bounds.size.height,0);

bounds =CGRectInset(bounds,-0.5* widthDelta,-0.5* heightDelta);

returnCGRectContainsPoint(bounds, point);

}

@end

调用

1

2

3

4YCBigClickAreaBtn *tickBtn = [[YCBigClickAreaBtn alloc] init];

//扩大按钮的点击热区,并且保持最小50

tickBtn.clickAreaRadious =MAX(变量,50);

thx, 有用自取,欢迎交流更好的方法