1

I've got a UILabel placed inside a UINavigationBar. I want to increase the font size of that label based on the height of the navigationBar. When the navigationBar is large, I want the font size to be bigger, and when I scroll and the navigationBar shrinks, I want the font size to decrease.

What I've got so far (inside viewDidLoad):

dateLabel.text = "16. Oktober"
dateLabel.font = .boldSystemFont(ofSize: 40)
dateLabel.adjustsFontSizeToFitWidth = true
dateLabel.minimumScaleFactor = 0.5
dateLabel.backgroundColor = .white
dateLabel.numberOfLines = 1
dateLabel.lineBreakMode = .byTruncatingTail
self.navigationController?.navigationBar.addSubview(dateLabel)


dateLabel.translatesAutoresizingMaskIntoConstraints = false
dateLabel.bottomAnchor.constraint(equalTo: (self.navigationController?.navigationBar.bottomAnchor)!, constant: -16).isActive = true
dateLabel.leadingAnchor.constraint(equalTo: redView.trailingAnchor, constant: 16).isActive = true
dateLabel.widthAnchor.constraint(equalToConstant: 200).isActive = true
dateLabel.topAnchor.constraint(equalTo: (self.navigationController?.navigationBar.topAnchor)!, constant: 16).isActive = true

I set up constraints so that dateLabel shrinks based on the height of the navigationBar (which is working, as you can see in the screenshots). However, the font size of dateLabel does not change.

The screenshot shows the different states of the navigationBar when I scroll.

navigationBar

What do I have to do to decrease the font size of the dateLabel based on the height of the navigationBar? Is this possible with auto layout?

WalterBeiter
  • 2,021
  • 3
  • 23
  • 48

4 Answers4

2

UILabel has no methods automatically reducing font to fit content size or height - only width.

So you should do it by manually changing font due to size changes (don't forget to test result sizes with UILabel not NSString.sizeWithFont:: results would be slightly different).

You can try to set constraints of your container to preserve UILabel's aspect ratio. This way when you reduce height, width will be reduced too and UILabel.adjustsFontSizeToFitWidth would do it's work. Should be rough, but enough in you case and much easier and faster to implement.

UPDATE

Forgot to mention. I spoke about your concrete example. Behaviour depends on numberOfLines and lineBreakMode. Making the first != 1 and second something like .byTruncatingTail (default value) will display close to necessary (but, for example, will wrap words when width isn't enough - while you expect no wrapping at all).

kpower
  • 3,871
  • 4
  • 42
  • 62
1

You can try the snippet below.

        dateLabel.text = "16. Oktober"
        dateLabel.font = .boldSystemFont(ofSize: 40)
        dateLabel.adjustsFontSizeToFitWidth = true
        dateLabel.minimumScaleFactor = 0.5
        dateLabel.backgroundColor = .white
        dateLabel.numberOfLines = 0
        dateLabel.lineBreakMode = .byClipping
        dateLabel.backgroundColor = .orange
        dateLabel.textAlignment = .center
        self.container.addSubview(dateLabel)

It would give you the desired result. I have added a gif of example did with above snippet in Xcode playground. You can refer that.

enter image description here

Subramanian Mariappan
  • 3,736
  • 1
  • 14
  • 29
0

Yes, it is possible to achieve by setting the below properties in Attribute inspector.

  • set Autoshrink to Minimum Font Size
  • Provide the minimum font size

Please refer the attached screenshot for reference. UILabel properties for Autoshrink

Gopi Gowda
  • 49
  • 6
0

In which method you change the hight of the navigation bar, put this in there:

height = self.navigationController?.navigationBar.frame.height
dateLabel.font = .boldSystemFont(ofSize: height / 3)

Please note that I just typed it in here, might contain typo

Gábor Hertelendy
  • 179
  • 6