UIButton en UIKit con Swift en Español #3

Aprende a crear un UIButton con UIKit Curso iOS

Hoy en SwiftBeta vamos a aprender a cómo crear un UIButton. En los anteriores posts hemos aprendido a cómo movernos por Xcode usando Storyboard, también hemos aprendido a cómo crear vistas por código sin usar Storyboard, hemos visto AutoLayout, y hemos creado instancias de subvistas como UIImageView, UILabel y UIButton (eso sí, sin entrar demasiado en detalle). Hoy lo que vamos hacer es entrar en detalle con UIButton.

Desde iOS 15, Apple añadió un nuevo componente llamado Configuration. Aquí podemos configurar nuestro UIButton, y cuando digo configurar me refiero a que podemos darle un estilo, título, subtítulo, icono, tamaño, padding, etc. Vamos a ver distintas configuraciones. Vamos a ver la primera!

Creamos proyecto en Xcode

Lo primero de todo que haremos será crear un proyecto en Xcode. Al crearlo, marcaremos Storyboard en la Interface. Una vez creado nos vamos a nuestro ViewController y allí crearemos nuestro primer UIButton.

Configuración 1 de UIButton

Vamos a crear el siguiente UIButton

Creamos nuestro primer UIButton en UIKit

para hacerlo, vamos a usar el siguiente código

import UIKit

class ViewController: UIViewController {
    private let swiftBetaButton1: UIButton = {
        var configuration = UIButton.Configuration.filled() // 1
        configuration.title = "Suscríbete a SwiftBeta" // 2
        configuration.subtitle = "Apoya el canal" // 3
        configuration.image = UIImage(systemName: "play.circle.fill") // 4
        
        let button = UIButton(type: .system) // 5
        button.translatesAutoresizingMaskIntoConstraints = false // 6
        button.configuration = configuration // 7
        
        return button
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(swiftBetaButton1)
        
        NSLayoutConstraint.activate([
            swiftBetaButton1.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            swiftBetaButton1.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor),
        ])
    }
}

Código en Swift usando el framework UIKit para crear nuestro primer UIButton

Hemos creado una propiedad que es un UIButton. Dentro de la propiedad configuramos el UIButton con una serie de propiedades.

Creamos una instancia de UIButton.Configuration
Añadimos un título
Añadimos un subtítulo
Añadimos una imagen del sistem, esta imagen la podemos encontrar usando SF Symbols, y por lo tanto podríamos usar cualquier otra.
Creamos una instancia de UIButton
Marcamos que queremos configurar las constraints por código
Asignamos la configuración que hemos creado de nuestro UIButton a la configuración del UIButton

Vamos a ver más configuraciones que podemos usar en nuestro UIButton. A partir de ahora explicaremos nuevas propiedades que podemos usar.

Configuración 2 de UIButton

Vamos a crear la siguiente configuración

Creamos nuestro segundo UIButton en UIKit

Para ver los cambios de diferentes UIButton vamos a ir apilándoloes en nuestro ViewController.

import UIKit

class ViewController: UIViewController {
    private let swiftBetaButton1: UIButton = {
        var configuration = UIButton.Configuration.filled()
        configuration.title = "Suscríbete a SwiftBeta"
        configuration.subtitle = "Apoya el canal"
        configuration.image = UIImage(systemName: "play.circle.fill")
        
        let button = UIButton(type: .system)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.configuration = configuration
        
        return button
    }()
    
    private let swiftBetaButton2: UIButton = {
        var configuration = UIButton.Configuration.bordered() // 1
        configuration.title = "Suscríbete a SwiftBeta"
        configuration.titleAlignment = .center // 2
        configuration.subtitle = "Apoya el canal"
        configuration.image = UIImage(systemName: "play.circle.fill")
        configuration.imagePadding = 12 // 3
        configuration.imagePlacement = .trailing // 4
        
        let button = UIButton(type: .system)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.configuration = configuration
        
        return button
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(swiftBetaButton1)
        view.addSubview(swiftBetaButton2)
        
        NSLayoutConstraint.activate([
            swiftBetaButton1.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            swiftBetaButton1.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor),
            swiftBetaButton2.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            swiftBetaButton2.topAnchor.constraint(equalTo: swiftBetaButton1.bottomAnchor, constant: 8),
        ])
    }
}

Creamos nuestro segundo UIButton con UIKit y lo añadimos a la vista del ViewController

Hemos usado otra configuración de UIButton.Configuration, en este caso es bordered()
Usamos una propiedad llamada titleAlignment para centrar el texto de nuestro UIButton
Añadimos un padding a nuestra imagen
Indicamos donde queremos mostrar nuestra imagen, en este caso la mostramos a la derecha del texto, pero en los siguiente ejemplos la mostraremos arriba del texto y debajo del texto.

Vamos a ver otra configuración de UIButton

Configuración 3 de UIButton

Vamos a crear la siguiente configuración:

Creamos nuestro tercer UIButton en UIKit

Hemos creado un nuevo UIButton llamado swiftBetaButton3, fíjate que vamos apilando cada uno de ellos.

import UIKit

class ViewController: UIViewController {
    private let swiftBetaButton1: UIButton = {
        var configuration = UIButton.Configuration.filled()
        configuration.title = "Suscríbete a SwiftBeta"
        configuration.subtitle = "Apoya el canal"
        configuration.image = UIImage(systemName: "play.circle.fill")
        
        let button = UIButton(type: .system)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.configuration = configuration
        
        return button
    }()
    
    private let swiftBetaButton2: UIButton = {
        var configuration = UIButton.Configuration.bordered()
        configuration.title = "Suscríbete a SwiftBeta"
        configuration.titleAlignment = .center
        configuration.subtitle = "Apoya el canal"
        configuration.image = UIImage(systemName: "play.circle.fill")
        configuration.imagePadding = 12
        configuration.imagePlacement = .trailing
        
        let button = UIButton(type: .system)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.configuration = configuration
        
        return button
    }()
    
    private let swiftBetaButton3: UIButton = {
        var configuration = UIButton.Configuration.filled()
        configuration.title = "Suscríbete a SwiftBeta"
        configuration.titleAlignment = .center
        configuration.subtitle = "Apoya el canal"
        configuration.image = UIImage(systemName: "play.circle.fill")
        configuration.imagePadding = 12
        configuration.imagePlacement = .top
        configuration.buttonSize = .large // 1
        configuration.baseBackgroundColor = .systemPurple // 2
        configuration.baseForegroundColor = .white // 3
        
        let button = UIButton(type: .system)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.configuration = configuration
        
        return button
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(swiftBetaButton1)
        view.addSubview(swiftBetaButton2)
        view.addSubview(swiftBetaButton3)
        
        NSLayoutConstraint.activate([
            swiftBetaButton1.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            swiftBetaButton1.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor),
            swiftBetaButton2.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            swiftBetaButton2.topAnchor.constraint(equalTo: swiftBetaButton1.bottomAnchor, constant: 8),
            swiftBetaButton3.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            swiftBetaButton3.topAnchor.constraint(equalTo: swiftBetaButton2.bottomAnchor, constant: 8),
        ])
    }
}

Creamos nuestro tercer UIButton con UIKit y lo añadimos a la vista del ViewController

En este caso hemos usado 3 propiedades nuevas:

Usamos buttonSize para cambiar el tamaño de nuestro UIButton. En este caso hemos usado .large, pero podemos usar otros valores (es un enum)
Usamos .baseBackgroundColor para cambiar el color de nuestro UIButton
Usamos .baseForegroundColor para cambiar el color del texto e icono de nuestro UIButton

Si te has fijado, al pulsar cualquiera de los 3 UIButtons anteriores, no se realiza ninguna acción, en el siguiente ejemplo vamos a crear una nueva configuración para nuestro UIButton y aparte le vamos a dar una acción. Cuando un user pulse nuestro UIButton, en nuestro ejemplo se printará un mensaje por consola

Configuración 4 de UIButton

Vamos a crear la siguiente configuración:

Creamos nuestro cuarto UIButton en UIKit

Vamos a crear una propiedad nueva llamada swiftBetaButton4

import UIKit

class ViewController: UIViewController {
    private let swiftBetaButton1: UIButton = {
        var configuration = UIButton.Configuration.filled()
        configuration.title = "Suscríbete a SwiftBeta"
        configuration.subtitle = "Apoya el canal"
        configuration.image = UIImage(systemName: "play.circle.fill")
        
        let button = UIButton(type: .system)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.configuration = configuration
        
        return button
    }()
    
    private let swiftBetaButton2: UIButton = {
        var configuration = UIButton.Configuration.bordered()
        configuration.title = "Suscríbete a SwiftBeta"
        configuration.titleAlignment = .center
        configuration.subtitle = "Apoya el canal"
        configuration.image = UIImage(systemName: "play.circle.fill")
        configuration.imagePadding = 12
        configuration.imagePlacement = .trailing
        
        let button = UIButton(type: .system)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.configuration = configuration
        
        return button
    }()
    
    private let swiftBetaButton3: UIButton = {
        var configuration = UIButton.Configuration.filled()
        configuration.title = "Suscríbete a SwiftBeta"
        configuration.titleAlignment = .center
        configuration.subtitle = "Apoya el canal"
        configuration.image = UIImage(systemName: "play.circle.fill")
        configuration.imagePadding = 12
        configuration.imagePlacement = .top
        configuration.buttonSize = .large
        configuration.baseBackgroundColor = .systemPurple
        configuration.baseForegroundColor = .white
        
        let button = UIButton(type: .system)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.configuration = configuration
        
        return button
    }()
    
    private lazy var swiftBetaButton4: UIButton = { 
        var configuration = UIButton.Configuration.filled()
        configuration.title = "Suscríbete a SwiftBeta"
        configuration.titleAlignment = .center
        configuration.subtitle = "Apoya el canal"
        configuration.image = UIImage(systemName: "play.circle.fill")
        configuration.imagePadding = 12
        configuration.imagePlacement = .bottom
        configuration.buttonSize = .large
        
        let button = UIButton(type: .system, primaryAction: UIAction(handler: { action in // 1
            self.showMessage() // 2
          }))
        button.translatesAutoresizingMaskIntoConstraints = false
        button.configuration = configuration
        
        return button
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(swiftBetaButton1)
        view.addSubview(swiftBetaButton2)
        view.addSubview(swiftBetaButton3)
        view.addSubview(swiftBetaButton4)
        
        NSLayoutConstraint.activate([
            swiftBetaButton1.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            swiftBetaButton1.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor),
            swiftBetaButton2.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            swiftBetaButton2.topAnchor.constraint(equalTo: swiftBetaButton1.bottomAnchor, constant: 8),
            swiftBetaButton3.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            swiftBetaButton3.topAnchor.constraint(equalTo: swiftBetaButton2.bottomAnchor, constant: 8),
            swiftBetaButton4.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            swiftBetaButton4.topAnchor.constraint(equalTo: swiftBetaButton3.bottomAnchor, constant: 8),
        ])
    }
    
    func showMessage() { // 3
        print("Button tapped!")
    }
}

Creamos nuestro cuarto UIButton con UIKit y lo añadimos a la vista del ViewController

En este caso, cuando instanciamos nuestro UIButton, tenemos un parámetro nuevo llamado primaryAction, aquí dentro vamos a crear un UIAction
Dentro del UIAction vamos a llamar a un método llamado showMessage(), este método va a tener la lógica que querams cuando el user lo pulse.
Método showMessage(), con toda la lógica que queremos aplicar, en este caso se printa un mensaje por consola

Ahora podemos compilar nuestra app y probarla. Si pulsamos nuestro último UIButton vemos que se printa un mensaje por consola.

Conclusión

Hoy hemos aprendido a crear un UIButton con distintas configuraciones, a partir de iOS 15 añadieron un nuevo componente que nos permite configurar un UIButton de una manera muy sencilla.