Cree un UILabel con tamaño de fuente dinámico en Swift 5

Hola, les saluda Miguel y en esta ocasión les traigo este post.

Ajuste el tamaño de la fuente para que se ajuste al ancho disponible

En este breve tutorial, aprenderemos cómo crear fácilmente un UILabel con tamaño de fuente dinámico.

El código fuente está disponible al final del artículo.

Empecemos

Creemos un simple subclase UIView que contiene un UILabel en el centro:

import UIKit

@IBDesignable class CustomView: UIView {
    
    // MARK: - Initialization
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        self.addSubview(dynamicFontLabel)
        
        NSLayoutConstraint.activate([
            dynamicFontLabel.centerXAnchor.constraint(equalTo: self.centerXAnchor),
            dynamicFontLabel.centerYAnchor.constraint(equalTo: self.centerYAnchor),
        ])
    }    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }    
    // MARK: - UI
    let dynamicFontLabel: UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 40)
        label.textAlignment = .center
        label.textColor = .black
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
}

Lo marcamos como "@IBDesinable" Para depurarlo fácilmente en un archivo .xib.

Para hacer que el tamaño de fuente de la etiqueta sea dinámico, necesitamos lo siguiente:

Primero agreguemos restricciones:

import UIKit

@IBDesignable class CustomView: UIView {
    
    // MARK: - Initialization
    override init(frame: CGRect) {
        ...        
        NSLayoutConstraint.activate([
            dynamicFontLabel.centerXAnchor.constraint(equalTo: self.centerXAnchor),
            dynamicFontLabel.centerYAnchor.constraint(equalTo: self.centerYAnchor),
            dynamicFontLabel.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 10),
            dynamicFontLabel.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -10),
        ])
    }    
    ...
}

Vemos que restringimos la etiqueta a la izquierda y a la derecha con un pequeño desplazamiento de 10.

Ahora, configuremos la propiedad adjustsFontSizeToFitWidth (tenga en cuenta que también agregamos el text propiedad para observar fácilmente cómo cambia el tamaño de la fuente en tiempo real):

import UIKit

@IBDesignable class CustomView: UIView {
    
    ...    
    // MARK: - Properties
    @IBInspectable var text: String = "" {
        didSet {
            dynamicFontLabel.text = text
            self.setNeedsLayout()
        }
    }    
    // MARK: - UI
    let dynamicFontLabel: UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 40)
        label.textAlignment = .center
        label.textColor = .black
        label.adjustsFontSizeToFitWidth = true
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
}

Ahora si probamos la implementación, veremos el UILabel ajustándose al ancho disponible:

Espero que te haya sido de utilidad. Gracias por leer este post.