DEV Community

Cover image for Mis primeros pasos con SwiftUI
mrGoonies
mrGoonies

Posted on

Mis primeros pasos con SwiftUI

Muchas gracias por leer mi artículo espero que lo disfrutes y sobretodo que puedas rescatar ideas y así ayudarte en tu aprendizaje.

SwiftUI

Es un framework creado con el lenguaje oficial de Apple, Swift. Una de las grandes ventajas es que nos permite desarrollar aplicaciones de forma mucho más rápida en comparación con UIKit y sobretodo se tardarán mucho menos en compilar debido a que utilizan menos código que una aplicación creada con UIKit. Otro punto a mencionar (considero importante), SwiftUI es el futuro del desarrollo móvil para el ecosistema de Apple y su contraparte será descontinuado.

El concepto más importante que debemos comprender de SwiftUI es que todo lo que veremos en pantalla será una vista o View, a cada View podemos asignarles modificadores, el cual son denomiandos ViewModifier, estos permiten personalizar nuestras vistas y conseguir el diseño que buscamos.

Explicando con ejemplo

Actualmente estoy tomando un tutorial sobre SwiftUI en donde estoy creando una aplicación y estoy utilizando pilas o stacks, el cual nos permiten renderizar nuestras vistas dentro de la App.

Stacks (Pilas)

  • VStack -> Permite renderizar Views de forma Vertical
VStack {
           // View
            Text("🎯🎯🎯\nPUT THE BULLSEYE AS CLOSE AS YOU CAN TO")
           // ViewModifier
                .bold()
                .kerning(2.0)
                .multilineTextAlignment(.center)
                .lineSpacing(4.0)
                .font(.footnote)

            Text("89")
                .kerning(-1.0)
                .font(.largeTitle)
                .fontWeight(.black)
Enter fullscreen mode Exit fullscreen mode
  • HStack -> Cumple la misma función que un VStack pero de forma Horizontal
HStack {
                Text("1")
                    .font(.callout)
                    .bold()

                Slider(value: .constant(50.0), in: 1.0...100.0)

                Text("100")
                    .font(.callout)
                    .bold()
            }

Enter fullscreen mode Exit fullscreen mode
  • ZStack -> No lo e utilizado mucho, sólo para aplicar color al fondo de la pantalla de la app, pero no lo e utilizado con otros fines al mencionado.

De todas formas se vendrá un artículo hablando sobre los Stack en SwiftUI.

La gran ventaja de usar Stack es poder combinarlo entre sí y sacar mayor provecho en la creación de interfaces, dejo el código completo utilizado:

VStack {
            Text("🎯🎯🎯\nPUT THE BULLSEYE AS CLOSE AS YOU CAN TO")
                .bold()
                .kerning(2.0)
                .multilineTextAlignment(.center)
                .lineSpacing(4.0)
                .font(.footnote)

            Text("89")
                .kerning(-1.0)
                .font(.largeTitle)
                .fontWeight(.black)
            HStack {
                Text("1")
                    .font(.callout)
                    .bold()

                Slider(value: .constant(50.0), in: 1.0...100.0)

                Text("100")
                    .font(.callout)
                    .bold()
            }

            Button(action: {
                print("Click the button")
            }, label: {
                Text("Click Me!")
                    .frame(width: 100, height: 46)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            })
        }
        .padding(.all)

Enter fullscreen mode Exit fullscreen mode

Como luce la pantalla con el código anterior:

Ejemplo de swiftui

Me despido, espero que haya sido bastante útil este artículo y sobretodo puedas sacar algo positivo. 😇

Latest comments (0)