Center UIButton image with inset

Question

I'd like to create a UIButton, but with a larger tap area than the image. (Ex: 40x40 button, but the image is only 20x20, centered).

Is that what imageEdgeInsets is for?

I've set it both programatically: (This is in the UIView which contains my button)

- (void)awakeFromNib {
    [_plusButton setImageEdgeInsets:UIEdgeInsetsMake(10, 10, 10, 10)];
    [_plusButton setContentMode:UIViewContentModeCenter];
}

And from storyboard

enter image description here

But neither of them seem to work.

Irfan · Accepted Answer · 2014-06-02T09:20:30.143

20

Got it I think that you set your image as a background image of the button, set it as a image then it will never stretches(remains in it original shape) and imageEdgeInsets will works on it properly.

Like:

enter image description here

edited Jun 02 '14 at 09:20

answered Jun 02 '14 at 09:15

Irfan

4,301
6
29
46

You can try different insets settings using this simple app https://github.com/tomas789/UIButtonEdgeInsets – tomas789 Jan 23 '17 at 09:07
1

UGH, this took way too long for me to find. Thank you. – Epaga Jul 20 '17 at 07:25

score 12 · Answer 2 · answered Feb 09 '18 at 12:54

12

Swift 3 & 4 Solution programmatically.

buttonOutlet.setImage(UIImage(name: "iconWhite"), for: .normal)
buttonOutlet.imageEdgeInsets = UIEdgeInsets(top: 10, left:10, bottom: 10, right: 10)

answered Feb 09 '18 at 12:54

Trevor

1,051
12
16

Elijah · Answer 3 · 2016-12-21T19:05:30.630

Here is a simple example of how to use imageEdgeInsets This will make a 20x20 button with a hittable area 10 pixels bigger all the way around (40x40)

    var expandHittableAreaAmt: CGFloat = 10
    var buttonWidth: CGFloat = 20
    var button = UIButton.buttonWithType(UIButtonType.Custom) as UIButton
    button.frame = CGRectMake(0, 0, 
        buttonWidth + expandHittableAreaAmt*2, 
        buttonWidth + expandHittableAreaAmt*2)
    button.imageEdgeInsets = UIEdgeInsetsMake(expandHittableAreaAmt, 
        expandHittableAreaAmt, expandHittableAreaAmt, expandHittableAreaAmt)
    button.setImage(UIImage(named: "buttonImage"), forState: .Normal) //20x20 image
    button.addTarget(self, action: "didTouchButton:", forControlEvents: .TouchUpInside)

Center UIButton image with inset

3 Answers3