Aligning text and image on UIButton with imageEdgeInsets and titleEdgeInsets

by

I would like to place an icon left of the two lines of text such that there’s about 2-3 pixels of space between the image and the start of text. The control itself is Center aligned horizontally (set through Interface Builder)

The button would resemble something like this:

|                  |
|[Image] Add To    |
|        Favorites |

I’m trying to configure this with contentEdgeInset, imageEdgeInsets and titleEdgeInsets to no avail. I understand that a negative value expands the edge while a positive value shrinks it to move it closer to the center.

I tried:

[button setTitleEdgeInsets:UIEdgeInsetsMake(0, -image.size.width, 0, 0)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, button.titleLabel.bounds.size.width, 0, 0)];

but this doesn’t display it correctly. I’ve been tweaking the values but going from say -5 to -10 on the left inset value doesn’t appear to move it in expected manner. -10 will scoot the text all the way to the left so I expected -5 to scoot it half way from the left side but it doesn’t.

What’s the logic behind insets? I’m not familiar with image placements and related terminology.

I used this SO question as a reference but something about my values isn’t right.
UIButton: how to center an image and a text using imageEdgeInsets and titleEdgeInsets?

19 Answers
19

Leave a Comment