How to scale the button text based on screen design swift?

Question

In my project, i am using scaling for UI components. I am able to scale the text for UIlabel like below and it's working in all device:

1. Autoshrinks - minimum font scale set it to 0.5

2. No of lines - 0

3. Enable dynamic type in attribute inspector

4. adjustFontSizeToWidth to true

But when i am trying to adjust font for UI Button using beolow steps and i am not able to scale the text for UI button.

button.titleLabel?.numberOfLines = 1 // Tried with 0 also

button.titleLabel?.adjustsFontSizeToFitWidth = true

button.titleLabel?.lineBreakMode = // tried differenet linebreakmode

Could anyone have an idea of scaling UI Button text?

score 0 · Answer 1 · answered Dec 04 '20 at 14:06

I don't think there is a way to get the font to auto-size. However, if you set the button's titleLabel.font to a specific font size the button will update to use the new font size, including resizing the button.

Use code like this:

            let size: CGFloat = useLargeFont ? 50.0 : 17.0  //Change as needed
            if let buttonFont = button.titleLabel?.font {
                button.titleLabel?.font = buttonFont.withSize(size)
            }

DonMag · Accepted Answer · 2020-12-08T19:04:27.240

~~Are you sure it's not working?~~

Edit - After comments...

UIKit elements such as UILabel / UIButton / etc to not have a built-in "auto-adjust font height" property.

I don't work for Apple, so just guessing that is (at least in part) due to the fact that, in general...

Based on screen height, the UI is designed to either:

provide more or less information, e.g. more rows in a table, or
adjust vertical spacing between elements

That doesn't mean you can't or shouldn't adjust your font sizes... it just means you have to do it manually.

Couple options:

set the font-size at run-time, as suggested by Duncan
use a UIAppearance proxy to set the font-size, again at run-time

in either case, you could use a height-to-fontSize table or a "percentage" calculation.

Another option would be a custom class that sets the font-size based on the constrained button height.

Here's a simple example (note: for demonstration purposes only):

class AutoFontSizeButton: UIButton {
    
    override func layoutSubviews() {

        super.layoutSubviews()

        guard let fnt = titleLabel?.font else { return }

        // default system type button has 6-pts top / bottom inset
        //  and font size is 15/18ths of that height
        let h = ((bounds.height - 12.0) * (15.0 / 18.0)).rounded()
        let fs = fnt.pointSize

        if h != fs {
            titleLabel?.font = UIFont(descriptor: fnt.fontDescriptor, size: h)
        }

    }

}

Result - the top three (yellow) buttons are 30, 40 and 50-points in height, with the default font-size of 15. The bottom three (green) buttons are again 30, 40 and 50-points in height, but the font-size is automatically set at run-time:

I have only portrait mode option in my app and I have a title label for button as "START" and i have set the leading same as yours example like above, it's not scaled. But when i set the title label as "Click continue button" it's scaled. My question is i want to scale the text label even if it's small content like "OK","START" etc for smaller devices like iPhone SE... — HariKarthick, Dec 05 '20 at 12:21
@HarikarthickK - ah... you want the font **height** to change, not the width. Couple approaches to this... are you using auto-layout / constraints to determine the button height(s)? Or are you using the titleLabel font to auto-size the height of the button(s)? — DonMag, Dec 05 '20 at 15:26
I am using contraints to determine the button height @DonMag — HariKarthick, Dec 07 '20 at 04:44

How to scale the button text based on screen design swift?

2 Answers2