En este tutorial de SwiftUI vamos a ver uno de los elementos más comunes en cualquier app de dispositivo móvil, vamos a crear una mini app utilizando Button con SwiftUI, que si vienes desarrollando apps anteriormente te darás cuenta que ya lo conocíamos como UIButton de UIKit.
Desde aquí puedes acceder a la documentación oficial de Button con SwiftUI.
Button con SwiftUI
El botón es un control Button SwiftUI que responde con las acciones que le indiquemos cuando hay una interacción por parte del usuario, dicho de otra forma, cuando pulsemos nuestro botón se hará algo que le hayamos dejado indicado previamente.
Button("Púlsame", action: {print("Pulsado")})
Por ejemplo: Cuando pulsemos el Button SwiftUI mostraremos un texto en consola.
Los botones como casi todos los controladores y elementos dentro de SwiftUI pueden cambiar de aspecto con la misma facilidad. Ahora antes de nada vamos a poner un botón en vez de con texto con una imagen del sistema (voy a utilizar una imagen del sistema porque me resulta más cómodo no tener que andar preparando imágenes para los ejemplos, pero puedes utilizar la imagen que quieras).
Botón con imagen SwiftUI
Ya hemos trabajado con imágenes en otro tutorial hace unos días, puedes echar un vistazo antes si prefieres a Image con SwiftUI para el desarrollo de apps iOS.
Button(action: {
print("Pulsado")
}) {
Image(systemName: "dial.max.fill")
}
Podemos ver el mismo resultado que en el ejemplo anterior de Button SwiftUI con texto, pero ahora con la imagen del sistema.
Añadiremos una combinación de Texto + Imagen con un ejemplo y la cantidad de posibilidades que nos brinda esta combinación ya la dejo para que la exploréis vosotros. No puede ser más sencillo trabajar con botones en SwiftUI.
Button(action: {
print("Pulsado")
}) {
Image(systemName: "dial.max.fill")
Text("Sonido")
}
Si queremos que el texto nos aparezca en la parte de abajo en vez de a la derecha de la imagen tendremos que utilizar VStack.
Aspecto del botón con SwiftUI
Ahora vamos a ver cómo podemos modificar un poco más el aspecto del botón con SwiftUI tanto en el forma de texto como en el de imagen, utilizaré la versión del texto a la derecha del botón.
Primero añadiremos a nuestro botón un contorno rectangular.
.padding()
.overlay(Rectangle()
.stroke(Color .blue, lineWidth: 2))
Ahora con las esquinas redondeadas.
.padding()
.overlay(RoundedRectangle(cornerRadius: 15)
.stroke(Color .blue, lineWidth: 2))Por último le añadiremos algo de color al fondo de nuestro botón mediante background.
Desde aquí puedes echar un vistazo a la documentación oficial de Background con SwiftUI.
.padding()
.background(Color .yellow)
.cornerRadius(10)Pues con esto estaría la parte del diseño del tutorial para crear Buttons con SwiftUI terminados, aunque no podemos olvidar que en SwiftUI existen otros tipos de botones con una funcionalidad ya incorporada que son importantísimos en el uso de las apps.
- Documentación oficial de Apple EditButton con SwiftUI.
- Documentación oficial de Apple PasteButton con SwiftUI.
Desde aquí puedes descargar el proyecto completo Button SwiftUI de Xcode, ten en cuenta que los diferentes ejemplos están incluidos en el proyecto como comentarios, únicamente tienes que ir comentando y descontando líneas en el código.
Si tienes cualquier duda o alguna sugerencia no dudes en dejarme un comentario que le echaré un vistazo lo antes posible.
