美文网首页
UIButton扩大响应区域

UIButton扩大响应区域

作者: 走进科学 | 来源:发表于2017-08-02 17:56 被阅读411次

    问题

    • 在开发过程中经常会遇到设计给出的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;
    }
    

    相关文章

      网友评论

          本文标题:UIButton扩大响应区域

          本文链接:https://www.haomeiwen.com/subject/eahylxtx.html