Make font grow together with UILabel (resized by Auto Layout) - how to do it in Interface Builder?

Question

In a simple iPhone app I display a letter tile (custom UIView with an image and 2 labels) by the following code in viewDidLoad:

DraggedTile *tile = [[[NSBundle mainBundle] loadNibNamed:@"DraggedTile"
                                                   owner:self
                                                 options:nil] firstObject];
tile.frame = CGRectMake(10 + arc4random_uniform(100),
                        10 + arc4random_uniform(100),
                        kWidth,
                        kHeight);
[self.view addSubview:tile];

This works okay, but I would like to make the letter tile grow - when I supply bigger width and height parameters to the CGRectMake.

So in Xcode 5.1 Interface Builder I open the DraggedTile.xib and enable "Auto Layout".

Then for the image and letter I add constraints to the left, top, right, bottom edges of the parent.

For the letter label I also set "Lines" to 0 and "Content Compression Resistance Priority" to 1000 (here fullscreen 1 and fullscreen 2):

Then I modify the code to use bigger width and height:

tile.frame = CGRectMake(10 + arc4random_uniform(100),
                        10 + arc4random_uniform(100),
                        2 * kWidth,
                        2 * kHeight);

Here is the result:

Both the background image and the letter label seem to have grown as intended.

However the font size of the label hasn't grown.

I've searched around and I think that I need something like tile.letter.adjustsFontSizeToFitWidth = YES. But at the same time I can not use it with "Auto Layout" being on...

So my question is if there is any option in the "Interface Builder" available to make the font size grow as well?

UPDATE:

I've tried ismailgulek's suggestion to set the font size to 200 in Interface Builder and in the code tile.letter.adjustsFontSizeToFitWidth = YES and it looks promising (here fullscreen):

but I have now the problem that I have set 40px as the letter.bottom constraint in Interface Builder. But what if I need a bigger tile frame? Is there a way to use percentage instead of absolute pixel value in that constraint?

And another question is if it's possible to set the adjustsFontSizeToFitWidth somewhere in the Interface Builder or do I have to use source code for that? I've tried adding a key to the "User Defined Runtime Attributes" - but then the app crashes at the runtime:

Answer 1

adjustsFontSizeToFitWidth property of UILabel will not grow up the font size, it is only for reducing according to the documentation: Normally, the label text is drawn with the font you specify in the font property. If this property is set to YES, however, and the text in the text property exceeds the label’s bounding rectangle, the receiver starts reducing the font size until the string fits or the minimum font size is reached.

But if you set font size big enough (say 200) and set adjustsFontSizeToFitWidth to YES, i think you would get interestingly valuable results.

And do not forget to set Baseline as Align Centers, otherwise your text may not be seen properly.

Please inform us about your results.

Answer 2

For those who come here by the title and need a simple solution (after hours of investigations):

Problem example: If you use auto layout and set the UILabel height to be proportional to the screen height, you will get a frame which is low for iPhone (landscape) and high for iPad. How to adjust font height automatically?

Solution: in Interface Builder,

1. Set "Autoshrink" to "Minimum font size" and set something for the size (it affects too-wide texts, but required for our solution).
2. Set "Lines" to be 0, and make font size higher than the frame you will get in iPad.

This will cause the font to get increased automatically to the current height.

Answer 3

You can accomplish what you want by setting Autoshrink in your storyboard. It will cause the label to shrink to a minimum scale/explicit size when the screen size gets smaller. Make it work on the biggest screen size and then ensure it shrinks to the size you want in the storyboard preview.

Answer 4

You can replace the class in Interface Builder with your own derived class and do resizing there.

Example:

/**
MYLabel does exactly the same like UILabel, except that the font size will automatically shrink 
if the code is executed on an iPhone.
*/

class MYLabel: UILabel {

    var onlyOnceToken: dispatch_once_t = 0

    override func drawRect(rect: CGRect) {

        dispatch_once(&onlyOnceToken) {

            if let usedFont:UIFont = self.font {

                // define your reference size here
                let iPadHeight:CGFloat = 768
                let screenBounds = UIScreen.mainScreen().bounds
                let scale:CGFloat =  screenBounds.height / iPadHeight
                self.font = UIFont(name: usedFont.fontName, size: CGFloat(usedFont.pointSize) * scale)
            }
        }

        super.drawRect(rect)
    }
}

From now on you just need to replace the UILabel class with MYLabel in the identity inspector of IB and all your fonts automatically resize proportionally to your devices height.

If you want to just grow it together with the label size, replace

let screenBounds = UIScreen.mainScreen().bounds

with

let screenBounds = self.bounds.height

or any other custom scale formula. UIFont offers you additional measurement properties you can do a lot with this approach.

Answer 5

Also make sure you set “Line Breaks” from “Word Wrap” to “Truncate Tail.”

Answer 6

The font will not grow automatically.
You should increase/decrease it by yourself, in IB or programmatically.