Skip to content

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Latest commit

 

History

1 Commit

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 

Repository files navigation

SwiftUI Multiplatform Navigation & TabBar (iOS & macOS)

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.


🌟 Características Principales

1. Adaptabilidad Multiplataforma Inteligente

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 NavigationSplitView de tres/dos columnas con barra lateral izquierda persistente o colapsable.

2. TabView Adaptativo (Tahoe - iOS/iPadOS 18+)

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

3. Buscador Global Inteligente

  • 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).

4. Layout Adaptativo de Perfil y Ajustes

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 (HStack con List y 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.

📂 Estructura del Proyecto

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

🛠️ Tecnologías y Requisitos

  • Lenguaje: Swift 5.10+ / SwiftUI
  • IDE: Xcode 16.0 o superior
  • Sistemas Operativos Mínimos:
    • iOS 18.0+ (para soporte de .sidebarAdaptable y .tabViewCustomization)
    • macOS 15.0+
  • Frameworks Utilizados:
    • SwiftUI (Navegación, Animaciones, Efectos visuales)
    • SwiftData (Preparado para persistencia)

🚀 Cómo Empezar

  1. Clona este repositorio o descarga el código fuente.
  2. Abre el archivo Tabbarexample.xcodeproj en Xcode.
  3. 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.
  4. Presiona ⌘ + R (Run) para compilar y ejecutar la aplicación.

💡 Detalles de Implementación Destacados

Configuración del TabView Adaptativo (Tahoe) en iOS

TabView(selection: $selectedTab) {
    Tab("Inicio", systemImage: "house", value: .home) {
        HomeView()
    }
    .customizationID("home")
    
    // ... otras pestañas ...
}
.tabViewStyle(.sidebarAdaptable)
.tabViewCustomization($tabViewCustomization)

Atajo de Teclado del Buscador en macOS

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

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages