NavigationView: základy, zásobník navigace v aplikacích SwiftUI

Co je NavigationView?

NavigationView — kontejner SwiftUI, který obaluje hierarchii obrazovek a poskytuje navigační rozhraní. Uvnitř NavigationView funguje NavigationLink — prvek, po jehož stisknutí se aktuální obrazovka nahradí novou. NavigationView automaticky přidává navigation bar s nadpisem a tlačítkem «Zpět».

NavigationView se objevil v iOS 13 spolu se SwiftUI. Koncepčně nahrazuje UINavigationController z UIKit, ale je implementován deklarativně. Místo ručního push/pop vývojář popisuje propojení mezi obrazovkami prostřednictvím NavigationLink. Systém automaticky spravuje zásobník.

NavigationView podporuje modifikátory .navigationTitle, .navigationBarTitleDisplayMode, .toolbar a .searchable. Pro iOS 16+ Apple představil NavigationStack, který zachovává API NavigationView, ale přidává programové řízení zásobníku přes NavigationPath. Pro projekty podporující iOS 15 a starší zůstává NavigationView jedinou možností.

NavigationLink a přechody mezi obrazovkami

NavigationLink — prvek SwiftUI vytvářející přechod na cílovou obrazovku uvnitř NavigationView nebo NavigationStack. Po stisknutí NavigationLink systém přidá cílovou obrazovku do navigačního zásobníku. Animace přechodu — standardní push zprava pro iOS, přizpůsobuje se platformě.

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(items) { item in
                NavigationLink(destination: DetailView(item: item)) {
                    Text(item.title)
                }
            }
            .navigationTitle("Seznam")
        }
    }
}

struct DetailView: View {
    let item: Item

    var body: some View {
        VStack {
            Text(item.description)
                .navigationTitle(item.title)
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

NavigationLink přijímá dva parametry: destination — cílové View, a label — prvek, na který uživatel kliká. Pro seznamy je vhodná syntaxe s value a NavigationLink(value:), která automaticky odznačí buňku a pracuje s NavigationPath.

NavigationStack vs NavigationView: srovnání API

Od iOS 16 Apple představil NavigationStack jako náhradu za NavigationView. NavigationStack zachovává deklarativní syntaxi, ale přidává kriticky důležitou možnost — programové řízení zásobníku prostřednictvím vlastnosti path typu NavigationPath nebo pole Hashable.

Pro projekty s minimální verzí iOS 16+ používejte NavigationStack. Pro podporu iOS 14-15 — NavigationView. NavigationStack nemá přímé analogy pro staré verze, takže upgrade vyžaduje kontrolu kompatibility.

Toolbar a nastavení navigationTitle

Modifikátory .toolbar a .navigationTitle spravují obsah navigačního panelu. .navigationTitle nastavuje nadpis obrazovky, .navigationBarTitleDisplayMode vybírá styl: .large (velký, výchozí) nebo .inline (kompaktní, jako v Nastavení). .toolbar přidává tlačítka, vyhledávání a segmentované ovládání.

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("Profil") {
                    Text("Uživatelské jméno")
                    Toggle("Oznámení", isOn: $notifications)
                }
            }
            .navigationTitle("Nastavení")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Uložit") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable — další modifikátor integrující vyhledávací panel do navigation baru. Funguje jak s NavigationView, tak s NavigationStack. Vyhledávání se automaticky skrývá při rolování a zobrazuje při přejetí dolů. Podporuje filtrování seznamu přes Binding String.

Programová navigace s NavigationPath

NavigationPath — typ iOS 16+, který představuje navigační zásobník jako kolekci Hashable hodnot. Vývojář přidává prvky do path pro programový přechod, odebírá je pro návrat. NavigationPath podporuje hluboké odkazy, push oznámení a obnovení stavu.

struct AppNavigation: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            List(categories) { category in
                NavigationLink("Kategorie \(category.name)",
                               value: category)
            }
            .navigationTitle("Kategorie")
            .navigationDestination(for: Category.self) { category in
                ProductListView(category: category)
            }
            .navigationDestination(for: Product.self) { product in
                ProductDetailView(product: product)
            }
        }

        // Programový přechod přes deep link
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:) registruje datový typ, pro který se má zobrazit obrazovka. Když je do path přidána hodnota tohoto typu, systém automaticky vytvoří cílové View. Tento přístup nahrazuje explicitní NavigationLink(destination:) a činí navigaci striktně typizovanou.

NavigationView na iPad, watchOS a tvOS

NavigationView a NavigationStack fungují na všech platformách Apple: iOS, iPadOS, watchOS, tvOS a macOS. Chování se přizpůsobuje obrazovce. Na iPadu NavigationStack podporuje NavigationSplitView, který nahrazuje UISplitViewController z UIKit a zobrazuje dva sloupce na široké obrazovce.

NavigationSplitView (iOS 16+) rozděluje obrazovku na sidebar (seznam) a detail (podrobnosti). Na iPhone je sidebar skrytý, zobrazuje se pouze detail přes NavigationLink. Na iPadu se sidebar a detail zobrazují současně v režimu split.

struct AdaptiveNavigation: View {
    @State private var selectedCategory: Category?

    var body: some View {
        NavigationSplitView {
            List(categories, selection: $selectedCategory) { category in
                Text(category.name)
            }
            .navigationTitle("Kategorie")
        } detail: {
            ProductListView(category: selectedCategory)
        }
    }
}

NavigationSplitView automaticky vybírá optimální režim zobrazení pro každé zařízení. Na iPhone v režimu na výšku — zásobník, na iPadu a iPhone v režimu na šířku — split. Vývojář nemusí psát samostatný kód pro různé size classy.