How to properly create a UIButton that resizes to the text length in Xcode 4?

Question

In Xcode 4 you should be able to design UI interfaces that do resize based on their content. Still it looks that the are some missing pieces regarding how to obtain this.

I have a button that is configured in the XIB file to resize to the right and it has plenty of space to do that.

The problem is that it doesn't seam to resize the button when the label is updated.

This can be fixed by adding a [button sizeToFit]; after the label is changed.

Still I am looking for a solution that works without adding this manual step into the code.

I mention that there is enough space to expand the button further, still sizeToFit seams to to enlarge the button but still not enough to fit the entire text.

What am I missing?

Answer 1

In XCode 4.5 and above, this can now be done by using 'Auto-layouting / Constraints'.

Major advantages are that:

1. You don't need to programatically set frames at all!
2. If done right, you don't need to bother about resetting frames for orientation changes.
3. Also, device changes needn't bother you (read, no need to code separately for different screen sizes).

A few disadvantages:

1. Not backward compatible - works only for iOS 6 and above.
2. Need to get familiarised (but will save time later on).

Coolest thing is we get to focus on declaring an intent such as:

• I want these two buttons to be of the same width; or
• I need this view to be vertically centered and extend to a max entent of 10 pts from the superview's edge; or even,
• I want this button/label to resize according to the label it is displaying!

Here is a simple tutorial to get introduced to auto-layouting: http://www.raywenderlich.com/20881/beginning-auto-layout-part-1-of-2

For a more detailed look at things, go to: http://www.techotopia.com/index.php/An_Introduction_to_Auto_Layout_in_iOS_6

It takes some time at first, but it sure looks like it will be well worth the effort.

Cheers!

Answer 2

[button sizeToFit] didn't work for me, but I've found a way using IB alone (xcode 4.5):

1. Click on the UIButton
2. in the Size inspector drag content hugging to 1 (both horizontal and vertical)
3. drag compression resistance to 999 (for both)
4. under the UIButton's constraints click on Width and change priority to 250
5. Do the same for Height
6. You can use the UIButton's inset to control padding for left/right/top/bottom

Answer 3

You need to call sizeToFit on the button after setting it's title to make it resize to fit the given title.

You can remove the manual step by subclassing UIButton, overriding the setTitle:forControlState: method and implementing the call to sizeToFit in there. Don't forget to call the super implementation, otherwise your title won't be set and bad things will happen.