Crea tu primer ButtonStyle con SwiftUI

Marcelo Laprea

10 mayo, 20233min de lectura

ButtonStyle es un protocolo que nos permite definir un estilo que se puede aplicar a cualquier botón en la aplicación, evitando tener que modificar cada botón individualmente. Este protocolo define un único método, makeBody(configuration:), que toma una instancia de ButtonStyleConfiguration y devuelve una vista que representa el botón.

Veamos un ejemplo de como crear un ButtonStyle:

struct PrimaryButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(.white)
            .padding()
            .background(Color.blue)
            .cornerRadius(8)
    }
}

En éste caso, estamos definiendo un estilo para todos nuestros botones primarios o principales, que van a tener fondo azul, texto blanco y esquinas redondeadas. Todo esto lo definimos en la función makeBody(configuration: Configuration) -> some View.

Ahora, podemos usar este nuevo estilo en cualquier botón de nuestra aplicación. Por ejemplo, si queremos usar el nuevo estilo en un botón:

Button("Hola mundo") {

}
.buttonStyle(PrimaryButtonStyle())

El método buttonStyle(_:) lo usamos para aplicar el nuevo estilo a nuestro botón.

También podemos crear estilos más complejos y personalizados, como por ejemplo, un estilo de botón que cambie su apariencia al ser presionado. Veamos un ejemplo:

struct HighlightButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(.white)
            .padding()
            .background(configuration.isPressed ? Color.red : Color.blue)
            .cornerRadius(8)
    }
}

En este caso, estamos cambiando el color de fondo del botón a rojo cuando el usuario lo presiona. Esto se hace verificando la propiedad isPressed en la instancia configuration proporcionada por el método makeBody(configuration:).

Estilos por defecto

Apple nos ofrece un listado de estilos ya creados por ellos:

• static var automatic: DefaultButtonStyle
• static var bordered: BorderedButtonStyle
• static var borderedProminent: BorderedProminentButtonStyle
• static var borderless: BorderlessButtonStyle
• static var card: CardButtonStyle
• static var link: LinkButtonStyle
• static var plain: PlainButtonStyle

Hay dos formas de usarlos:

1. Usando la variable estática:

struct ContentView: View {
  var body: some View {
    VStack {
      Button("Hola mundo") {
        print("Abrir mis favoritos")
      }
      .buttonStyle(.bordered)
    }
  }
}

2. Creando el estilo directamente:

struct ContentView: View {
  var body: some View {
    VStack {
      Button("Hola mundo") {
        print("Abrir mis favoritos")
      }
      .buttonStyle(BorderedButtonStyle())
    }
  }
}

En conclusión, ButtonStyle es una herramienta muy útil en SwiftUI que permite personalizar fácilmente la apariencia de los botones en una aplicación. Al definir un estilo de botón personalizado que se puede aplicar a cualquier botón en la aplicación, se puede ahorrar tiempo y hacer que la aplicación tenga una apariencia más coherente.