33

I want to fit my text in a UILabel, but for different iPhone the size of the UILabel is changing, as I'm using auto layout, but I cannot fix the font size, so my text is cutting out.

Is there any way I can set any constraint so that the text fits in the UILabel dynamically?

See here the text got cut, because of different screen resolution

Madan gupta
  • 668
  • 6
  • 19
Muntaqeem Labbaeik
  • 331
  • 1
  • 3
  • 7

3 Answers3

64

You should use autoshrink.

Since all iPhones have the same Compact width size class when in portrait mode, you can't rely on this to handle your label size.

Previews are for iPhone5, iPhone6 and iPhone 6+

enter image description here

In the inspector, you must select minimum font scale or minimum font size in front of Autoshrink. This enables the content to change the size of the font to fit in the label.

Here, I set minimum font scale to 0,5 so the minimum size is half of the current size (31.0). The text will try to fit until it reaches the minimum scale/size.

(Generally do not use "Tighten letter spacing" for this purpose. Tighten letter spacing uses the same font size and reduces spacing between letters. It can make the label up to 5% tighter before truncating, but it's not effective when minimum font scale/size is enabled.)

You may want to test with a wide screen device such as the iPad Pro, and also on a smaller screen such as the iPhone 4S. As a good practice you should test with different user system font sizes, you can set them in Settings>General>Accessibility>Larger Text.

Autoshrink will not adjust the font size bigger than the one set on the label, that means if you make the label the same width as the screen but leave the font size to 14, it will try to increase the font size until it reaches that size.

To make it actually work, select a big font size.

You can still combine autoshrink with size classes to change the maximum font size depending on the device/the orientation.

In case you want to use autoshrink with UIButtons, you can still set this behavior with two lines of code.

myButton.titleLabel.minimumScaleFactor = 0.5;
myButton.titleLabel.adjustsFontSizeToFitWidth = YES;
Crazyrems
  • 2,551
  • 22
  • 40
  • @Joe Blow You don't have to use a huge font size to make it work, just set the maximum font size on your label, —the one you want to use on iPad Pro. Always test on all screen sizes, you can easily have a preview with the _preview assistant editor_ as I showed. – Crazyrems May 17 '16 at 07:37
  • hi @Crazyrems - quite right; but don't forget a new machine is always being released with even more physical pixels! Thanks again for the great answer. You might find this useful ... http://stackoverflow.com/q/37266118/294884 .. or even know the answer there? – Fattie May 17 '16 at 11:22
  • @Crazyrems how can we do this for textfields or textviews? – ARS Jan 29 '18 at 12:31
  • @ARS You can do the same with text fields, but there's no public property to access the label. You'll have to browse all of its children and check if it's a label, then set the autoshrink capabilities – Crazyrems Feb 07 '18 at 10:56
  • Curiously, this only works for me if the number of Lines is set to something *other* than 1. If it's set to 1, the label text gets cropped instead of scaling down to fit the label. – Kal Jun 25 '19 at 03:31
  • @Kal the number of lines limits the text to fit that exact number of lines and crop it if necessary. You can combine both number of lines and minimum scale factor so it will fit your text to be that number or less lines long, you have to select a small scale factor (_like 0.02_) so it can greatly reduce size to fit the number of lines. If you don't want a maximum number of lines, set it to zero. – Crazyrems Jun 25 '19 at 12:59
  • @Crazyrems, in my case I have a Label within a constrained view, pinned so that the label scales to fit the view. I set the label's Minimum Font Scale factor to 0.5, which scales the type down very nicely for a smaller device like iPhone. There is only ever one line (one number actually), so logically, you'd think setting Lines to 1 should work, but in my case it doesn't—the scaling stops working completely. Set it to any other number (0, 2, 145, whatever), and the scaling starts working again! Does this behaviour make sense to you? In any case, I'm just happy to have it working. :-) – Kal Jun 26 '19 at 00:16
  • @Kal I don't remember having issues with one line labels. I guess that's a bug, maybe Apple considers one line labels should have a special treatment idk ¯\_(ツ)_/¯ – Crazyrems Jun 26 '19 at 09:44
10

Hi if you are adding UILabel from storyboard you can set different font for all available layout.

enter image description here

Mobile Apps Expert
  • 1,028
  • 1
  • 8
  • 11
  • Perfect answer thanks very much !! perfect ? because it's working with uilabel font and uibutton font !!! Autoshrink doesn't work with uibutton – James Jan 08 '17 at 17:38
  • 1
    @WilliamsOuiOui autoshrink works with `UIButton`s, a button contains a `UILabel` :). Just set the `titleLabel` autoshrink properties of your `UIButton`. I updated my answer. – Crazyrems Apr 20 '17 at 14:24
  • I have not seen this anywhere else. This is an extremely useful tool and I'm so happy I scrolled down low enough to see it. It's like the only reliable thing in auto layout... – Marshall D Aug 15 '18 at 04:51
  • Huh? I cannot see that option on my UILabel anywhere in Xcode 10.2.1. Any ideas? – Richard R Jun 12 '19 at 18:43
6

You can do this by using size classes. each display dimension using a size class, this will result in four abstract devices: Regular width-Regular Height, Regular width-Compact Height, Compact width-Regular Height and Compact width-Compact Height. The table below shows the iOS devices and their corresponding size classes.  enter image description here

To set the font size for this particular size class, first select the UILabel. Under the Attributes inspector, you should see a plus (+) button next to the font field. Click the + button and select Compact Width > Regular Height (Or as per your requirement select width & Height). ​ You will then see a new entry for the Font option, which is dedicated to that particular size class. Keep the size intact for the original Font option but change the size of wC hR (OR as per your selection) font field to required points (for example 14).

enter image description here

Madan gupta
  • 668
  • 6
  • 19
  • Thanks, this is useful, is there any other way or can I create a relation between the label size and font size and set a constraint? – Muntaqeem Labbaeik Feb 02 '16 at 13:01
  • You can use adjustsFontSizeToFitWidth property of UILable https://developer.apple.com/library/ios/documentation/UIKit/Reference/UILabel_Class/index.html#//apple_ref/occ/instp/UILabel/adjustsFontSizeToFitWidth – Madan gupta Feb 02 '16 at 13:07