Personalización de Tool Bar y Navegación con TabViews en SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Contenido del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:31

Personalización de Tool Bar y Navegación con TabViews en SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Clase 21 de 23

Clase 21 / 23

Recursos

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!

Resumen

Ajustar el título de la navegación

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

Cambiar el fondo de la barra de navegación

.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?

Crear un botón básico

.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

Fundamentos de SwiftUI y desarrollo de Interfaces

Creación de Apps Modernas con SwiftUI

Crea tu primera app de notas en SwiftUI

Uso de Modifiers en SwiftUI para Personalizar Vistas

Dibujo y Personalización de Íconos e Imágenes en Xcode

Creación de Layouts Complejos con Stacks en SwiftUI

Scroll View y Stacks: Creación de Listas y Carruseles en SwiftUI

Listas nativas en SwiftUI con datos reales

Buenas prácticas en SwiftUI: Creación y organización de vistas y modelos

Interacción del Usuario y Componentes de Entrada

Creación y Funcionalidad de Botones en SwiftUI

TextField y TextEditor en SwiftUI

Uso de Pickers en SwiftUI para Selección de Fechas y Opciones

Implementación de Sliders y Toggles en SwiftUI

Formulario de notas con SwiftUI

Alerts y Sheets para mostrar formularios

Gestos en SwiftUI: tap, drag y long press

Animaciones y Transiciones en SwiftUI con ProgressView

Manejo del Estado y Arquitectura con ViewModels

Cómo crear tu primer ViewModel en SwiftUI

Conexión de datos en apps con Environment Object en SwiftUI

Creación de Componentes Reutilizables con @Binding en SwiftUI

Navegación Avanzada

Navegación SwiftUI de lista a detalle

Personalización de Tool Bar y Navegación con TabViews en SwiftUI

Lanzamiento de la app

Añadir botón de favoritos y configurar icono de aplicación

Lanzamiento de tu Primera App con SwiftUI en el Simulador

Personalización de Tool Bar y Navegación con TabViews en SwiftUI

Progreso del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Recursos

Recursos