Personalización de la Barra de Navegación

Con SwiftUI, podemos ajustar fácilmente el estilo, el tamaño del texto, y el color de fondo del tool bar o barra de navegación para hacerla más acorde con la identidad visual de nuestra aplicación.

Ajustar el título de la navegación

Para comenzar, necesitamos añadir un título a nuestra barra de navegación. Esto se hace usando navigationTitle en el código. A continuación, puedes especificar el texto que deseas que aparezca, por ejemplo, "notes". Si te parece que el texto es demasiado grande, puedes modificar este aspecto utilizando navigationBarTitleDisplayMode, que acepta dos estilos: inline para texto pequeño y centrado, y large por defecto.

.navigationTitle("Notes")
.navigationBarTitleDisplayMode(.inline)

Cambiar el fondo de la barra de navegación

Cambiar el color de fondo puede mejorar la estética de la interfaz de usuario. Utilizamos el modificador toolbarBackground, que recibe un color y una opacidad. Al asignar un color como cyan y ajustar la opacidad, le damos un nuevo aspecto al fondo.

.toolbarBackground(Color.cyan.opacity(0.4), for: .navigationBar)

Cabe destacar que el cambio puede no ser inmediatamente visible en la vista previa debido a cómo SwiftUI maneja las barras de herramientas al hacer scroll.

¿Cómo agregar un botón en la barra de herramientas?

Agregar funcionalidad interactiva en la barra de herramientas puede mejorar significativamente la utilidad de la aplicación. Aquí, aprenderemos a añadir un botón al lado derecho del título en la barra de navegación.

Crear un botón básico

El botón puede ser adicionado usando el modificador toolbar. Inicialmente, creamos un botón básico con texto como "create note" que, aunque no realice ninguna acción al principio, actúa como un marcador visual.

.toolbar {
    Button("Create Note") {
        // Acciones del botón
    }
}

Reemplazar el texto por un ícono

Si prefieres utilizar un ícono en lugar de texto, puedes reemplazarlo con un label que contenga una imagen del sistema, como un símbolo de "+".

.toolbar {
    Button(action: {
        // Acciones del botón
    }) {
        Label("Create", systemImage: "plus")
    }
}

Añadir funcionalidad al botón

Para que el botón realice una acción, como mostrar una hoja o sheet, simplemente elimina el overlay existente y añade el código necesario directamente al botón.

Button(action: {
    showSheet = true
}) {
    Label("Create", systemImage: "plus")
}

¿Cómo implementar navegación con TabViews?

Las TabViews permiten entregar múltiples pantallas organizadas de forma clara y accesible. En el ejemplo a continuación, creamos dos panoramas: una lista de notas y otra de favoritos.

Configurar las TabViews

Para implementar, inicializamos un TabView dentro de nuestra ContentView y envolvemos cada ítem en TabItem con un label que define su icono y título.

TabView {
    ListView(data: allNotes)
        .tabItem {
            Label("Home", systemImage: "house")
        }

    ListView(data: favoriteNotes)
        .tabItem {
            Label("Favorites", systemImage: "heart.fill")
        }
}

Manejar listas de datos

Para que cada TabView muestre datos diferentes, es vital configurar listas separadas. Usa un filtro en tu lista de datos para extraer elementos que sean favoritos.

let favoriteNotes = cards.filter { $0.isFavorite }

Personalizar el contenido de cada Tab

Asegúrate de que los listados de la vista contienen los datos correctos añadiendo una bandera como forFavorites para diferenciar la lista regular de la de favoritos.

// En ListView
var forFavorites: Bool = false

// Uso de la bandera
ForEach(forFavorites ? favoriteNotes : allNotes) { note in
    // Código para cada nota
}

Desafío práctico

¿Te animas a ir un paso más allá? Intenta implementar una respuesta visual para los íconos de favoritos, como cambiar el color del corazón al rojo cuando una nota es favorita. Esto no solo mejorará la interfaz, sino que también facilitará a los usuarios identificar de un vistazo sus preferencias. ¡Nos encantaría conocer tus implementaciones en los comentarios!