Este es un proyecto de ejemplo premium que demuestra la implementación de patrones de navegación modernos y adaptativos en SwiftUI para iOS, iPadOS y macOS.
El proyecto destaca por adoptar las últimas APIs de navegación de Apple, incluyendo el nuevo diseño Tahoe presentado en iOS 18 / iPadOS 18, junto con un diseño nativo de barra lateral y un buscador global estilo Spotlight optimizado para macOS.
La aplicación adapta su estructura de navegación automáticamente dependiendo de la plataforma y el tamaño de pantalla:
- iPhone: Barra de pestañas inferior de estilo liquid glass flotante.
- iPad (Regular): Barra de pestañas superior que se integra elegantemente con una barra lateral (Sidebar) interactiva y colapsable.
- macOS: Navegación nativa basada en
NavigationSplitViewde tres/dos columnas con barra lateral izquierda persistente o colapsable.
Uso del nuevo estilo .sidebarAdaptable y personalización dinámica del usuario con .tabViewCustomization. Esto permite:
- Reordenación de pestañas por parte del usuario.
- Pestañas primarias e interacciones nativas con animaciones fluidas.
- Soporte para roles específicos (por ejemplo, el rol de búsqueda nativo
.search).
- iOS/iPadOS: Una pantalla de búsqueda completa con filtros de categorías mediante pills animados, un panel informativo con estadísticas del contenido indexado y navegación profunda instantánea a las secciones correspondientes.
- macOS: Un buscador flotante estilo Spotlight que se activa mediante el atajo de teclado Command + F (⌘F) o un botón en la barra de herramientas. Cuenta con efectos de desenfoque de fondo (ultraThinMaterial), sombras fluidas, filtros de categoría y micro-animaciones al pasar el cursor (hover).
Implementación de un diseño Maestro-Detalle inteligente:
- En macOS y iPad (Regular), el panel de ajustes se presenta en un diseño de pantalla dividida (
HStackconListy vista de detalle), evitando navegación innecesaria. - En iPhone (Compact), transiciona automáticamente a una navegación jerárquica nativa empujando las vistas en el
NavigationStack.
La estructura del código sigue el patrón MVVM y está organizada de forma modular:
Tabbarexample/
├── TabbarexampleApp.swift # Punto de entrada (dirige a ContentView o MacContentView)
├── Model/
│ ├── Item.swift # Modelo de datos base (SwiftData ready)
│ └── Color+Extensions.swift# Colores del sistema adaptados para iOS/macOS
└── View/
├── ContentView.swift # Contenedor de pestañas adaptativo (iOS/iPadOS)
├── Home/
│ └── HomeView.swift # Vista principal con cuadrícula de contenido
├── Favorites/
│ └── FavoritesView.swift# Vista de contenidos favoritos
├── Explore/
│ └── ExploreView.swift# Cuadrícula adaptativa de lugares
├── Search/
│ └── SearchView.swift # Buscador global interactivo y estadísticas (iOS)
├── Navigation/
│ ├── AppTab.swift # Enum que define las pestañas de la aplicación
│ └── MacContentView.swift # Estructura macOS, atajos y ventana flotante Spotlight
└── Profile/
├── ProfileView.swift# Vista de perfil con comportamiento Split adaptable
└── Settings/ # Subvistas de configuración (Notificaciones, Apariencia, etc.)
- Lenguaje: Swift 5.10+ / SwiftUI
- IDE: Xcode 16.0 o superior
- Sistemas Operativos Mínimos:
- iOS 18.0+ (para soporte de
.sidebarAdaptabley.tabViewCustomization) - macOS 15.0+
- iOS 18.0+ (para soporte de
- Frameworks Utilizados:
- SwiftUI (Navegación, Animaciones, Efectos visuales)
- SwiftData (Preparado para persistencia)
- Clona este repositorio o descarga el código fuente.
- Abre el archivo
Tabbarexample.xcodeprojen Xcode. - Selecciona el dispositivo de destino o simulador:
- Para probar el menú adaptativo superior/barra lateral, utiliza un iPad en modo horizontal o un Mac.
- Para probar la barra flotante inferior, utiliza cualquier iPhone.
- Presiona
⌘ + R(Run) para compilar y ejecutar la aplicación.
TabView(selection: $selectedTab) {
Tab("Inicio", systemImage: "house", value: .home) {
HomeView()
}
.customizationID("home")
// ... otras pestañas ...
}
.tabViewStyle(.sidebarAdaptable)
.tabViewCustomization($tabViewCustomization).toolbar {
ToolbarItem(placement: .primaryAction) {
Button {
showSearch.toggle()
} label: {
Label("Buscar", systemImage: "magnifyingglass")
}
.keyboardShortcut("f", modifiers: .command) // Atajo Command+F
}
}Desarrollado con ❤️ para demostrar el potencial de SwiftUI multiplataforma.