Modificadores en SwiftUI: toolbar

Hoy en SwiftBeta vamos a ver el modificador toolbar, éste es uno de los modificadores más útiles que podrás usar al crear tu aplicación en SwiftUI.

Al usar el modificador toolbar, podemos customizar nuestro navigation bar, la barra que aparece en la parte superior o inferior de nuestra View. Podemos customizar la toolbar a nuestra manera, cambiando colores, añadiendo Buttons para lanzar acciones, etc. El único requisito que tenemos para poder usar este modificador es usar NavigationStack. Pero no te preocupes que lo vamos a ver todo en este video práctico.

Pero antes, si quieres apoyar el contenido que subo cada semana, suscríbete. De esta manera seguiré publicando contenido completamente grautito en Youtube.

Creamos proyecto en Xcode

Lo primero de todo que vamos hacer es crear nuestro proyecto en Xcode. En la parte de Interface vamos a seleccionar SwiftUI ya que vamos a trabajar con este framework de UI.

Una vez creado el proyecto, nos vamos a nuestra vista ContentView. Aquí nos aparece código generado automáticamente al crear el proyecto, lo que vamos hacer es encapsular esta vista en un NavigationStack y ya de paso vamos a cambiar el texto del Text:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("Suscríbete a SwiftBeta! 🚀")
            }
        }
    }
}

Una vez hecho este paso, vamos a añadir nuestra toolbar a la view, tan solo debemos usar el ViewModifier de SwiftUI llamado toolbar, y abrimos llaves. Aquí dentro podemos crear diferentes ToolbarItem que serán las vistas que queremos añadir a la toolbar, vamos a ver un ejemplo:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("Hello, world!")
            }
            .toolbar {
                ToolbarItem {
                    
                }
            }
        }
}

Ahora dentro del ToolbarItem vamos a añadir un Button con el title de Primary:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("Hello, world!")
            }
            .toolbar {
                ToolbarItem {
                    Button("Primary") {}
                }
            }
        }
}

El resultado es que vemos un Button llamado Primary en la parte superior derecha de la pantalla. Si pulsamos este Button podríamos lanzar la acción que queramos: hacer una petición HTTP, navegar a otra pantalla, etc. Ahora imagina que en lugar de tener el Button en esta parte de la pantalla la quieres en el otro extremo, pues es muy sencillo, al usar ToolbarItem podemos usar un parámetro que nos permite customizar su posición. Como hemos visto por defecto lo añade a la derecha, pero hay muchas más posiciones que podemos especificar, vamos a verlo, vamos a añadir otro ToolbarItem justo debajo del anterior y antes de añadirlo voy a comentar el ToolbarItem que ya tenemos:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("Hello, world!")
            }
            .toolbar {
                // ToolbarItem {
                //     Button("Primary") {}
                // }
                ToolbarItem(placement: .navigationBarLeading) {
                    Button("Leading") {}
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Trailing") {}
                }
            }
        }

Si ahora observamos el Canvas, vemos que aparece un Button en la parte izquierda y otro en la parte derecha de nuestra toolbar. Ahora si descomentamos el primer ToolbarItem qué ocurre? vamos a verlo, aparecen 2 Buttons en la parte derecha de nuestra toolbar.

Pero aún podemos customizar más nuestro toolbar, vamos a añadir un Button en la parte inferior, para hacerlo vamos a pasar como parámetro de entrada .bottomBar:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("Hello, world!")
            }
            .toolbar {
                ToolbarItem {
                    Button("Primary") {}
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    Button("Leading") {}
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Trailing") {}
                }
                ToolbarItem(placement: .bottomBar) {
                    Button("Bottom") {}
                }
            }
        }
}

¿qué ocurre si queremos añadir otro .navigationBarTrailing? Puedes probarlo y ver lo que ocurre. Si hay espacio se posicionan 2 Buttons en la derecha del navigation bar y si no caben se crea un Button que al pulsarse muestra el listado de Buttons.

Una vez hemos visto estos cases, vamos a limpiar los ToolbarItems y te voy a enseñar 2 más que podemos usar. En este caso vamos a ver .confirmationAction y .principal:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("Hello, world!")
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Trailing") {}
                }
                ToolbarItem(placement: .confirmationAction) {
                    Button("Confirm") {}
                }
                ToolbarItem(placement: .principal) {
                    Button("Principal") {}
                }
            }
        }
}

Aunque trailing esté el primero, si añadimos un ToolbarItem con confirmationAction, éste acaba teniendo prioridad (puedes modificar el orden y comprobarlo). Y luego tenemos otro case que se llama principal, este valor nos coloca el ToolbarItem en la parte central de la toolbar. Hay más casos que puedes practicar, te los dejo como ejercicio de este video.

toolbar y backgroundColor

Otro tema que os puede interesar es saber cómo cambiar el background color de la toolbar. Para hacerlo podemos usar el modificador .toolbarBackground, pero antes vamos a modificar nuestra View y vamos a añadir un List.

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List(1..<50) { value in
                Text("Celda \(value)")
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Trailing") {}
                }
                ToolbarItem(placement: .confirmationAction) {
                    Button("Leading") {}
                }
            }
            .toolbarBackground(.green, for: .navigationBar)
        }
    }
}

A simple vistas no ha ocurrido nada, pero si hacemos scroll vemos que el background color se modifica a green. Si queremos que siempre esté visible el color, sin necesidad de hacer scroll, podemos usar el mismo modificador de la siguiente manera:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List(1..<50) { value in
                Text("Celda \(value)")
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Trailing") {}
                }
                ToolbarItem(placement: .confirmationAction) {
                    Button("Leading") {}
                }
            }
            .toolbarBackground(.green, for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
        }
    }
}

Ahora en el Canvas aparece la toolbar directamente en green, sin la necesidad de hacer scroll. En el parámetro for podríamos probar otros valores, puedes probar de usar bottomBar y tabBar 👍

Y hasta aquí el video de hoy!

Conclusión

Hoy hemos aprendido a usar otro de los modificadores de SwiftUI llamado toolbar, este modificador nos permite crear una navigationBar o bottomBar en nuestra aplicación. Al hacerlo, podemos añadir diferentes buttons con diferentes acciones. También podemos personalizar la toolbar añadiendo un background color.