How to increase selection area of UIButton?

Question

I have made the UIButton programmatically

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];

It is looked as the right button in above image. Now the requirement is that the selection area of this button should be more than then the uibutton image. So that the user will be able to click the button easily by touching on near by area of particular button.

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

I tried to set the image inset but it making the image irregular. Please look upon this issue.

Answer 1

You can achieve this by setting the button's contentEdgeInsets, for example:

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

Answer 2

For Swift

You can override func 'pointInside' of UIView class to expand clickable area.

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

Use like this,

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

    //func pointInside at here!!
}

When you init your button, set your custom padding.

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

then your button is in frame (x: 100, y:100, width: 30, height: 30)

and your button's clickable area might be in the frame with (x: 90, y: 90, width: 50, height: 50)

** Be sure to check overlapping with any other view, because its clickable area is larger than it looks.

Update for 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)
}

Answer 3

Try using contentEdgeInsets property of the UIButton.

Answer 4

in xcode 9 you can do the following:

that means you have to compensate the image offset and content offset to ensure a centered image positioning.

Answer 5

The Below code solves my problem.This is very basic way, Try this :

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

Answer 6

For Objective C

Create this custom UIButton Class and assign it into your button. Then set these properties values from 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

Answer 7

In my case, my button image is small and I want to increase button area while not increasing uibutton image size because it will look blurred. So I increased button frame and then set button image setImageEdgeInsets. Positive values for edgeInsets will shrink and negative values will expand.

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

Now I am going to shrink image size so that button will not look blurred.

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

Answer 8

I would create a UIView around that button so that you can set the size to whatever you want. Then I'd set the UIView's background color to the clear color (do not set opacity to 0 or the gesture won't be recognized)

Then add a UIGestureRecognizer to the uiview to handle the same IBAction

Of course, many people will encourage/prefer the use of the edgeInsets

Answer 9

Here is an example of increasing touchable area of custom 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];

Hope it would be helpful.