SwiftUI es un poderoso framework que recién salió del horno y fue presentado recientemente el la WWDC de Apple en Junio del presente año; es un framework que solo funciona para crear apps en iOS 13 en adelante y hoy veremos una introducción a este framework que nos permite crear interfaces mucho más fácilmente y con menos líneas de código que con el enfoque tradicional.

¿Por qué desarrollar nuestras aplicaciones en SwiftUI?

Con este poderoso framework, podemos desarrollar bajo un solo código para prácticamente todas las plataformas de Apple, desde macOS, watchOS el nuevo iPadOS y por supuesto iOS; podemos crear nuestras aplicaciones mediante una librería que nos ofrece una interfaz para nuestros componentes, una librería declarativa como hacemos para crear nuestras aplicaciones el Flutter pero con Swift.

La lógica para programar una aplicación en SwiftUI es mucho más sencilla que en Swift; para construir una aplicación en Swift al menos debes de trabajar en dos secciones, la vista mediante el main storyboard y el controlador, en SwiftUI podemos hacer todo desde un archivo con extensión .swift en la cual contenemos de alguna manera el controlador y la vista.

Múltiples archivos y estructuras para definir tus componentes de vista (listas, botones, etc) en SwiftUI

La estructura básica es similar a la de Flutter, en la cual tenemos una especie de árbol de widgets o si lo quieres ver más genérico, de componentes que nosotros vamos profundizando a medida que tengamos más y más elementos o estos sean más completos y complejos.

Otro punto fundamental es que podemos desarrollar múltiples componentes (un grupo de elementos de vistas) en un mismo archivo; por lo tanto podemos fragmentar nuestra interfaz en múltiples componentes, por ejemplo, un componente para un listado, otro para el detalle o cada item de ese listado y otro para la cabecera (por ejemplo):

struct CoruseView : View {
    var course = coursesData[0]
    
    var body: some View {
       
        return VStack(alignment: .leading) {
            Text(course.title)
                .font(.title)
                .fontWeight(.bold)
                .foregroundColor(.white)
                .padding(20)
                .lineLimit(4)
                //.frame(width: 150)
            Spacer()
            Image(course.image)
                .resizable()
                .renderingMode(.original)
                .aspectRatio(contentMode: .fit)
                .frame(width: 246, height: 150)
            .padding(.bottom, 30)
            }.background(course.color)
            .cornerRadius(30)
            .frame(width: 246, height: 360)
            .shadow(color: course.shadowColor, radius: 20, x: 0, y: 0)
       
    }
}

Y en nuestra vista principal:

            ScrollView(showsHorizontalIndicator: false) {
                HStack(spacing: 30) {
                    // ForEach(0 ..< 3) { item in
                    ForEach(courses) { course in
                        NavigationLink(destination: CoruseView(course: course)) {
                            CoruseView()
                        }
                    }
                    }.padding(.leading, 50)
            }

Y todo esto lo podemos guardar en un mismo archivo o en diferentes archivos, en diferentes carpetas, lo que nos trae un punto bueno y malo; el bueno es que podemos organizar nuestro proyecto como nosotros queramos en múltiples carpetas/archivos etc y lo malo tambien es precisamente ese punto, que al no tener una organización fija, puede traernos problemas al trabajar con proyectos de otras personas o en un equipo de trabajo.

Iterar elementos de vista

Con SwiftUI podemos iterar fácilmente elementos de vista mediante una estructura ForEach y de esta manera evitar replicarlos manualmente, Por ejemplo, para tener un simple listado de elementos necesitas un componente List y dentro de este un componente Text:

List {
    ForEach(categories.identified(by: \.self)) { key in
        Text(key)
    }
}

Por ejemplo, si tenemos una estructura de usuarios:

        NavigationView{
            VStack {
                List{
                    ForEach(users) { user in
                        Text(user.username)
                    }
                }.navigationBarTitle(Text("Personajes"))
                
            }
        }

Esto es simplemente declarativo, es una forma de hacerlo, lo único que tienes que tener presente es que con un ForEach podemos crear elementos de vista de manera dinámica.

Por supuesto, esta lista de categories debe tener una estructura que lo veremos más adelante en otra entrada...

ForEach, HStack para apilar de manera horizontal, imágenes y textos

Ahora, si quieres tener un listado más interesante podrías crear otro componente y establecer una imagen y un texto; por lo tanto, ahora tendrías 3 componentes (sin contar los componentes de texto e imagen que estás empleando en este mismo componente) y de una aprovechamos e indicamos que queremos colocar una alineación; así como ocurre con los LinearLayout en Android o los mismos VStack en Swift clásico, aquí tenemos un par de componente para alinear o colocar elementos de manera vertical u horizontal:

List {
ForEach(categories.identified(by: \.self)) { key in
   HStack(alignment: .top, spacing: 0) {
        Image(key.image)
        Text(key.name)
    }
}

Y con el parámetro alignment podemos alinearlos hacia el top, bottom, leading y luego indicamos que no queremos espaciado.

Reutilizar componentes en otros archivos

Anteriormente te comenté que podíamos fragmentar una vista, que corresponde a un solo archivo en múltiples componentes que a la final eran struct que contenían nuestros elementos de vista; pero como vez, vamos teniendo más código y perfectamente podemos colocar todo ese en un archivo aparte y de esta manera poder reutilizarlas cuando nosotros queramos y tener mejor orden:

struct CategoryItem: View {
   var landmark: Landmark
   var body: some View {
       VStack(alignment: .leading) {
           landmark
               .image(forSize: 155)
               .cornerRadius(5)
           Text(landmark.name)
               .font(.caption)
       }
       .padding(.leading, 15)
   }
}

Este código lo puedes guardar en un nuevo archivo de tipo SwiftUI con el nombre que tu quieras.

El componente es un struct y luce como el mostrado en el ejemplo anterior, en el cual recibe como parámetro una data, que es la que vamos a emplear para la construcción del componente, la cual colocamos en una vista tipo Stack o pila vertical y simplemente colocamos una imagen (cuyo componente es el Image) y un texto, además empleamos una serie de funciones que son conocidos como modificadores para personalizar estilos de estos elementos.

Ahora, podemos emplear este nuevo bloque compuesto creado por nosotros en cualquier otro componente, por ejemplo, el componente principal:

ScrollView(showsHorizontalIndicator: false) {
    HStack(alignment: .top, spacing: 0) {
        ForEach(self.items) { landmark in
            CategoryItem(landmark: landmark)
        }
    }
}

Recursos y tutoriales para desarrollar tus aplicaciones en SwiftUI

Por supuesto vas a querer más que un listado, por ejemplo, una imagen promocional lo que sería otro componente que puede tener otros componentes, ya sean los bases o alguno definido por ti; como ejemplificamos anteriormente, puedes crearte todos los componentes que quieras, añadirlos cuantas veces quieras y darle la forma que desees que tenga tu aplicación.

Aquí el propósito de estos ejemplos, es más que entiendas el código que lo iremos analizando poco a poco y te dejo tambien al final del post unos vídeos tutoriales gratuitos para que empieces a crear tus aplicaciones con SwiftUI, es que veas la lógica de programación y la forma en la que podemos construir nuestras aplicaciones como si fueran bloques de construcción.

De igual manera, tu mejor aliado es la documentación oficial en el siguiente enlace..

Esta es una idea que no es nueva, pero es muy interesante, nos permite desarrollar más rápidamente ya que estamos como construyendo con bloques de lego, bloques de lego en donde cada bloque es un componente distinto que puede ser un texto, listado una imagen o alguno creado por ti.

Los datos los podemos tener en local en archivos, json, o cualquier otro componente o traernoslo de un servidor.

Podemos darles un estado a nuestros componentes, que en otras palabras significa que al variar el estado varía nuestros componentes asociados de manera directa e inmediata; de esta forma nos ahorramos mucho pero mucho código.

Puedes ver en el vídeo anterior y darte cuenta de la diferencia; en esta oportunidad estamos declarando elementos de la vista, en nuestro archivo, así como hace Flutter que todos nuestros componentes de interfaz son Widgets, aquí tenemos una organización similar en la cual componemos elementos que hacen referencia a un elemento de la interfaz mediante código, y podemos extender sus características mediante funciones.

Xcode para desarrollar tus aplicaciones con SwiftUI

Para desarrollar tus aplicaciones en SwiftUI es necesario que dispongas de xCode 11 o posterior que para la presente fecha el mismo se encuentra en fase beta; es un framework algo pesado, unos 11 gb pero cuando lo tengas descargado e instalado en tu Mac (la instalación es lo tradicional en ambientes Mac) ya estarás listo para empezar a desarrollar tus primeras aplicaciones; puedes descargarlo de la siguiente página Using Apple Beta Software.

En el site oficial de Apple podrás obtener tutoriales para que conozcas cómo empezar a trabajar con este interesante framework que nos brinda Apple: SwiftUI Better apps. Less code Aquí verás recursos, descripciones y un interesante tutorial para dar los primeros pasos.

Y por supuesto, la documentación oficial, sin ejemplos ni nada con lo que distraerce: Framework SwiftUI.