iOS Button按钮 热区的放大

    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);
}
时间: 2024-07-30 03:48:35

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

ios之用Autolayout均匀平铺排列多个button按钮

前言: iPhone的屏幕越来越大,然而适配起来比较复杂,不得不用Autolayout来写代码,今天就简单的实现了一个均匀平铺view的功能.学会了这个功能以后,以后所有的适配都是小cass了吧!哈哈(我这么认为). 请看效果: 实现方式就不在博客里写了,直接看Demo吧,很简单的. Demo下载地址:ios之用Autolayout均匀平铺排列多个button按钮

iOS UIButton按钮

系统字体 + ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 NSArray *familyNames = [[NSArray alloc] initWithArray:[UIFont familyNames]]; NSArray *fontNames; NSInteger indFamily, indFont; for (indFamily=0; indFamily<[familyNames count]; ++indFamily) {     NSLog(@"Fa

微信小程序组件解读和分析:七、button按钮

button按钮组件说明: button,顾名思义,按钮,类似于html的button标签.我们可以设置按钮的属性,比如字体颜色大小,背景颜色等,可以给按钮绑定事件,用户点击时会触发事件. button按钮组件示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <!--index.wxml--> <view class="content">     <text class="con-text&q

js点击button按钮跳转到页面代码

www.111cn.net 编辑:smoke 来源:转载 在网页中button按钮不具备a标签的属性了,如果我们要给button 按钮增加跳转事件我们可以在它的确onclick事件上点击跳转js来实现,下面我来给大家介绍一些常用的方法. 点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢? 这样的效果可以:onclick="window.location=’新页面’" 来实现.

delphi7 怎么让button按钮跟着鼠标点击dbgrideh数据行移动

delphi7 怎么让button按钮跟着鼠标点击dbgrideh数据行移动 在 dbgrid的DBGridCellClick 事件中加上: Delphi/Pascal code 1 2 3 4 5 6 7 8 9 10 11 var   x, y : integer ;   P: TPoint; begin   GetCursorPos(P);   Edit1.Text := Format('X: %d, Y: %d',[P.X, P.Y]);   x := frMainTest.Left ;

asp.net中Button按钮点击两次才执行Onclick事件的原因

今天写了一个简单的聊天室,有登录页面和聊天室,当从登录页面跳入到聊天室过后,却发现要点击两次发送按钮才能发送到显示区,然后发送按钮正常运行. 通过不断测试,发现,第一次点击并没有执行点击事件,第二次才执行的点击事件.并且也找到了问题所在.下面用一个简单的小例子来说明: 页面Server_Transfer.aspx: <asp:Button ID="Button1" runat="server" Text="Button" OnClick=&

iOS:UIButton按钮的详解

UIButton的详细介绍: 一.按钮具有的属性: @property(nonatomic,readonly) UIButtonType buttonType;  //按钮形状类型 @property(nonatomic,readonly,retain) NSString *currentTitle;    //按钮当前文字 @property(nonatomic,readonly,retain) UIColor  *currentTitleColor;     //按钮当前文字颜色 @prop

图像状态资源的介绍~~以button按钮为例

android sdk 提供的Button按钮默认样式显得比较单调,为解决这个问题android提供了另外一种方法,通过引用资源文件来定义按钮在不同的状态下的显示样式 状态资源文件位于drawable目录下的xml文件, <?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"

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

通过尝试有两种方案可以解决这个问题,第一种方案是通过PreTranslateMessage函数在调度消息之前对消息类型进行筛选,第二种方案是重载CButton类,在重载后的类CForTestButton中新增ON_WM_LBUTTONDOWN消息以及ON_WM_LBUTTONUP消息. 第一种方案 实现原理也挺简单,在消息调度函数PreTranslateMessage函数中拦截Button按钮的句柄,之后在对应大括号内调用相关功能块即可.核心源码如下: …… …… BOOL CTestButto