Aligning text and image on UIButton with imageEdgeInsets and titleEdgeInsets

I'm a little late to this party, but I think I have something useful to add.

Kekoa's answer is great but, as RonLugge mentions, it can make the button no longer respect sizeToFit or, more importantly, can cause the button to clip its content when it is intrinsically sized. Yikes!

First, though,

A brief explanation of how I believe imageEdgeInsets and titleEdgeInsets work:

The docs for imageEdgeInsets have the following to say, in part:

Use this property to resize and reposition the effective drawing rectangle for the button image. You can specify a different value for each of the four insets (top, left, bottom, right). A positive value shrinks, or insets, that edge—moving it closer to the center of the button. A negative value expands, or outsets, that edge.

I believe that this documentation was written imagining that the button has no title, just an image. It makes a lot more sense thought of this way, and behaves how UIEdgeInsets usually do. Basically, the frame of the image (or the title, with titleEdgeInsets) is moved inwards for positive insets and outwards for negative insets.

OK, so what?

I'm getting there! Here's what you have by default, setting an image and a title (the button border is green just to show where it is):

When you want spacing between an image and a title, without causing either to be crushed, you need to set four different insets, two on each of the image and title. That's because you don't want to change the sizes of those elements' frames, but just their positions. When you start thinking this way, the needed change to Kekoa's excellent category becomes clear:

@implementation UIButton(ImageTitleCentering)- (void)centerButtonAndImageWithSpacing:(CGFloat)spacing {    CGFloat insetAmount = spacing / 2.0;    self.imageEdgeInsets = UIEdgeInsetsMake(0, -insetAmount, 0, insetAmount);    self.titleEdgeInsets = UIEdgeInsetsMake(0, insetAmount, 0, -insetAmount);}@end

But wait, you say, when I do that, I get this:

Oh yeah! I forgot, the docs warned me about this. They say, in part:

This property is used only for positioning the image during layout. The button does not use this property to determine intrinsicContentSize and sizeThatFits:.

But there is a property that can help, and that's contentEdgeInsets. The docs for that say, in part:

The button uses this property to determine intrinsicContentSize and sizeThatFits:.

That sounds good. So let's tweak the category once more:

@implementation UIButton(ImageTitleCentering)- (void)centerButtonAndImageWithSpacing:(CGFloat)spacing {    CGFloat insetAmount = spacing / 2.0;    self.imageEdgeInsets = UIEdgeInsetsMake(0, -insetAmount, 0, insetAmount);    self.titleEdgeInsets = UIEdgeInsetsMake(0, insetAmount, 0, -insetAmount);    self.contentEdgeInsets = UIEdgeInsetsMake(0, insetAmount, 0, insetAmount);}@end

And what do you get?

Looks like a winner to me.

Working in Swift and don't want to do any thinking at all? Here's the final version of the extension in Swift:

extension UIButton {    func centerTextAndImage(spacing: CGFloat) {        let insetAmount = spacing / 2        let isRTL = UIView.userInterfaceLayoutDirection(for: semanticContentAttribute) == .rightToLeft        if isRTL {            previewButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: insetAmount, bottom: 0, right: -insetAmount)            previewButton.titleEdgeInsets = UIEdgeInsets(top: 0, left: -insetAmount, bottom: 0, right: insetAmount)            previewButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: -insetAmount, bottom: 0, right: -insetAmount)        } else {            previewButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: -insetAmount, bottom: 0, right: insetAmount)            previewButton.titleEdgeInsets = UIEdgeInsets(top: 0, left: insetAmount, bottom: 0, right: -insetAmount)            previewButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: insetAmount, bottom: 0, right: insetAmount)        }    }}

I agree the documentation on imageEdgeInsets and titleEdgeInsets should be better, but I figured out how to get the correct positioning without resorting to trial and error.

The general idea is here at this question, but that was if you wanted both text and image centered. We don't want the image and text to be centered individually, we want the image and the text to be centered together as a single entity. This is in fact what UIButton already does so we simply need to adjust the spacing.

CGFloat spacing = 10; // the amount of spacing to appear between image and titletabBtn.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, spacing);tabBtn.titleEdgeInsets = UIEdgeInsetsMake(0, spacing, 0, 0);

I also turned this into a category for UIButton so it will be easy to use:

UIButton+Position.h

@interface UIButton(ImageTitleCentering)-(void) centerButtonAndImageWithSpacing:(CGFloat)spacing;@end

UIButton+Position.m

@implementation UIButton(ImageTitleCentering)-(void) centerButtonAndImageWithSpacing:(CGFloat)spacing {    self.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, spacing);    self.titleEdgeInsets = UIEdgeInsetsMake(0, spacing, 0, 0);}@end

So now all I have to do is:

[button centerButtonAndImageWithSpacing:10];

And I get what I need every time. No more messing with the edge insets manually.

EDIT: Swapping Image and Text

In response to @Javal in comments

Using this same mechanism, we can swap the image and the text. To accomplish the swap, simply use a negative spacing but also include the width of the text and the image. This will require frames to be known and layout performed already.

[self.view layoutIfNeeded];CGFloat flippedSpacing = -(desiredSpacing + button.currentImage.size.width + button.titleLabel.frame.size.width);[button centerButtonAndImageWithSpacing:flippedSpacing];

Of course you will probably want to make a nice method for this, potentially adding a second category method, this is left as an exercise to the reader.

Also if you want to make something similar to

You need

1.Set horizontal and vertical alignment for button to

2. Find all required values and set UIImageEdgeInsets

           CGSize buttonSize = button.frame.size;        NSString *buttonTitle = button.titleLabel.text;        CGSize titleSize = [buttonTitle sizeWithAttributes:@{ NSFontAttributeName : [UIFont camFontZonaProBoldWithSize:12.f] }];        UIImage *buttonImage = button.imageView.image;        CGSize buttonImageSize = buttonImage.size;        CGFloat offsetBetweenImageAndText = 10; //vertical space between image and text        [button setImageEdgeInsets:UIEdgeInsetsMake((buttonSize.height - (titleSize.height + buttonImageSize.height)) / 2 - offsetBetweenImageAndText,                                                    (buttonSize.width - buttonImageSize.width) / 2,                                                    0,0)];                        [button setTitleEdgeInsets:UIEdgeInsetsMake((buttonSize.height - (titleSize.height + buttonImageSize.height)) / 2 + buttonImageSize.height + offsetBetweenImageAndText,                                                    titleSize.width + [button imageEdgeInsets].left > buttonSize.width ? -buttonImage.size.width  +  (buttonSize.width - titleSize.width) / 2 : (buttonSize.width - titleSize.width) / 2 - buttonImage.size.width,                                                    0,0)];

This will arrange your title and image on button.

Also please note update this on each relayout

Swift

import UIKitextension UIButton {    // MARK: - UIButton+Aligment    func alignContentVerticallyByCenter(offset:CGFloat = 10) {        let buttonSize = frame.size        if let titleLabel = titleLabel,            let imageView = imageView {            if let buttonTitle = titleLabel.text,                let image = imageView.image {                let titleString:NSString = NSString(string: buttonTitle)                let titleSize = titleString.sizeWithAttributes([                    NSFontAttributeName : titleLabel.font                    ])                let buttonImageSize = image.size                let topImageOffset = (buttonSize.height - (titleSize.height + buttonImageSize.height + offset)) / 2                let leftImageOffset = (buttonSize.width - buttonImageSize.width) / 2                imageEdgeInsets = UIEdgeInsetsMake(topImageOffset,                                                   leftImageOffset,                                                   0,0)                let titleTopOffset = topImageOffset + offset + buttonImageSize.height                let leftTitleOffset = (buttonSize.width - titleSize.width) / 2 - image.size.width                titleEdgeInsets = UIEdgeInsetsMake(titleTopOffset,                                                   leftTitleOffset,                                                   0,0)            }        }    }}