一,苹果提出的有时候不太好用  二,运行时更改 往下看

    Apple的iOS人机交互设计指南中指出,按钮点击热区应不小于44x44pt,否则这个按钮就会让用户觉得“很难用”,因为明明点击上去了,却没有任何响应。

但我们有时做自定义Button的时候,设计图上的给出按钮尺寸明显要小于这个数。例如我之前做过的自定义Slider上的Thumb只有12x12pt,做出来后我发现自己根本点不到按钮……

这个问题在WWDC 2012 Session 216视频中提到了一种解决方式。它重写了按钮中的pointInside方法,使得按钮热区不够44×44大小的先自动缩放到44×44,再判断触摸点是否在新的热区内。

 

//官方在视频中给出的示例源码
- (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);
}

Apple的iOS人机交互设计指南中指出,按钮点击热区应不小于44x44pt,否则这个按钮就会让用户觉得“很难用”,因为明明点击上去了,却没有任何响应。

但我们有时做自定义Button的时候,设计图上的给出按钮尺寸明显要小于这个数。例如我之前做过的自定义Slider上的Thumb只有12x12pt,做出来后我发现自己根本点不到按钮……

这个问题在WWDC 2012 Session 216视频中提到了一种解决方式。它重写了按钮中的pointInside方法,使得按钮热区不够44×44大小的先自动缩放到44×44,再判断触摸点是否在//官方在视频中给出的示例源码

 不过这里有两个小问题:

  • 当定义的Button.frame大于44×44时,这里仍然会将热区缩小至44×44,从而导致超过44×44的按钮热区失去响应。

  • bounds变量未定义

修正后的代码如下:

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

二: 运行时模式  UIButton+LP

//  UIButton+LP.h

#import <UIKit/UIKit.h>

@interface UIButton (LP)

@property(nonatomic,assign)CGFloat enlargedEdge;

//-(void)setEnlargedEdge:(CGFloat)enlargedEdge;

//-(float)enlargeEdge;

-(void)setEnlargedEdgeWithTop:(CGFloat)top left:(CGFloat)left bottom:(CGFloat)bottom right:(CGFloat)right;

@end

//  UIButton+LP.m

#import "UIButton+LP.h"

#import <objc/runtime.h>

@implementation UIButton (LP)

staticchar topEdgeKey;

staticchar leftEdgeKey;

staticchar bottomEdgeKey;

staticchar rightEdgeKey;

-(void)setEnlargedEdge:(CGFloat)enlargedEdge

{

    [selfsetEnlargedEdgeWithTop:enlargedEdge left:enlargedEdge bottom:enlargedEdge right:enlargedEdge];

}

-(float)enlargeEdge

{

    return [(NSNumber *)objc_getAssociatedObject(self, &topEdgeKey) floatValue];

}

-(void)setEnlargedEdgeWithTop:(CGFloat)top left:(CGFloat)left bottom:(CGFloat)bottom right:(CGFloat)right

{

    objc_setAssociatedObject(self, &topEdgeKey, [NSNumbernumberWithFloat:top], OBJC_ASSOCIATION_RETAIN_NONATOMIC);

     objc_setAssociatedObject(self, &leftEdgeKey, [NSNumbernumberWithFloat:left], OBJC_ASSOCIATION_RETAIN_NONATOMIC);

     objc_setAssociatedObject(self, &bottomEdgeKey, [NSNumbernumberWithFloat:bottom], OBJC_ASSOCIATION_RETAIN_NONATOMIC);

     objc_setAssociatedObject(self, &rightEdgeKey, [NSNumbernumberWithFloat:right], OBJC_ASSOCIATION_RETAIN_NONATOMIC);

}

-(CGRect)enlargedRect

{

    NSNumber * topEdge = objc_getAssociatedObject(self, &topEdgeKey);

    NSNumber * leftEdge = objc_getAssociatedObject(self, &leftEdgeKey);

    NSNumber * bottomEdge = objc_getAssociatedObject(self, &bottomEdgeKey);

    NSNumber * rightEdge = objc_getAssociatedObject(self, &rightEdgeKey);

    if(topEdge && leftEdge && bottomEdge && rightEdge){

        CGRect enlargedRect = CGRectMake(self.bounds.origin.x - leftEdge.floatValue, self.bounds.origin.y - topEdge.floatValue, self.bounds.size.width + rightEdge.floatValue + leftEdge.floatValue ,self.bounds.size.height + topEdge.floatValue + bottomEdge.floatValue);

        return enlargedRect;

    }else{

        returnself.bounds;

    }

}

-(UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event

{

    if(self.alpha <= 0.01 || !self.userInteractionEnabled ||self.hidden){

        returnnil;

    }

    CGRect enlargedRect = [selfenlargedRect];

    returnCGRectContainsPoint(enlargedRect, point)?self:nil;

}

@end

 

iOS Button按钮 热区的放大的更多相关文章

  1. icon图标和文字整体居中在button按钮

    icon图标和文字整体居中在button按钮 icon图标和文字整体居中 一般我们常做的button按钮是文字居中 现在这个需要icon图标和文字一起居中在背景色 <a href="# ...

  2. button 按钮,结合onclick事件,验证和提交表单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 如何在MFC界面开发中响应Button按钮的Down和Up事件

    通过尝试有两种方案可以解决这个问题,第一种方案是通过PreTranslateMessage函数在调度消息之前对消息类型进行筛选,第二种方案是重载CButton类,在重载后的类CForTestButto ...

  4. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

  5. button按钮

    button按钮只加类名不加type时,点击此按钮页面会刷新

  6. Unity3D NGUI 给button按钮添加单间事件

    Unity3D中, NGUI 给button按钮添加单间事件的方法很多,在这里只给推荐一种比较常用的方法. 推荐方法:使用UIListener. 1.给button组价添加上UIListener.选择 ...

  7. iphone中button按钮显示为圆形解决

    iphone中button按钮显示为圆形解决: 添加样式: -webkit-appearance:button; 如果需要为直角: border-radius:0 在源码中添加如:style=&quo ...

  8. 【html】button按钮的一些问题

    问题: button 按钮在不设置 type 属性时,在不同的浏览器作用不一样.举个例子: html: <!doctype html> <html lang="en&quo ...

  9. RFS_点击button按钮之后,RFS出现卡死的问题

    [html代码] <html> <head> <title> 主窗口 </title> </head> <body> <d ...

随机推荐

  1. msvc库没有安装包,编译选项选择 代码生成 MT【多线程】,C#调用

    参考提过的一个问题,封装VC++动态链接库,C#调用,并将C#程序打包为exe安装包. 感谢大神.

  2. iOS 自定义UITableViewCell

    #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...

  3. status 状态栏

    http://www.pchou.info/ios/2015/08/22/oc-statusbar.html IOS的项目多数会遇到控制状态栏和导航栏的问题,比如隐藏状态栏.控制状态栏的文字颜色等,导 ...

  4. jquery-mockjax初试

    1. 原理 jquery-mockjax是用于mock 前台ajax向后台请求的返回数据. 原理很简单 在你js代码要发送ajax请求的地方断点一下,然后比较在[引入jquery-mockjax] 和 ...

  5. HttpwebClient的四种请求方式

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷.      本文旨在发布代码,供自己参考,也供大家参考,谢谢. 正题: Ht ...

  6. 不等高cell的搭建(一)

    一.界面搭建   1.确定开发模式      如果界面是固定的,可以用xib      界面的一些内容不固定,就用纯代码      cell用什么方式去开发(我们采用纯代码和xib结合的方式)   2 ...

  7. CentOS 7 内核更新后删除旧内核

    0.当前 # uname -sr Linux -.el7.x86_64 1.搜索查询 # rpm -q kernel kernel--.el7.x86_64 kernel--.el7.x86_64 k ...

  8. csuoj 1120: 病毒

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1120 1120: 病毒 Time Limit: 3 Sec  Memory Limit: 128 ...

  9. Server.Transfer,Response.Redirect用法点睛

    Server.Transfer,Response.Redirect的区别 如果你读过很多行业杂志和 ASP.NET 示例,你会发现,大多数人使用 Response.Redirect 将用户引导到另一个 ...

  10. 活动组件(五):一个activity的例子

    建立两个Activity,一个是NormalActivity,另一个是DialogActivity.首先建立这两个Activity的布局文件,如下图: 然后编写这连个Activity,如下: 接着对这 ...