¿Qué es Button?

¿Qué es Button?

El componente Button será usado para mostrar botones a los que el usuario podrá pulsar para desencadenar eventos. Es un componente equivalente a UIButton de UIKit.

Puedes consultar la documentación oficial aquí.

La creación de este componente se puede realizar de varias formas:

Button("Hello, Button 1!") {
		//Button pressed, do something
}
"Ejemplo de creación de Button en SwiftUI"

 

Este 'inicializador' tiene un primer parámetro con el texto del botón y un segundo parámetro con el closure que se ejecutará cuando se pulse el botón.

Button(action: {
    //Button pressed, do something
}) {
    VStack {
        Text("Hello")
        Divider()
            .background(Color.red)
            .frame(width: 100, height: 1)
        Text("Button 2!")
    }
}

 

"Ejemplo de inicializador de Button en SwiftUI"

 

Este 'inicializador' tiene un primer parámetro con el closure que se ejecutará cuando se pulse el botón y un segundo parámetro con un ViewBuilder que nos permite añadir una vista personalizada como botón.

 

 

Modificadores comunes para Button

A parte de los modificadores que se explicarán a continuación, el componente Button comparte los mismos métodos de personalización que el componente View y pueden ser consultados aquí.

 

buttonStyle

Permite indicar el estilo base del botón. El parámetro pasado debe implementar el protocolo PrimitiveButtonStyle. Por defecto existen las siguientes implementaciones (para iOS):

  • BorderlessButtonStyle. Es un estilo de botón sin bordes y tintado por defecto.
  • DefaultButtonStyle. Este estilo varía dependiendo de la plataforma. En el caso de iOS se aplica el estilo BorderlessButtonStyle
  • PlainButtonStyle. No aplica estilos por defecto al botón, pero sí efectos para indicar diferentes estados: pressed, focused, o enabled.
Button("Button Borderless") {
    textAlert = "Button Borderless"
    alertPresent.toggle()
}
.buttonStyle(BorderlessButtonStyle())
Button("Button Default") {
    textAlert = "Button Default"
    alertPresent.toggle()
}
.buttonStyle(DefaultButtonStyle())
Button("Button Plain") {
    textAlert = "Button Plain"
    alertPresent.toggle()
}
.buttonStyle(PlainButtonStyle())

 

"Ejemplo de buttonStyle de Button en SwiftUI"

 

background

Permite modificar el color de fondo del botón.

Button("Button with background") {
    //Button pressed, do something
}
.background(Color.yellow)

 

"Ejemplo de background de Button en SwiftUI"

 

El color afectará al tamaño que ocupe el propio texto que contenga el botón. Si quisiéramos que ocupara todo el ancho (por ejemplo) tendríamos que asignarle el frame antes de la propiedad background.

Button("Button with background (frame set)") {
    //Button pressed, do something
}
.frame(maxWidth: .infinity)
.background(Color.yellow)

 

"Ejemplo de background de Button en SwiftUI"

 

foregroundColor 

Permite modificar el color del texto del botón.

Button("Foreground Color") {
    //Button pressed, do something
}
.foregroundColor(.purple)
"Ejemplo de foregroundColor de Button en SwiftUI"

 

hoverEffect

Permite aplicar un estilo de efecto resaltado cuando un puntero pasa sobre el botón.

Button("Button Hover Effect (try on iPad with pointer)") {
    //Button pressed, do something
}
.hoverEffect(.lift)
"Ejemplo de hoverEffect de Button en SwiftUI"

Para probar esta funcionalidad se debe ejecutar la app en iPad y simular un puntero en en el dispositivo (en el simulador se puede hacer pulsando las teclas  ⌃ + ⌘ + P).

 

 

Aumentar el area de pulsación de Button

El componente Button, como cualquier View, tiene modificadores para aumentar su padding o su frame, pero es importante saber que usarlos sobre el Button no afecta al area de pulsación de este si no que es meramente estético.

El área de pulsación de un Button lo define su label, por lo que para aumentar su area de pulsación habría que modificar las propiedades del label para que ocupe más espacio (ya sea con un frame, padding o similar).

Button(action: {
    //Button pressed, do something
}, label: {
    Text("Test tappable area")
        .frame(width: 200, height: 200)
})
.background(Color.red.opacity(0.3))
"Ejemplo de área de pulsación de Button en SwiftUI"

 

 

Crear un botón con efectos de pulsación

En SwiftUI los botones permiten capturar los eventos de pulsación para desencadenar eventos, pero no podemos tenemos accesible ninguna propiedad para saber si se está pulsando el botón, y así poder modificar los estilos del propio botón u otras partes de la aplicación.

Esto no quiere decir que sea imposible pero nos obliga a crearnos un ButtonStyle que nos de acceso a esta posibilidad. El protocolo ButtonStyle contiene un objeto de tipo ButtonStyleConfiguration que nos da acceso a la propiedad isPressed con la que podemos controlar si el botón está seleccionado o no. Esto nos indica que para conseguir esta funcionalidad tenemos que crearnos un ButtonStyle personalizado para poder acceder a la variable isPressed.

Lo primero será crearnos el tipo SelectableButtonStyle que implemente el protocolo ButtonStyle.

import SwiftUI

struct SelectableButtonStyle<T: View>: ButtonStyle {
    private let render: (Self.Configuration) -> T
    
		public init(@ViewBuilder _ render: @escaping (Self.Configuration) -> T) {
        self.render = render
    }
    
    func makeBody(configuration: Self.Configuration) -> some View {
        return self.render(configuration)
    }
}

 

Una vez creado solo será necesario asignarlo al modificador buttonStyle del botón que queramos y asignar los estilos sobre el closure del init. Para asignar los estilos accederemos a la propiedad label del objeto Configuration que recibimos como parámetro:

Button("Customize on pressed") {
    //Button pressed, do something
}
.padding()
.background(Color.blue)
.buttonStyle(SelectableButtonStyle({
    return $0.label
        .background(Color.yellow)
        .clipShape(RoundedRectangle(cornerRadius: $0.isPressed ? 16.0 : 0.0))
        .overlay(RoundedRectangle(cornerRadius: $0.isPressed ? 16.0 : 0.0).stroke(lineWidth: $0.isPressed ? 2.0 : 0.0).foregroundColor(Color.pink))
                                    .animation(.linear)
}))

 

"Ejemplo de efecto de pulsación de Button en SwiftUI"
Button(action: {
    //Button pressed, do something
}, label: {
    VStack {
        Text("Hello")
        Divider()
            .background(Color.red)
            .frame(width: 100, height: 1)
        Text("Button!")
    }
}).buttonStyle(SelectableButtonStyle({
    return $0.label
        .background(Color.yellow)
        .clipShape(RoundedRectangle(cornerRadius: $0.isPressed ? 16.0 : 0.0))
        .overlay(RoundedRectangle(cornerRadius: $0.isPressed ? 16.0 : 0.0).stroke(lineWidth: $0.isPressed ? 2.0 : 0.0).foregroundColor(Color.pink))
                                    .animation(.linear)
}))

 

"Ejemplo de efecto de pulsación de Button en SwiftUI"

 

 

Ejemplo

Puedes encontrar este ejemplo en Github bajo el apartado Button aquí.

Posts relacionados

Alert, componente SwiftUI: explicación y ejemplos

SwiftUI - Alert

Form, componente SwiftUI: explicación y ejemplos | [site:name]

SwiftUI - Form

Comentarios
¿Qué opinas? Escríbenos. Nos encantará leerte :)