Cómo crear UILabel con UIKit en Swift
Cómo crear UILabel con UIKit en Swift

UILabel en UIKit con Swift en Español #3 - Curso iOS en Swift

UILabel en UIKit es una vista que sirve para mostrar texto. Es otro componente clave que utilizamos en nuestras aplicaciones iOS. Podemos configurar diferentes propiedades para cambiar el tamaño del texto, fuente, color del texto, número de líneas, alineamiento del texto, etc

SwiftBeta

Tabla de contenido

Aprende a crear UILabel por código con UIKit y Swift

Hoy en SwiftBeta vamos a aprender a usar UILabel. Esta vista sirve para representar texto cuando usamos el framework UIKit. Aunque esta vista puede parecer sencilla, podemos configurarla para que sea muy potente.

Creamos un proyecto en Xcode

Creamos un proyecto nuevo en Xcode, al crearlo asegúrate que la Interface sea Storyboard. Una vez creado nos vamos al ViewController, y ahí vamos a crear nuestro primer UILabel, y lo que haremos será crear varios UILabel con distintas configuraciones para que veas como se pueden customizar.

Creamos nuestro 1er UILabel en UIKit con Swift

Para crear nuestro primer UILabel, creamos una propiedad y configuramos la instancia de UILabel.

Creamos nuestro primer UILabel en UIKit
Creamos nuestro primer UILabel en UIKit

Vamos a ver como crear por código el UILabel de la imagen anterior:

final class ViewController: UIViewController {
    
    private let swiftBetaLabel1: UILabel = {
        let label = UILabel() // 1
        label.text = "Suscríbete a SwiftBeta" // 2
        label.font = UIFont(name: "Arial Rounded MT Bold", size: 26) // 3
        label.textAlignment = .center // 4
        label.textColor = .purple // 5
        label.translatesAutoresizingMaskIntoConstraints = false // 6
        return label
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(swiftBetaLabel1) // 7
        
        NSLayoutConstraint.activate([ // 8
            swiftBetaLabel1.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            swiftBetaLabel1.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor),
        ])
    }
}
Código en Swift para crear nuestro primer UILabel en UIKit

Los pasos que hemos seguido son los siguientes:

  1. Hemos creado una instancia de UILabel
  2. Hemos asignado un texto a nuestro UILabel
  3. Hemos customizado la fuente de nuestro UILabel
  4. Asignamos el textAlignment centrado
  5. Cambiamos el color del texto de nuestro UILabel
  6. Asignamos false a translatesAutoresizingMaskIntoConstraints, de esta manera podremos asignar constraints en código.
  7. Añadimos nuestro UILabel a la vista de nuestro ViewController
  8. Creamos constraints para que el UILabel sepa en qué posición de la vista padre colocarse

Vamos a crear otro UILabel, y vamos a ver otras propiedades

Creamos nuestro 2do UILabel en UIKit con Swift

A continuación creamos un segundo UILabel, vamos a ver algunos problemas que podemos tener al crearlos, así

final class ViewController: UIViewController {
    
    private let swiftBetaLabel1: UILabel = {
        let label = UILabel()
        label.text = "Suscríbete a SwiftBeta"
        label.font = UIFont(name: "Arial Rounded MT Bold", size: 26)
        label.textAlignment = .center
        label.textColor = .purple
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    private let swiftBetaLabel2: UILabel = {
        let label = UILabel()
        label.text = "Aprende a programar Swift y SwiftUI. Crea apps en Xcode y súbelas al App Store"
        label.font = UIFont.systemFont(ofSize: 12)
        label.textAlignment = .left
        label.textColor = .black
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(swiftBetaLabel1)
        view.addSubview(swiftBetaLabel2)
        
        NSLayoutConstraint.activate([
            swiftBetaLabel1.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            swiftBetaLabel1.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor),
            swiftBetaLabel2.centerXAnchor.constraint(equalTo: swiftBetaLabel1.centerXAnchor),
            swiftBetaLabel2.topAnchor.constraint(equalTo: swiftBetaLabel1.bottomAnchor, constant: 12)
        ])
    }
}
Código Swift para crear nuestro segundo UILabel en UIKit

Si ahora compilamos nuestra app, vemos que nuestro UILabel aparece en una línea, pero no se puede leer el texto, ya que falta que apliquemos dos contraints. Para que te hagas un idea, muestro como se ve en la imagen de abajo:

Faltan constraints en nuestro segundo ULabel, no podemos leer todo el texto
Faltan constraints en nuestro segundo ULabel, no podemos leer todo el texto

Vamos a añadir leading y trailing constraints a nuestro swiftBetaLabel2. La configuración de nuestras constraints quedaría de la siguiente manera:

        NSLayoutConstraint.activate([
            swiftBetaLabel1.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            swiftBetaLabel1.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor),
            swiftBetaLabel2.centerXAnchor.constraint(equalTo: swiftBetaLabel1.centerXAnchor),
            swiftBetaLabel2.topAnchor.constraint(equalTo: swiftBetaLabel1.bottomAnchor, constant: 12),
            swiftBetaLabel2.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 32),
            swiftBetaLabel2.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -32),
        ])

Si ahora compilamos se ve nuestro UILabel, ¡y mucho mejor que antes! El resultado es el siguiente:

Hemos arreglado las constraints, pero aún no podemos leer todo el texto
Hemos arreglado las constraints, pero aún no podemos leer todo el texto

el problema es que el texto sale truncado, vamos a arreglarlo usando la propiedad numberOfLines, y le vamos a dar el valor de 0. Esto significa que si el texto no cabe en el espacio que tiene el UILabel, el texto continua en una linea nueva. (y por lo tanto los ... desaparecen).

    private let swiftBetaLabel2: UILabel = {
        let label = UILabel()
        label.text = "Aprende a programar Swift y SwiftUI. Crea apps en Xcode y súbelas al App Store"
        label.font = UIFont.systemFont(ofSize: 12)
        label.numberOfLines = 0
        label.textAlignment = .left
        label.textColor = .black
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

El resultado es el siguiente:

Al añadir numberOfLines = 0, indicamos a nuestro UILabel que use tantas líneas como sea necesario para mostrar el texto
Al añadir numberOfLines = 0, indicamos a nuestro UILabel que use tantas líneas como sea necesario para mostrar el texto

Vamos a continuar con los UILabel. Vamos a ver como mostrar texto más enriquecido, y para ello vamos a usar la propiedad attributedText del UILabel

Creamos nuestro 3er UILabel en UIKit con Swift

Creamos un UILabel, pero esta vez vamos a delegar algunas propiedades a los attributedText que te comentaba, para hacerlo vamos a crear un Array y vamos a ir asignando, la fuente del texto, el color del texto, el color de fondo de nuestro UILabel y ahora vamos a subrayar el texto.

Es decir, vamos a conseguir el siguiente efecto en nuestro UILabel:

Creamos nuestro tercer UILabel en UIKit
Creamos nuestro tercer UILabel en UIKit

Para hacerlo, vamos a usar el siguiente código:

import UIKit

final class ViewController: UIViewController {
    
    private let swiftBetaLabel1: UILabel = {
        let label = UILabel()
        label.text = "Suscríbete a SwiftBeta"
        label.font = UIFont(name: "Arial Rounded MT Bold", size: 26)
        label.textAlignment = .center
        label.textColor = .purple
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    private let swiftBetaLabel2: UILabel = {
        let label = UILabel()
        label.text = "Aprende a programar Swift y SwiftUI. Crea apps en Xcode y súbelas al App Store"
        label.font = UIFont.systemFont(ofSize: 12)
        label.numberOfLines = 0
        label.textAlignment = .left
        label.textColor = .black
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    private let swiftBetaLabel3: UILabel = {
        let text = "Aprende a programar Swift y SwiftUI. Crea apps en Xcode y súbelas al App Store" // 1
        let attributeText: [NSAttributedString.Key: Any] = [ // 2
            .underlineStyle: NSUnderlineStyle.single.rawValue,
            .underlineColor: UIColor.red,
            .foregroundColor: UIColor.white,
            .backgroundColor: UIColor.blue,
            .font: UIFont.systemFont(ofSize: 32)
        ]
        
        let attributedString = NSAttributedString(string: text,
                                                  attributes: attributeText) // 3
        let label = UILabel() // 4
        label.numberOfLines = 0
        label.attributedText = attributedString // 5
        
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(swiftBetaLabel1)
        view.addSubview(swiftBetaLabel2)
        view.addSubview(swiftBetaLabel3)
        
        NSLayoutConstraint.activate([
            swiftBetaLabel1.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            swiftBetaLabel1.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor),
            swiftBetaLabel2.centerXAnchor.constraint(equalTo: swiftBetaLabel1.centerXAnchor),
            swiftBetaLabel2.topAnchor.constraint(equalTo: swiftBetaLabel1.bottomAnchor, constant: 12),
            swiftBetaLabel2.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 32),
            swiftBetaLabel2.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -32),
            swiftBetaLabel3.centerXAnchor.constraint(equalTo: swiftBetaLabel1.centerXAnchor),
            swiftBetaLabel3.topAnchor.constraint(equalTo: swiftBetaLabel2.bottomAnchor, constant: 12),
            swiftBetaLabel3.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 32),
            swiftBetaLabel3.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -32),
        ])
    }
}
Añadimos nuestro tercer UILabel, esta vez usamos NSAttributedString para customizar algunas propiedades

Los pasos que hemos seguido han variado respecto a la creación de los anteriores UILabel:

  1. Creamos una constante que almacena el texto de nuestro UILabel
  2. Creamos un array con claves de NSAttributedString.Key, de esta manera podemos configurar algunas propiedades como el underline del texto, su color, la fuente, etc
  3. Creamos un NSAttributedString y para hacerlo le pasamos el texto que queremos mostrar en nuestro UILabel y el array de atributos que queremos aplicar al texto
  4. Creamos una instancia de UILabel
  5. Asignamos a la propiedad attributedText la attributedString que acabamos de crear

Como detalle comentar que podríamos utilizar los NSAttributedString para solo customizar ciertas para de nuestro texto

Conclusión

Acabamos de aprender a cómo usar UILabel para poder mostrar texto dentro de nuestras app que usan UIKit. Hemos aprendido las propiedades más comunes y hemos visto una muy potente llamada attributedText

Si quieres seguir aprendiendo sobre SwiftUI, Swift, Xcode, o cualquier tema relacionado con el ecosistema Apple