posts - 186,  comments - 17,  views - 35万
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

 

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

    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变量未定义

修正后的代码如下:

 

1
2
3
4
5
6
7
8
9
- (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

 

posted on   ZOYOO  阅读(2343)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示