NavigationView: temeller, SwiftUI uygulamalarında navigasyon yığını

NavigationView Nedir?

NavigationView, bir ekran hiyerarşisini saran ve bir navigasyon arayüzü sağlayan SwiftUI kapsayıcısıdır. NavigationView içinde NavigationLink çalışır — basıldığında mevcut ekranı yenisiyle değiştiren bir öğe. NavigationView otomatik olarak başlık ve «Geri» düğmesi ile bir navigasyon çubuğu ekler.

NavigationView, SwiftUI ile birlikte iOS 13'te ortaya çıktı. Kavramsal olarak UIKit'teki UINavigationController'ın yerini alır, ancak bildirimsel olarak uygulanır. Manuel push/pop yerine, geliştirici NavigationLink aracılığıyla ekranlar arasındaki ilişkiyi tanımlar. Sistem yığını otomatik olarak yönetir.

NavigationView, .navigationTitle, .navigationBarTitleDisplayMode, .toolbar ve .searchable değiştiricilerini destekler. iOS 16+ için Apple, NavigationView API'sini koruyan ancak NavigationPath aracılığıyla programatik yığın yönetimi ekleyen NavigationStack'i tanıttı. iOS 15 ve altını destekleyen projeler için NavigationView tek seçenek olmaya devam ediyor.

NavigationLink ve Ekranlar Arası Geçişler

NavigationLink, NavigationView veya NavigationStack içinde hedef ekrana geçiş oluşturan bir SwiftUI öğesidir. NavigationLink'e basıldığında, sistem hedef ekranı navigasyon yığınına ekler. Geçiş animasyonu, iOS'ta sağdan standart push'tur ve platforma uyum sağlar.

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

struct DetailView: View {
    let item: Item

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

NavigationLink iki parametre alır: destination — hedef View ve label — kullanıcının bastığı öğe. Listeler için, value ve NavigationLink(value:) ile sözdizimi kullanışlıdır — hücreyi otomatik olarak seçimi kaldırır ve NavigationPath ile çalışır.

NavigationStack vs NavigationView: API Karşılaştırması

iOS 16 ile Apple, NavigationView'in yerine NavigationStack'i tanıttı. NavigationStack bildirimsel sözdizimini korur ancak kritik derecede önemli bir özellik ekler — NavigationPath türünde veya bir Hashable dizisi olan path özelliği aracılığıyla programatik yığın yönetimi.

Minimum sürümü iOS 16+ olan projeler için NavigationStack kullanın. iOS 14-15 desteği için — NavigationView. NavigationStack'in eski sürümler için doğrudan benzeri yoktur, bu nedenle yükseltme uyumluluk kontrolü gerektirir.

Toolbar ve navigationTitle Yapılandırması

.toolbar ve .navigationTitle değiştiricileri navigasyon çubuğunun içeriğini kontrol eder. .navigationTitle ekran başlığını ayarlar, .navigationBarTitleDisplayMode stili seçer: .large (büyük, varsayılan) veya .inline (kompakt, Ayarlar'daki gibi). .toolbar düğmeler, arama ve segmentli kontrol ekler.

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("Profil") {
                    Text("Kullanıcı adı")
                    Toggle("Bildirimler", isOn: $notifications)
                }
            }
            .navigationTitle("Ayarlar")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Kaydet") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable, navigasyon çubuğuna bir arama çubuğu entegre eden başka bir değiştiricidir. Hem NavigationView hem de NavigationStack ile çalışır. Kaydırma sırasında arama otomatik olarak gizlenir ve aşağı kaydırıldığında görünür. Binding String aracılığıyla liste filtrelemeyi destekler.

NavigationPath ile Programatik Navigasyon

NavigationPath, bir navigasyon yığınımı Hashable değerler koleksiyonu olarak temsil eden iOS 16+ türüdür. Geliştirici, programatik geçiş için path'e öğeler ekler, geri dönmek için kaldırır. NavigationPath, derin bağlantıları, push bildirimlerini ve durum geri yüklemeyi destekler.

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

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

        // Derin bağlantı ile programatik geçiş
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:), ekran gösterilecek veri türünü kaydeder. Bu türde bir değer path'e eklendiğinde, sistem otomatik olarak hedef View'i oluşturur. Bu yaklaşım, açık NavigationLink(destination:) yerine geçer ve navigasyonu sıkı türde yapar.

iPad, watchOS ve tvOS'ta NavigationView

NavigationView ve NavigationStack tüm Apple platformlarında çalışır: iOS, iPadOS, watchOS, tvOS ve macOS. Davranış ekrana uyum sağlar. iPad'de NavigationStack, UIKit'teki UISplitViewController'ın yerini alan ve geniş ekranda iki sütun görüntüleyen NavigationSplitView'i destekler.

NavigationSplitView (iOS 16+), ekranı kenar çubuğu (liste) ve ayrıntı olarak böler. iPhone'da kenar çubuğu gizlenir ve yalnızca NavigationLink aracılığıyla ayrıntı gösterilir. iPad'de kenar çubuğu ve ayrıntı bölünmüş modda aynı anda görüntülenir.

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

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

NavigationSplitView, her cihaz için otomatik olarak en uygun görüntüleme modunu seçer. Dikey iPhone'da — yığın, yatay iPad ve iPhone'da — bölünmüş. Geliştiricinin farklı boyut sınıfları için ayrı kod yazması gerekmez.