iPhone Duo Tab Bar: TabView ve NavigationSplitView Rehberi

TabView veya UITabBarController kullanan bir uygulamayı iPhone Duo'da çalıştırdığınızda iPhone Duo tab bar artık ekranın altında uzanan bir satır değildir. Yana, navigation ve toolbar öğelerinizi barındıran aynı dikey bar'a taşınır. Split view'lar da değişir: bir NavigationSplitView'da o dikey bar'ı yalnızca bir sütun alır, genişletilmiş bir inspector ise hiç almaz.

Bu rehber tab bar'lara, split view sütunlarına ve inspector'lara ne olduğunu, yer kalmadığında hangi bar'ın geri çekileceğine nasıl karar vereceğinizi ve artık simetrik olmayan bar'ların yanına içeriği nasıl yerleştireceğinizi anlatıyor. Semboller, taşma ve devre dışı bırakma gibi dikey bar'ın genel kuralları için iPhone Duo dikey toolbar rehberimize bakın. Buradaki her şey Apple'ın Raise the bar with iPhone Duo Tech Talk'undan, Apple'ın dokümantasyonundan, Apple'ın forumlarındaki bir DTS özetinden ve @sarunw'nin paylaşımlarından geliyor. API'ler iOS 27.0 ve 27.1 ile yeni geldi; ayrıntılar sürümler arasında değişebilir.

iPhone Duo'da tab bar yana taşınıyor mu?

Evet. Apple'ın Prepare your app for iPhone Duo konuşması, TabView ve UITabBarController'ın tüm duruşlara uyum sağladığını ve sekmelerin iç ve dış ekranlarda "uygun olduğunda dikey dizilerek" göründüğünü söylüyor. Bu, diğer bar'larla aynı bağlamlar demek: dış ekran ve yataydaki iç ekran. İç ekran dikeydeyken bar'lar yatay kalır.

Apple, navigation, toolbar ve tab bar kontrollerinin tek bir bölgeyi paylaştığını anlatıyor ve yerleşimi 90 derece döndürülmüş dikey bir yığın olarak hayal etmeyi öneriyor. Örnekleri üç kombinasyonun hepsini gösteriyor: Notes bir toolbar, Clock bir tab bar, Fitness ise ikisini birden kullanıyor. @sarunw'nin anlattığı gibi yatay sekme satırı "bar'ın alt kısmına yakın dikey bir yığına dönüşüyor." Toolbar öğeleri bar'ın üst kısmını alıyor; Apple'ın önerileri de Back, Close ve Done gibi öne çıkan eylemleri buraya koyuyor.

Bunu iOS 27.1 SDK ile derleyip sistem container'ını kullanarak elde edersiniz. Bir Apple DTS mühendisinin iPhone Duo group lab özeti, uyarlamanın bağımsız bar'lara değil TabView ve UITabBarController container'larına bağlı olduğunu açıkça söylüyor. Özel bir tab bar veya kendi yerleştirdiğiniz bir UITabBar taşınmaz. Mutlaka korumanız gerekiyorsa, dikey toolbar rehberinde anlatıldığı gibi onu toolbarVerticalEdge environment değeri veya verticalBarEdge trait'i ile konumlandırın.

Hangi bar öğeleri dikey olur, hangileri yatay kalır?

Sekmeler bar'ın geri kalanıyla aynı öğe kurallarını izler. Apple'ın Tech Talk'u bunu şöyle anlatıyor: back ve share düğmeleri gibi ikonu olan öğeler eksenlerini dikey olarak değiştirir, edit düğmesi gibi yalnızca metin içeren öğeler ise yatay eksende kalır. @sarunw'nin özeti de aynı: back ve share gibi ikonlu öğeler dikey bar'a taşınır, Edit gibi yalnızca metinli öğeler yatay kalır.

.toolbar {
    ToolbarItem(placement: .primaryAction) {
        Button("Share", systemImage: "square.and.arrow.up") { share() }
    }
    ToolbarItem(placement: .secondaryAction) {
        Button("Edit") { isEditing.toggle() }
    }
}

Bu örnekte Share'in bir sembolü var ve dikey olabilir. Edit'in yalnızca bir başlığı var, bu yüzden yatay kalır. Edit'i dikey bar'da istiyorsanız ona da bir sembol verin; DTS özeti, sistemin yalnızca başlıktan oluşan bir öğeyi dikey olarak göstermeyeceğini söylüyor. Başlığı her öğede koruyun, çünkü sistem onu taşma menülerinde gösterir.

Sekmeler için aynı öneri her Tab için geçerli: Tab("Recents", systemImage: "clock") örneğinde olduğu gibi ona bir başlık ve bir systemImage verin. Badge'ler, metin eklemeden bilgiyi korumanın iyi bir yoludur. Apple'ın konuşması, metin ve sembol içeren bir öğeyi SwiftUI'da .badge(7), UIKit'te item.badge = .count(7) ile sembole dönüştürüyor.

Önce tab bar'ın mı yoksa toolbar'ın mı sıkışacağını nasıl seçerim?

Bir tab bar ve bir toolbar dikey bar'ı paylaştığında, özellikle dış ekran yataydayken, birinin yeri önce tükenir. Apple'ın konuşması iki tür uygulama için iki varsayılan anlatıyor. Podcasts gibi navigasyon odaklı bir view'da birincil hedefler erişilebilir kalsın diye önce toolbar sıkışır. Varsayılan budur. Games uygulaması gibi görev odaklı bir view'da ise sık kullanılan eylemleri görünür tutmak için önce tab bar sıkışır. Kaybeden bar bir taşma düğmesine dönüşür.

iOS 27.1 ile gelen SwiftUI'ın toolbarVerticalCompressionBehavior(_:) modifier'ı tercihi view bazında ayarlar. UIKit'te yine iOS 27.1 ile gelen verticalBarCompressionBehavior özelliğini view controller'ın navigation item'ı üzerinde ayarlayın.

TabView {
    Tab("Recents", systemImage: "clock") {
        NavigationStack {
            RecentsView()
                .toolbar {
                    Button("Up", systemImage: "chevron.up") { moveUp() }
                    Button("Down", systemImage: "chevron.down") { moveDown() }
                }
                .toolbarVerticalCompressionBehavior(.prefersToolbarItems)
        }
    }
}

navigationItem.verticalBarCompressionBehavior = .prefersBarItems

İlk örnek, toolbar öğelerini tercih etmeye örnek olarak Files gibi bir üretkenlik uygulamasını kullanan Apple dokümantasyonunu izliyor. İkincisi Tech Talk'taki UIKit biçimi. Değerler framework'ler arasında biraz farklı:

Toolbar'ın kendi içinde de öncelik hâlâ önemli. @sarunw'nin belirttiği gibi, önemli öğelerin kısıtlı alanda görünür kalması için onlara .visibilityPriority(.high) verin. Dikey toolbar rehberi sıralamayı ve taşmayı ayrıntılı olarak ele alıyor.

İç ekranda tab bar yerine sidebar gösterebilir miyim?

Evet. iPhone'da iOS, iPadOS'taki gibi bir sidebar'a dönüşmek yerine bir tab bar gösterir. iPhone Duo iç ekranında Apple, daha zengin bir navigasyon için sidebar'ı seçmenize izin veriyor. SwiftUI'da defaultTabBarPlacement(_:) modifier'ını sidebarAdaptable stiliyle kullanın. UIKit'te sidebar'ın preferredPlacement değerini ayarlayın. İkisi de iOS 27.0'dan itibaren kullanılabilir.

TabView {
    Tab("Home", systemImage: "house") { HomeView() }
    Tab("Favorites", systemImage: "star") { FavoritesView() }
}
.tabViewStyle(.sidebarAdaptable)
.defaultTabBarPlacement(.sidebar)

tabBarController.sidebar.preferredPlacement = .sidebar

Apple'ın dokümantasyonuna göre defaultTabBarPlacement(_:), iPhone gibi stilin bir sidebar'a veya bir tab bar'a çözümlendiği yerlerde geçerlidir ve bar'ın biçim değiştirebildiği iPadOS'ta etkisi yoktur. UIKit'te otomatik yerleşim iOS'ta bir tab bar'a çözümlenir.

Bir TabView ayrıntısı daha: dikey bar'ı toolbarVerticalBehavior(.disabled) ile devre dışı bırakırsanız, Apple'ın dokümantasyonuna göre bir TabView davranışı seçili sekmeden çözümler. Kullanıcılar sekme değiştirdikçe yerleşim zıplamasın diye bu tercihi sekmeler arasında sabit tutun.

iPhone Duo'da NavigationSplitView'un hangi sütunu dikey bar alır?

Yalnızca detay sütunu. Apple'ın kuralına göre toolbar öğeleri yalnızca container'ları ekran kenarı boyunca uzanıyorsa dikey olabilir; bu yüzden split view'larda yalnızca detay sütunu buna katılır ve diğer sütunların öğeleri yatay kalır. @sarunw bunu şöyle özetliyor: "Bir bar yalnızca container'ı ekran kenarı boyunca uzanıyorsa dikey olur."

DTS özeti iç ekranı açıkça anlatıyor: sistem sidebar veya content sütunu için bar'ları yatay, detay sütunu için ise trailing kenarda dikey olarak gösterir. iPhone Duo kapalıyken NavigationSplitView ve UISplitViewController tek yığınlı navigasyona daralır, açıkken ise sütunlarını yan yana dizer veya üst üste bindirir.

Dış ekran satırı Apple'ın daralma davranışını ve inspector dokümantasyonunu yansıtıyor; yığın daha sonra dış ekranın dikey bar kurallarını izler. En sondaki (trailing) sütun bir split view için toolbarVerticalBehavior'ı da belirlediğinden, devre dışı bırakma ayarını detay sütununun view'una koyun.

NavigationSplitView {
    SidebarList(selection: $selection)
} detail: {
    DetailView(item: selection)
        .toolbar {
            Button("Share", systemImage: "square.and.arrow.up") { share() }
        }
        .inspector(isPresented: $showsInspector) {
            InspectorView(item: selection)
        }
}

Burada Share düğmesi detay sütununda yer alıyor, bu yüzden dikey olabilen öğe o. Sidebar listesine eklediğiniz toolbar öğeleri yatay kalır.

Genişletilmiş bir inspector öğelerini neden yatay tutar?

Apple'ın Tech Talk'u, detay sütunlarının zaten bir dikey bar'ı olduğu için inspector'ların genişletildiklerinde karışıklığı önlemek amacıyla kendi bar'larını almadığını söylüyor. @sarunw'nin ifadesiyle: detay sütununun zaten bir dikey bar'ı var ve "ikinci bir bar onunla rekabet ederdi."

DTS özeti bunun nasıl bir araya geldiğini de anlatıyor. İç ekranda, NavigationSplitView ile derleyip inspector(isPresented:content:) modifier'ını detay view'una uyguladığınızda bir sidebar ve bir inspector bir arada bulunabilir. Inspector, bir bar eklemek yerine detay sütununun trailing yerleşimiyle uyum içinde çalışır. Apple'ın inspector dokümantasyonu ayrıca onun yatayda regular bir size class'ta trailing bir sütun olarak gösterildiğini ve compact bir size class'ta sheet'e dönüştüğünü söylüyor; DTS yanıtları da dış ekranda veya split view daraltıldığında bir sheet olarak göründüğünü belirtiyor.

Uygulamada inspector kontrollerini, yardımcı olduğu yerlerde başlıklarla birlikte yatay bir bar için tasarlayın. Yalnızca inspector'da bulunan eylemler için dikey bar'a güvenmeyin.

Her NavigationSplitView sütunu hangi size class'ı bildirir?

iPhone Duo'da pencerenin size class'ları iyi belgelenmiş durumda: yönden bağımsız olarak dış ekranda compact genişlik, iç ekranda regular genişlik ve yükseklik. iPhone Duo size class rehberimizde tablonun tamamı var. Sütunlar ise ayrı bir konu. @sarunw, iPhone Duo'da NavigationSplitView'daki her sütunun size class'larını gösteren bir tablo paylaştı; buradan çıkarılacak ders, bir sütunun pencerenin değerlerini bildirmek zorunda olmadığıdır.

Bu yüzden size class'ları pencere veya kök düzeyinde değil, yerleşimi yapan sütunun içinde okuyun:

struct DetailView: View {
    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
    let item: Item?

    var body: some View {
        if horizontalSizeClass == .regular {
            WideDetailLayout(item: item)
        } else {
            CompactDetailLayout(item: item)
        }
    }
}

Environment değeri DetailView içinde okunduğu için sütunun kendi trait'lerini yansıtır. Apple'ın Strike a pose konuşması iç ekran için ilgili bir ayrıntı ekliyor: Reminders gibi bir split view uygulamasında sistem, sütunların genişliğini eşit bir 50/50 bölünmeye ayarlayarak iki sütunu da görünür tutar. Sütunlar yerine panelleri kendiniz oluşturuyorsanız, ArrangementView benzer şekilde her panele kendi size class'larını verir.

İçeriği, padding varsaymadan dikey bar'ın yanına nasıl yerleştiririm?

Detay sütununun bir yanında dikey bar, diğer yanında sidebar olduğunda kenar boşlukları iki kenarda aynı değildir. @sarunw'nin önerisi kısa: cihazlar ve yönler arasında simetrik olmayabileceği için padding varsaymayın; layoutMarginsGuide kullanın. Apple'ın Tech Talk'u, iPhone Duo'da layout margin'lerin safe area'lar gibi asimetrik olduğunu söylüyor; böylece ön plandaki içerik dikey düğmelere daha yakın durabilirken karşı kenar boşluğu korunur.

NSLayoutConstraint.activate([
    headerView.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor),
    headerView.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor),
    headerView.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor)
])

layoutMarginsGuide'a sabitlemek her kenarın boşluğunu ayrı ayrı alır; böylece hiçbir şeyin sabit kodlanmış 16 veya 20 point'e ihtiyacı kalmaz. Bar'lar da safe area'nın dışında yerleşir; Apple, dikey bar'ların üst ve alt yerine leading ve trailing inset'ler sağladığını belirtiyor. SwiftUI karşılığı ve inset kurallarının tamamı için iPhone Duo safe area'ları ve content margin'leri rehberine bakın.

Önemli çıkarımlar

• TabView veya UITabBarController kullanın. Sekmeleri, alt kısma yakın bir yığın olarak dikey bar'a taşınır; özel tab bar'lar taşınmaz.
• Her sekmeye ve toolbar öğesine bir sembol ve bir başlık verin. İkonlu öğeler dikey olur, yalnızca metinli öğeler yatay kalır.
• Hangi bar'ın önce sıkışacağını toolbarVerticalCompressionBehavior veya verticalBarCompressionBehavior ile seçin. Varsayılan olarak toolbar sıkışır.
• NavigationSplitView'da yalnızca detay sütunu dikey bar alır; genişletilmiş bir inspector öğelerini yatay tutar.
• Size class'ları her sütunun içinde okuyun ve eşit padding varsaymak yerine içeriği layoutMarginsGuide'a sabitleyin.

Sırada, dikey toolbar rehberimizde dikey bar kurallarının geri kalanını uygulayın, ardından diğer uygulama ve oyunların cihazı nasıl kullandığını Built for the fold sayfasında görün.