titleEdgeInsets for UIButton make no sense

Question

I have an image and a title for a UIButton. I'm trying to get my image (15px in width) to be aligned left and my title to be aligned 5px left of that:

Button Example

The button is 215 in width, but I had to set my titleEdgeInset right to -44. This doesn't make sense. What are the maths to get -44?

charmingToad · Accepted Answer · 2016-11-18T18:00:22.223

4

It's because the image and title of a button are centered together by default.

For example, here's a 300px wide button with an image and text, no insets:

Looks like I need the button contents shifted left by 60 pts, so -60 left inset and 60 right inset.

button.imageEdgeInsets = UIEdgeInsetsMake(0.0, -60.0, 0.0, 60.0)
button.titleEdgeInsets = UIEdgeInsetsMake(0.0, -60.0, 0.0, 60.0)

Edit:

These insets would also work for the above example.

button.imageEdgeInsets = UIEdgeInsetsMake(0.0, -120.0, 0.0, 0.0)
button.titleEdgeInsets = UIEdgeInsetsMake(0.0, -120.0, 0.0, 0.0)

The button is centering its contents, so if you say "there are 2 more pts on the left" the button will move its contents over by 1 pt to keep them centered.

The rule is

-leftInset+rightInset=leftMargin*2

edited Nov 18 '16 at 18:00

answered Nov 18 '16 at 05:55

charmingToad

1,597
11
18

It seems that having the right edge inset brings the views out of the frame. Is that something I'm doing wrong? – D. Cohen Nov 18 '16 at 13:45
And also, if I wanted to resize my image, can I do that with this method? – D. Cohen Nov 18 '16 at 13:47
If -44 is working for you then you could also do (0.0, -22.0, 0.0, 22.0). Edited above to explain. For resizing, it depends on what you're trying to do. If you set the top insets the image will get smashed vertically, and then you could set content mode so it scales to fit... more info here http://stackoverflow.com/questions/10576593/how-to-adjust-an-uibuttons-imagesize – charmingToad Nov 18 '16 at 18:08

score 0 · Answer 2 · edited Jan 25 '22 at 04:48

It's easy to do:

In swift:

let button: UIButton = UIButton(frame: CGRect(x: 44, y: 64, width: 100, height: 40))
    
    button.backgroundColor = UIColor.clear
    button.setImage(UIImage(named: "img"), for: .normal)
    button.setTitle("hello", for: .normal)
    button.layer.borderWidth = 1
    button.layer.borderColor = UIColor.blue.cgColor
    button.layer.cornerRadius = 4
    
    // set edge inset
    button.imageEdgeInsets = UIEdgeInsets(top: 0, left: -40, bottom: 0, right: 0)
    button.titleEdgeInsets = UIEdgeInsets(top: 0, left: -20, bottom: 0, right: 0)
    
    view.addSubview(button)

In objective-c:

    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(44, 64, 100, 40);
    button.backgroundColor = [UIColor clearColor];
    [button setImage:[UIImage imageNamed:@"img"] forState:UIControlStateNormal];
    [button setTitle:@"hello" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

    button.layer.cornerRadius = 4;
    button.layer.borderColor = [UIColor blueColor].CGColor;
    button.layer.borderWidth = 1;
    // set edge inset
    button.imageEdgeInsets = UIEdgeInsetsMake(0, -40, 0, 0);
    button.titleEdgeInsets = UIEdgeInsetsMake(0, -20, 0, 0);
    [self.view  addSubview:button];

[![The result][1]][1] [1]: https://i.stack.imgur.com/FyzqB.png

I understand how it is done, I just don't understand where the numbers -40 and -30 come from. What are they in relation to the frame width? — D. Cohen, Nov 18 '16 at 02:42

score 0 · Answer 3 · answered Jul 17 '19 at 12:08

UIButton is centered by default like the other answers stated, but you can change that to achieve a more intuitive inset behaviour. Select left alignment in the attributes inspector.

Then set insets like this:

button.imageEdgeInsets = UIEdgeInsets.zero
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 0)

titleEdgeInsets for UIButton make no sense

3 Answers3