Autolayout - intrinsic size of UIButton does not include title insets

Question

If I have a UIButton arranged using autolayout, its size adjusts nicely to fit its content.

If I set an image as button.image, the instrinsic size again seems to account for this.

However, if I tweak the titleEdgeInsets of the button, the layout does not account for this and instead truncates the button title.

How can I ensure that the intrinsic width of the button accounts for the inset?

Edit:

I am using the following:

[self.backButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 5, 0, 0)];

The goal is to add some separation between the image and the text.

Solution 1

You can solve this without having to override any methods or set an arbitrary width constraint. You can do it all in Interface Builder as follows.

• Intrinsic button width is derived from the title width plus the icon width plus the left and right content edge insets.

• If a button has both an image and text, they’re centered as a group, with no padding between.

• If you add a left content inset, it’s calculated relative to the text, not the text + icon.

• If you set a negative left image inset, the image is pulled out to the left but the overall button width is unaffected.

• If you set a negative left image inset, the actual layout uses half that value. So to get a -20 point left inset, you must use a -40 point left inset value in Interface Builder.

So you provide a big enough left content inset to create space for both the desired left inset and the inner padding between the icon and the text, and then shift the icon left by doubling the amount of padding you want between the icon and the text. The result is a button with equal left and right content insets, and a text and icon pair that are centered as a group, with a specific amount of padding between them.

Some example values:

// Produces a button with the layout:
// |-20-icon-10-text-20-|
// AutoLayout intrinsic width works as you'd desire.
button.contentEdgeInsets = UIEdgeInsetsMake(10, 30, 10, 20)
button.imageEdgeInsets = UIEdgeInsetsMake(0, -20, 0, 0)

Solution 2

You can get this to work in Interface Builder (without writing any code), by using a combination of negative and positive Title and Content Insets.

Update: Xcode 7 has a bug where you cannot enter negative values in the Right Inset field, but you can use the stepper control next to it to decrease the value. (Thanks Stuart)

Doing this will add 8pt of spacing between the image and the title and will increase the intrinsic width of the button by the same amount. Like this:

Solution 3

Why not override the intrinsicContentSize method on UIView? For example:

- (CGSize) intrinsicContentSize
{
    CGSize s = [super intrinsicContentSize];

    return CGSizeMake(s.width + self.titleEdgeInsets.left + self.titleEdgeInsets.right,
                      s.height + self.titleEdgeInsets.top + self.titleEdgeInsets.bottom);
}

This should tell the autolayout system that it should increase the size of the button to allow for the insets and show the full text. I'm not at my own computer, so I haven't tested this.

Solution 4

You haven't specified how you're setting the insets, so I'm guessing that you're using titleEdgeInsets because I see the same effect you're getting. If I use contentEdgeInsets instead it works properly.

- (IBAction)ChangeTitle:(UIButton *)sender {
    self.button.contentEdgeInsets = UIEdgeInsetsMake(0,20,0,20);
    [self.button setTitle:@"Long Long Title" forState:UIControlStateNormal];
}

Solution 5

And for Swift worked this:

extension UIButton {
    override open var intrinsicContentSize: CGSize {
        let intrinsicContentSize = super.intrinsicContentSize

        let adjustedWidth = intrinsicContentSize.width + titleEdgeInsets.left + titleEdgeInsets.right
        let adjustedHeight = intrinsicContentSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom

        return CGSize(width: adjustedWidth, height: adjustedHeight)
    }
}

Love U Swift

View more solutions

Comments

[Ryan Poolos]

Did you file this as a radar? It certainly appears to be a bug in the UIButton's intrinsic size calculations.

[Guillaume Algis]

I was ready to file a radar, but this actually seems to be an expected behavior. This is documented on UIButton's *EdgeInsets properties: "The insets you specify are applied to the title rectangle after that rectangle has been sized to fit the button’s text. Thus, positive inset values may actually clip the title text. [...] The button does not use this property to determine intrinsicContentSize and sizeThatFits:."

[memmons]

@GuillaumeAlgis I would argue that although this is stated behavior, it is not at all what one would expect to happen when using autolayout. I've filed a bug and would encourage others to file one as well.

[gprasant]

If you can link to the radar bug here, can we click on it and +1 on it ?

[Marco Pappalardo]

from titleEdgeInset documentation: The insets you specify are applied to the title rectangle after that rectangle has been sized to fit the button’s text. Thus, positive inset values may actually clip the title text. So by adding inset you are forcing the button to clip the text for sure

[amar]

I would suggest not using the button for UI purposes a pizza approach of UIView with UIlabel and a Transparent button on top gives a lot more flexibility.

[Ben Packard]

I am indeed using titleEdgeInsets. I need to distance the title from the image, not the image from the edge of the button. Maybe I should just use an image with some padding in it? Seems hacky though.

[Sulthan]

Buttons shouldn't be overrided as far as I know. The problem is that every button type is implemented by a different subclass.

[Maarten]

intrinsicContentSize is a method on UIView, not UIButton, so you wouldn't be messing in any UIButton methods. Apple doesnt think it's a problem: "Overriding this method allows a custom view to communicate to the layout system what size it would like to be based on its content." And the OP didn't say anything about different buttons, just the one.

[José Manuel Sánchez]

This is the solution I've used as it doesn't require subclassing. Won't work if your button has a background, but that's not usually a problem with iOS 7

[Alexey Golikov]

What is buttonWidthConstraint?

[n8tr]

This definitely works and is the solution I went with. intrinsicContentSize is indeed a method on UIView and UIButton is a subclass of UIView so of course you can override this method; nothing in Apple's docs says that you should not. Simply make a UIButton subclass using Maarten's overridden method and change your UIButton in Interface Builder to be of type YourUIButtonSubclass and it will work perfectly.

[1in9ui5t]

@AlexeyGolikov An NSLayoutConstraint -- developer.apple.com/library/mac/documentation/AppKit/Referen‌​ce/…

[N S]

This works perfectly in combination with autolayout, thank you!

[progrmr]

Seems to me intrinsicContentSize for UIButton should add in the titleEdgeInsets, I'm going to file a bug with Apple.

[Ricardo Sanchez-Saez]

I agree, and the same for imageEdgeInsets.

[Ben Flynn]

This will work with a background image if you also set the content offset of the button (positive value >= title inset).

[RyJ]

This is the better solution, as it does exactly what you want without touching intrinsicContentSize.

[smileyborg]

Yeah, as this answer explains, the reason it works is because you are adjusting Edge: Content here instead of Edge: Title or Edge: Image.

[smileyborg]

This isn't a great solution, because if the intrinsic content size of the button changes, you'd need to manually update the constant of the constraint to the new value...and knowing when the intrinsic content size of the button changes is difficult without subclassing the button.

[Bob Spryn]

Ayup. I don't use this method anymore. Surprised it was worthy of a down vote but ¯_(ツ)_/¯

[Brody Robertson]

This does NOT answer the question when using an image and needing to adjust the inset between the image and the title!

[ugur]

It's using contentEdgeInsets (which is not buggy) to let autolayout to increase button width. And move the label to empty space in the right. Clever way to workaround the title edge inset bug.

[Joris Mans]

This trick no longer works. Interface builder does no longer accept negative values in the Right field.

[Oritm]

Why not? It automatically scales with the contents, you just have to set a minimum width (which can be smaller than the to be displayed text)

[Joris Mans]

Because you define a minimum width. The entire idea of autolayout is have it done without setting any explicit (minimal) width.

[Oritm]

Its not about the width, you can set the width to 1 if you prefer, but autolayout needs to know that the width can be equal or more. I updated my answer

[Daniel Hepper]

@JorisMans that's correct. You can manually edit the storyboard as a workaround.

[Stuart]

@JorisMans You cannot type negative values in, but it worked for me by using the stepper control to the right of the text field to step down to the required negative value... go figure!

[greenisus]

This is a better solution than subclassing and overriding -intrinsicContentSize because UIButton is a class cluster, which is more difficult to subclass correctly.

[aeskreis]

This a decent solution, but it is far from ideal to have to override UIButton.

[Vinh]

Thanks for the great solution. My suggestion is: implement this as extension (Category) to get the same effect without writing the whole class

[Lord Zsolt]

This should be the first answer, why is it down here? I've tried the other 5 before finding this...

[Olivier]

A call to setNeedsUpdateConstraints can be "manually" made after updating the button title or image. You can then override updateConstraints and re-calculate buttonWidthConstraint's constant from there. This is not necessarily the best approach but it works good enough for me. YMMV ;)

[coolcool1994]

I made Right of content inset 16 to center the text in UIButton

[Tony Lin]

why the actual layout uses half of the negative left inset value?? I have encountered the same problem!

[Mike Critchley]

Simplest solution of the lot. Perfect for a view with static text. Thanks!

[Chris Conover]

You don't need the width constraint at all, the contentEdgeInset is the key, auto layout then uses that for intrinsic content size.

[kemdo]

hello. i want to use custom extension button in interfacebuilder. plz help

[funct7]

It's great that there is a workaround, but I hope this isn't used to justify the weird behavior of UIButton.

[Allison]

Even though you aren't supposed to, it's better to subclass in this case because Apple docs explicitly state that intrinsic size does not include titleEdgeInsets in its calculation and so by using an extension you are violating not just Apple's expectations but all other developers who read the docs.

[Andrew Kirna]

This makes no sense. And that fancy image is even worse...looks like there's left content padding but the value is 0??? BUT...it works...and we move on.

[Joris Mans]

You can no longer set a negative value on the right title inset, even with the stepper control.

[mazend]

I confirmed that set a negative value on the right title inset is possible on Xcode v11.3.1(11C504). It worked for me.

[Nathan Hosselton]

overriding inside an extension is unsupported and results in undefined runtime behavior. see: stackoverflow.com/a/38274660/4175475