CODEWITHSUNDEEP
iosobjective-cuibutton
Minkle Garg
Minkle Garg

Reputation: 1395

How to increase selection area of UIButton?

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

enter image description here

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.

Upvotes: 28

Views: 26850

Answers (9)

Syed Sadrul Ullah Sahad
Syed Sadrul Ullah Sahad

Reputation: 1312

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

Upvotes: 1

olidem
olidem

Reputation: 2121

in xcode 9 you can do the following:

xcode 9 screenshot

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

Upvotes: 3

Mark
Mark

Reputation: 513

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

Upvotes: 19

i.AsifNoor
i.AsifNoor

Reputation: 587

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

Upvotes: 0

Suraj Sonawane
Suraj Sonawane

Reputation: 2484

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.

Upvotes: 2

Nitin Gohel
Nitin Gohel

Reputation: 49710

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

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

Upvotes: 47

Santosh
Santosh

Reputation: 1302

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.

Upvotes: -2

kevinl
kevinl

Reputation: 4214

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

Upvotes: -2

Adithya
Adithya

Reputation: 4705

Try using contentEdgeInsets property of the UIButton.

Upvotes: 3

Related Questions