如何增加 UIButton 的选择区域？答案

【问题标题】：How to increase selection area of UIButton?如何增加 UIButton 的选择区域？
【发布时间】：2013-06-22 09:13:31
【问题描述】：

我以编程方式制作了UIButton

togglebutton = [UIButton buttonWithType:UIButtonTypeCustom];
togglebutton.frame = CGRectMake(42, 15, 80, 21);
[togglebutton addTarget:self action:@selector(toggleview)   
forControlEvents:UIControlEventTouchUpInside];
[togglebutton setImage:[UIImage imageNamed:@"squ.png"] forState:UIControlStateNormal];
[buttonView addSubview:togglebutton];

在上图中，它看起来像右边的按钮。现在的要求是这个按钮的选择区域应该大于uibutton图像。这样用户就可以通过触摸特定按钮附近的区域来轻松单击按钮。

[togglebutton setImageEdgeInsets: UIEdgeInsetsMake( 0, -30, 0, -25)];

我尝试设置image inset，但它却设置了image irregular。请关注这个问题。

【问题讨论】：

您是如何选择这些插图的？您还尝试了哪些其他值？
看看这个并尝试改变按钮图像的视图模式，然后它应该与插图一起工作并且图像应该保持不变 - developer.apple.com/library/ios/#documentation/WindowsViews/…
@Wain 我根据按钮和图像大小的差异设置图像插入
UIButton: Making the hit area larger than the default hit area的可能重复
我推荐这个答案uibutton-making-the-hit-area-larger-than-the-default-hit-area。也许它可以帮助我们大多数人

标签： ios objective-c uibutton

【解决方案1】：

可以通过设置按钮的contentEdgeInsets来实现，例如：

toggleButton.contentEdgeInsets = UIEdgeInsetsMake(0, 15, 0, 0); //set as you require

【讨论】：

根据属性声明，插入需要负值来增加选择区域。使用此属性调整按钮内容的有效绘图矩形的大小和重新定位。内容包括按钮图像和按钮标题。您可以为四个插图（上、左、下、右）中的每一个指定不同的值。正值会缩小或插入该边缘 - 将其移近按钮的中心。负值会扩展或扩展该边缘。
您也可以从 xcode gui 直接在情节提要中进行设置。为此，请选择您想要的按钮并选择“身份检查器”，然后添加一个名为“Rect”类型的“contentEdigeInsets”的“用户定义运行时属性”。这有时比在代码中更方便。
仅供参考：正值确实会增加按钮的可点击区域。
添加，我只是增加了按钮大小，然后将 UIEdgeInsets 设置为增加多少的正数。

【解决方案2】：

对于斯威夫特

您可以覆盖 UIView 类的 func 'pointInside' 来扩展可点击区域。

override func pointInside(point: CGPoint, withEvent event: UIEvent?) -> Bool {
    // padding : local variable of your custom UIView, CGFloat
    // you can change clickable area dynamically by setting this value.

    let newBound = CGRect(
        x: self.bounds.origin.x - padding,
        y: self.bounds.origin.y - padding,
        width: self.bounds.width + 2 * padding,
        height: self.bounds.height + 2 * padding
    )
    return CGRectContainsPoint(newBound, point)
}

这样使用，

class MyButton: UIButton {
    var padding = CGFloat(0) // default value

    //func pointInside at here!!
}

当您初始化按钮时，设置您的自定义填充。

func initButton() {
    let button = MyButton(frame: CGRect(x: 100, y: 100, width: 30, height: 30))
    button.padding = 10 // any value you want
    view.addSubview(button)
}

然后您的按钮在框架中（x：100，y：100，宽度：30，高度：30）

并且您的按钮的可点击区域可能在 (x: 90, y: 90, width: 50, height: 50) 的框架中

** 一定要检查是否与任何其他视图重叠，因为它的可点击区域比看起来要大。

Swift 3 更新

override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
    let padding = CGFloat(10)
    let extendedBounds = bounds.insetBy(dx: -padding, dy: -padding)
    return extendedBounds.contains(point)
}

【讨论】：

这是与自动布局一起使用的理想解决方案。
对于那些需要在不影响点击大小的情况下调整按钮图像的人来说也是一个理想的解决方案
即使pointInside(point:with) 方法返回true，选择器也不会被调用

【解决方案3】：

尝试使用UIButton 的contentEdgeInsets 属性。

【讨论】：

【解决方案4】：

在 xcode 9 中，您可以执行以下操作：

这意味着您必须补偿图像偏移和内容偏移以确保居中的图像定位。

【讨论】：

【解决方案5】：

下面的代码解决了我的问题。这是非常基本的方法，试试这个：

    button.contentEdgeInsets = UIEdgeInsetsMake(15, 20, 10, 10);  //Change x,y,width,height as per your requirement.

【讨论】：

【解决方案6】：

对于目标 C

创建此自定义 UIButton 类并将其分配给您的按钮。然后从 viewController 设置这些属性值。

//This is .h file
     #import <UIKit/UIKit.h>
        @interface CustomButton : UIButton
        @property (nonatomic) CGFloat leftArea;
        @property (nonatomic) CGFloat rightArea;
        @property (nonatomic) CGFloat topArea;
        @property (nonatomic) CGFloat bottomArea;
        @end



        //.m file is following
        #import "CustomButton.h
        @implementation CustomButton

        -(BOOL) pointInside:(CGPoint)point withEvent:(UIEvent *)event
        {
            CGRect newArea = CGRectMake(self.bounds.origin.x - _leftArea, self.bounds.origin.y - _topArea, self.bounds.size.width + _leftArea + _rightArea, self.bounds.size.height + _bottomArea + _topArea);

            return CGRectContainsPoint(newArea, point);
        }
        @end

【讨论】：

【解决方案7】：

在我的情况下，我的按钮图像很小，我想增加按钮区域而不增加 uibutton 图像大小，因为它看起来很模糊。所以我增加了按钮框架，然后设置按钮图像setImageEdgeInsets。 edgeInsets 的正值将缩小，负值将扩大。

self.menuButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.menuButton addTarget:self
                  action:@selector(onSideBarButtonTapped:)
        forControlEvents:UIControlEventTouchDown];
[self.menuButton setImage:[UIImage imageNamed:@"menu"]
                         forState:UIControlStateNormal];
self.menuButton.frame = CGRectMake(10, 3, 40, 40);

现在我要缩小图像大小，这样按钮就不会显得模糊了。

[self.menuButton setImageEdgeInsets:UIEdgeInsetsMake(10, 10, 10, 10)];

【讨论】：

【解决方案8】：

我会围绕该按钮创建一个 UIView，以便您可以将大小设置为任何您想要的。然后我将 UIView 的背景颜色设置为清晰的颜色（不要将不透明度设置为 0，否则将无法识别手势）

然后在uiview中添加一个UIGestureRecognizer来处理同样的IBAction

当然，很多人会鼓励/更喜欢使用 edgeInsets

【讨论】：

这绝对不是解决这个问题的正确方法。

【解决方案9】：

这是增加自定义 UIButton 的可触摸区域的示例：

UIImage *ButtonImage=[UIImage imageNamed:@"myimage.png"];
UIButton *myButton=[UIButton buttonWithType:UIButtonTypeCustom];
myButton.frame=CGRectMake(10, 25, ButtonImage.size.width/2+10, ButtonImage.size.height/2+10);
[myButton setImage:ButtonImage forState:UIControlStateNormal];
myButton.imageEdgeInsets = UIEdgeInsetsMake(5, 5, 5, 5);
[myButton addTarget:self action:@selector(crossButtonClick:) forControlEvents:UIControlEventTouchDown];
[self.view addSubview:myButton];

希望对您有所帮助。

【讨论】：