问题

• 在开发过程中经常会遇到设计给出的button尺寸偏小的情况.这种UIButton在使用中会非常难点击,极大降低了用户体验.

设计稿.png

• iOS 人机交互规范里提出44x44 point是最小点触面积.上图的按钮有效区域远小于推荐大小.

iOS人机交互规范.png

解决方案

• 默认情况下UIButton的响应区域和的实际大小相同.UIButton也没有提供方法和属性让我们去直接修改其响应区域的大小.

• 网络上也提供了许多解决方案.比如给UIButton设置一个较大的frame.然后里面的可视区域较小.
  但是这种方法也有很大局限性,如布局逻辑混乱.一旦要设置border相关属性UIButton的真实大小就露馅了.

• 这里给出一种较优的解决方案.重写UIButton的- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent*)event方法

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

{

   //获取当前button的实际大小
    CGRect bounds = self.bounds;

    //若原热区小于44x44，则放大热区，否则保持原大小不变

    CGFloat widthDelta = MAX(44.0 - bounds.size.width, 0);

    CGFloat heightDelta = MAX(44.0 - bounds.size.height, 0);
    //扩大bounds

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

    //如果点击的点 在 新的bounds里，就返回YES

    return CGRectContainsPoint(bounds, point);

}

• - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent*)event方法是判断一个touch事件的point是否落在其bounds内部,默认的写法应该是:

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
{
    return CGRectContainsPoint(self.bounds, point); 
}

• 对比两个方法我们发现其实是在判断的时候对响应区域的bounds进行了修改.
  CGRectInset(view, 10, 20)方法表示对rect大小进行修改

CGRectInset

• 但是很多时候我们需要自定义响应区域大小而不是写死成>=44.同时为了减少代码侵入性.我们更希望这个功能是通过分类而非继承的方式加入.
  因此我们必须使用runtime机制去添加UIButton的属性使其记住自己的bounds的变化量.因此分类代码如下:

UIButton+Custom.h

#import <UIKit/UIKit.h>

@interface UIButton (Custom)

/**
 *  同时向按钮的四个方向延伸响应面积
 *
 *  @param size 间距
 */
- (void)setEnlargeEdge:(CGFloat) size;

/**
 *  向按钮的四个方向延伸响应面积
 *
 *  @param top    上间距
 *  @param left   左间距
 *  @param bottom 下间距
 *  @param right  右间距
 */
- (void)setEnlargeEdgeWithTop:(CGFloat) top left:(CGFloat) left bottom:(CGFloat) bottom right:(CGFloat) right;

@end

UIButton+Custom.m

#import "UIButton+Custom.h"

@implementation UIButton (Custom)

static char topNameKey;
static char leftNameKey;
static char bottomNameKey;
static char rightNameKey;

- (void)setEnlargeEdge:(CGFloat) size
{
    objc_setAssociatedObject(self, &topNameKey,   [NSNumber numberWithFloat:size], OBJC_ASSOCIATION_COPY_NONATOMIC);
    objc_setAssociatedObject(self, &leftNameKey,  [NSNumber numberWithFloat:size], OBJC_ASSOCIATION_COPY_NONATOMIC);
    objc_setAssociatedObject(self, &bottomNameKey,[NSNumber numberWithFloat:size], OBJC_ASSOCIATION_COPY_NONATOMIC);
    objc_setAssociatedObject(self, &rightNameKey, [NSNumber numberWithFloat:size], OBJC_ASSOCIATION_COPY_NONATOMIC);
}

- (void)setEnlargeEdgeWithTop:(CGFloat) top left:(CGFloat) left bottom:(CGFloat) bottom right:(CGFloat) right
{
    objc_setAssociatedObject(self, &topNameKey,   [NSNumber numberWithFloat:top],   OBJC_ASSOCIATION_COPY_NONATOMIC);
    objc_setAssociatedObject(self, &leftNameKey,  [NSNumber numberWithFloat:left],  OBJC_ASSOCIATION_COPY_NONATOMIC);
    objc_setAssociatedObject(self, &bottomNameKey,[NSNumber numberWithFloat:bottom],OBJC_ASSOCIATION_COPY_NONATOMIC);
    objc_setAssociatedObject(self, &rightNameKey, [NSNumber numberWithFloat:right], OBJC_ASSOCIATION_COPY_NONATOMIC);
}

- (CGRect)enlargedRect
{
    NSNumber* topEdge    = objc_getAssociatedObject(self, &topNameKey);
    NSNumber* rightEdge  = objc_getAssociatedObject(self, &rightNameKey);
    NSNumber* bottomEdge = objc_getAssociatedObject(self, &bottomNameKey);
    NSNumber* leftEdge   = objc_getAssociatedObject(self, &leftNameKey);

    if (topEdge && rightEdge && bottomEdge && leftEdge)
    {
        return CGRectMake(self.bounds.origin.x    - leftEdge.floatValue,
                          self.bounds.origin.y    - topEdge.floatValue,
                          self.bounds.size.width  + leftEdge.floatValue + rightEdge.floatValue,
                          self.bounds.size.height + topEdge.floatValue + bottomEdge.floatValue);

    } else
    {
        return self.bounds;
    }
}

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
{
    CGRect rect = [self enlargedRect];

    if (CGRectEqualToRect(rect, self.bounds))
    {
        return [super pointInside:point withEvent:event];
    }
    return CGRectContainsPoint(rect, point) ? YES : NO;
}
@end

PS

UIView也可通过此原理修改其响应区域重写其- (UIView*)hitTest:(CGPoint) point withEvent:(UIEvent*) event及可

- (UIView*)hitTest:(CGPoint) point withEvent:(UIEvent*) event
{
    CGRect rect = [self enlargedRect];

    if (CGRectEqualToRect(rect, self.bounds))
    {
        return [super hitTest:point withEvent:event];
    }
    return CGRectContainsPoint(rect, point) ? self : nil;
}