扩大按钮点击范围

发表于   |  


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

场景:

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);
}

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

分析完了,开撸

code:

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

.h 文件

1
2
3
4
5
6
7
8
9
#import <UIKit/UIKit.h>
@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);

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


原创文章,转载请注明地址: https://kevinmky.github.io