Publicado el Deja un comentario

Button SwiftUI

tutorial Button SwiftUI

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")})
Button SwiftUI

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")
}
Button Image SwiftUI

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")
}
Button Text SwiftUI

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.

Botón SwiftUI

Primero añadiremos a nuestro botón un contorno rectangular.

.padding()
.overlay(Rectangle()
     .stroke(Color .blue, lineWidth: 2))
Botones SwiftUI

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.

Button SwiftUI con 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.

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.

Publicado el Deja un comentario

Slider SwiftUI

tutorial Slider SwiftUI

En este nuevo tutorial de SwiftUI vamos a ver un ejemplo muy sencillo de uno de los controles más utilizados en el desarrollo de apps para iOS con SwiftUI y con el resto de interfaces, se trata de Slider con SwiftUI, control que ya hemos visto hace años en otras ocasiones en el blog como UISlider de UIKit.

Si quieres echar un vistazo a la Slider en la documentación de Apple no estaría de más, aunque para realizar este tutorial de Swift UI no es necesario. En este ejemplo trabajaremos de forma sencilla creando un proyecto con Xcode en el que incluiremos Slider de SwiftUI.

Tutoriales SwiftUI

El tutorial SwiftUI lo vamos a dividir en dos ejemplos de Slider, uno será un Slider básico y el otro lo decoraremos un poco para que sepamos configurarlo estéticamente algo más acorde a nuestra app.

Creamos un proyecto nuevo con SwiftUI como interface y de lenguaje de programación SwiftUI, en nuestro archivo ContentView.swift añadiremos nuestro Slider SwiftUI y un campo de texto con el que visualizaremos en todo momento el valor de nuestro Slider.

Antes de nada añadiremos una variable llamada valor en la que almacenaremos en todo momento el valor de nuestro Slider SwiftUI.

 @State private var valor: Double = 0

A continuación dentro de la vista body incluimos dentro de un VStack nuestro Slider, con esto conseguiremos que el valor de nuestro Slider se visualice en la parte inferior del control.

VStack {
    Slider(value: $valor, in: 0...100, step: 1)
    Text("Valor de Slider: \(valor, specifier: "%.0f")")
}

Dentro de nuestro Slider vamos a indicarle que guarde valor en cada momento del estado >> $valor, el rango sobre el que queremos trabajar (en este caso de 0 a 100) >> in: 0…100 y como vamos a ir aumentando y disminuyendo cada paso que avancemos con nuestro Slider SwiftUI (en este ejemplo 1) >> step: 1.

Slider con SwiftUI

Este es el resultado de nuestro ejemplo por ahora, como veis es muy sencillo todo.

Decimales Slider SwiftUI

La línea de texto va a servirnos para ir imprimiendo en pantalla en todo momento el valor del Slider, únicamente debemos tener en cuenta que en >> specifier: podemos especificar el número de decimales que queremos que nos muestre.

  • Muestra 0 decimales: specifier: «%.0f»
  • Muestra 2 decimales: specifier: «%.2f»
  • Muestra 4 decimales: specifier: «%.4f»

Para ver el ejemplo más claro vamos a configurar nuestro Slider SwiftUI para que muestre 2 decimales y modificaremos el valor step para que la incrementación sea de 0,01 en 0,01 en vez de 1 en 1 como estaba.

Slider(value: $valor, in: 0...100, step: 0.01)
Text("Valor de Slider: \(valor, specifier: "%.2f")")
Slider SwiftUI specifier
Slider SwiftUI specifier

Este Slider con SwiftUI ya está en funcionamiento, ahora nos queda jugar un poco con su apariencia para poder integrarlo de forma correcta en nuestra app desarrollada con SwiftUI.

Color en Slider SwiftUI

Podemos modificar de forma sencilla nuestro selector de SwiftUI Slider como vamos a ver ahora en esta imagen y en el código de nuestra app iOS desarrollada con SwiftUI.

Slider SwiftUI
Slider SwiftUI
Image(systemName: "dial.min.fill")
Slider(value: $valor, in: 0...100, step: 1)
    .accentColor(Color.green)
    .padding()
    .overlay(RoundedRectangle(cornerRadius: 15.0)
    .stroke(lineWidth: 4.0)
    .foregroundColor(Color.gray))
Image(systemName: "dial.max.fill")

Es recomendable que realices modificaciones en colores, grosor y formas para que veas realmente la facilidad que existe en adaptar este control Slider con SwiftUI al diseño de tu aplicación iOS.

Tutorial Slider SwiftUI

Todo el diseño está dentro de la vista body utilizando VStack y HStack de SwiftUI. Puedes descargar el proyecto Slider con SwiftUI completo creado con Xcode para analizar más a fondo el código.

VStack {
    HStack {

Si tienes cualquier duda sobre este tutorial SwiftUI o crees que se me pasó algo importante por alto, no dejes de indicármelo dejando un comentario.

Aunque cada día que pasa les hago menos caso, sigo estando por las redes sociales: Instagram y Twitter.