UIButton 点击热区的扩大

前言

最近在做一个新项目,由于换了一个美工,自己也有些疏忽,致使一些按钮的图片大小不太合适,后期也没有时间让其去重做了,为了使界面和用户体验兼得,上网收集了一些扩大UIButton的点击热区的方法。

现在已了解的方法有:
- 自定义Button(透明Button遮罩)
- 自定义Button(重写Button的内部方法)(推荐*)

本Blog主要讲述第二种的实现方式及官方说明,第一种请大家自行研究

官方描述

在 iOS Human Interface Guidelines 中是这么描述的:

Make it easy for people to interact with content and controls by giving each interactive element ample spacing. Give tappable controls a hit target of about 44 x 44 points.

UIButton 点击热区的扩大_第1张图片

翻译过来是这个意思:

给每个互动的元素充足的空间,从而让用户容易操作这些内容和控件。常用的点按类控件的大小是44 x 44点(points)。

UIButton 点击热区的扩大_第2张图片

故我们现在需要将按钮的点击热区设置不小于44x44pt,否则将会很难使用。

解决方法

收集的资料中,来自包子的一篇文章挺好,讲述了一些方法,现总结一下。

重写按钮中的pointInside方法,使按钮热区不够44×44大小的先自动缩放到44×44,再判断触摸点是否在新的热区内。

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent*)event
{
    CGRect bounds = self.bounds;
    //若原热区小于44x44,则放大热区,否则保持原大小不变
    CGFloat widthDelta = MAX(44.0 - bounds.size.width, 0);
    CGFloat heightDelta = MAX(44.0 - bounds.size.height, 0);
    bounds = CGRectInset(bounds, -0.5 * widthDelta, -0.5 * heightDelta);
    return CGRectContainsPoint(bounds, point);
}

经测试表明,该方法并没有扩大自定义按钮的 frame值,只是单纯的将点击热区放大,so,不影响界面展示

用Reveal 展示测试界面:
UIButton 点击热区的扩大_第3张图片

感谢

Apple官方文档
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LayoutandAppearance.html#//apple_ref/doc/uid/TP40006556-CH54-SW1
包子
http://my.oschina.net/gejw0623/blog/362303
糖箔糊
http://isux.tencent.com/ios8-human-interface-guidelines.html#title-8

你可能感兴趣的:(iOS)