SwiftUI'de ArrangementView: iPhone Duo'da Split ve Overlay Farkı

Pek çok ekran aslında birbirine ait iki görünümden oluşur: bir oynatıcı ve sırası, bir sohbet ve fotoğrafları, bir podcast ve dökümü. Normal bir iPhone'da bunları alt alta dizersiniz. iPhone Duo'nun iç ekranında ise yan yana olmalarını istersiniz; biri cihazı yarıya kadar katladığında da hiçbir görünüm katlama çizgisinin üzerine denk gelmemeli. SwiftUI'deki ArrangementView, Apple'ın bu soruna verdiği yanıt. Bu rehber ne yaptığını, iki stilini, menteşe çevresinde boyutlandırmanın nasıl işlediğini ve bunun yerine ne zaman NavigationSplitView'a başvurmanız gerektiğini anlatıyor.

ArrangementView, stilleri ve boyutlandırma değiştiricileri Apple'ın belgelerinde iOS 27.1 ve sonrasında kullanılabilir olarak listeleniyor; tam iPhone Duo deneyimi için derleme yapmak üzere Xcode 27.1'e ihtiyacınız var. Bu API'ler yeni olduğu için ayrıntılar sürümler arasında değişebilir. Aşağıdaki her şey Apple'ın belgelerinden, Strike a pose with adaptive layouts on iPhone Duo Tech Talk'undan ve iOS geliştiricisi Sarun Wongpatcharapakorn'un (@sarunw) paylaşımlarından derlendi. Bu kodu kendimiz donanım üzerinde çalıştırmadık.

SwiftUI'de ArrangementView nedir?

ArrangementView, tam olarak iki görünüm (bir birincil ve bir ikincil) barındıran ve bunları sizin yerinize yerleştiren bir kapsayıcıdır. Apple, Tech Talk'ta arrangement'ları navigasyon kapsayıcıları ile içerik kapsayıcıları arasında duran yeni bir katman olarak tanımlıyor.

Bir arrangement'ı yöneten kurallar üç girdiye bakar: görünümün yatay ve dikey boyut sınıfı, en-boy oranı ve etkin bir bölme bölgesi (division region) olup olmadığı. iPhone Duo'da bölme bölgesi katlama yeridir. Arrangement bu girdilere göre her görünümün görünüp görünmeyeceğine ve hangi çerçeveyi alacağına karar verir. HStack veya VStack ile temel fark da bu: bir stack her alt öğesini her zaman gösterir, bir arrangement ise yer olmadığında ikincil görünümü gizleyebilir. Bir Apple mühendisi geliştirici forumlarında bu daralmanın beklenen davranış olduğunu doğruladı.

UIKit'te aynı kavram, bir birincil ve bir ikincil view controller alan UIArrangementViewController ile karşılanıyor. Bu yazı SwiftUI'ye odaklanıyor.

Uygulamama ArrangementView nasıl eklerim?

Bir arrangement'ı iki sondaki closure ile oluşturur ve bir navigasyon kapsayıcısının içine yerleştirirsiniz. Apple'ın Tech Talk'ta kullandığı yapı şöyle:

var body: some View {
    NavigationStack {
        ArrangementView {
            PlayerView()
        } secondary: {
            UpNextView()
        }
    }
}

İlk closure birincil görünüm, secondary: closure'ı ise ikincil görünüm. Sarun'un diyagramları bunlara "First View" ve "Secondary View" diyor; aynı şey.

Yerleşim önemli. ArrangementView kendi navigasyonunu sağlamaz; bu yüzden navigasyon onun içinde değil, çevresinde olmalı. Apple'ın belgeleri ayrıca bir arrangement'ı scroll view, list, grid veya navigation split view içine koymaktan ve bir arrangement içine navigation split view veya tab view koymaktan kaçınmanızı söylüyor.

Stil seçmek için arrangementViewStyle(_:) uygulayın. Bir arrangement'ın kullandığı eksenleri de sınırlayabilirsiniz:

ArrangementView {
    NowPlayingView()
} secondary: {
    LyricsView()
}
.arrangementViewStyle(.split.axes(.horizontal))

Dışarıda bıraktığınız her eksende arrangement yalnızca birincil görünümü gösterir.

Split mi overlay mı: hangi ArrangementView stilini kullanmalıyım?

İki stil var. Varsayılan stil split'e çözümlenir, overlay ise alternatiftir. Bazı duruşlarda aynı, bazılarında çok farklı davranırlar. Aşağıdaki terimler cihazı izliyor: kapalı, dış ekranı kullandığınız anlamına gelir; yarı açık, iç ekranda kısmen katlanmış hâl; açık ise düz hâl.

Sarun split'i şöyle özetliyor: "her görünümü yan yana koymaya çalışır" ve yeterli alan yoksa yalnızca ilk görünüm gösterilir. Overlay ise "çoğu zaman iki görünümü üst üste dizer" ve katlanmış hâlde ikisi yan yana durur, First View sağda olur; bu, split'in tam tersi. Apple'ın belgeleri de aynı yerleşimi tarif ediyor: katlanmış yatay duruşta overlay ikincil görünümü başa (leading), birincil görünümü sona (trailing) koyar. Bunu tersine çevirmek için birincil görünüme overlayArrangementEdge(.leading) uygulayın.

Apple'ın seçim yönergesi basit. Hiçbir görünümün örtülmemesi gereken ana görünüm ve ayrıntı ilişkisinde (örneğin bir podcast ve dökümü) split kullanın. Belirgin bir ön plan ve arka plan olduğunda (örneğin bir videonun üzerindeki oynatma kontrolleri) overlay kullanın. Mevcut düzeniniz bir HStack veya VStack ise doğal karşılığı split. ZStack ise overlay kullanın.

Overlay arrangement'ta bir görünüm kendi yığın konumunu okuyup sunumunu değiştirebilir. Tech Talk, değer sıfırdan büyük olduğunda görünümü daraltılmış bir biçime geçiriyor:

struct PlayerControls: View {
    @Environment(\.overlayArrangementZIndex)
    private var zIndex: Int

    var body: some View {
        ControlsPanel(isCollapsed: zIndex > 0)
    }
}

ControlsPanel burada sizin kendi görünümünüzü temsil ediyor.

splitArrangementLayoutRatio iPhone Duo'da nasıl çalışır?

Varsayılan olarak bir split arrangement iki görünümü eşit boyutlandırır. Bunu değiştirmek için görünümlerden birine splitArrangementLayoutRatio(_:) uygulayın. Sıfır ile bir arasında isteğe bağlı bir CGFloat alır. Apple'ın örneği şu:

ArrangementView {
    ConversationView()
        .splitArrangementLayoutRatio(0.3)
} secondary: {
    PhotosView()
}
.arrangementViewStyle(.split.axes(.horizontal))

Arrangement önce en yüksek layoutPriority değerine sahip görünümü, onun oranını kullanarak boyutlandırır. Bu oran kalan alandan fazlasını isterse görünüm bunun yerine kalan alanı alır. Oranlar boş alan bırakırsa yüksek öncelikli görünüm o alanı dolduracak şekilde büyür. Apple ayrıca minimum, ideal ve maksimum oranlar için ilgili değiştiricileri, splitArrangementLayoutSize ile açık boyutları ve splitArrangementFixedLayoutSize değiştiricisini belgeliyor.

Önemli bir istisna var. Sarun, yarı açık bir iPhone Duo'da splitArrangementLayoutRatio değerinin yok sayıldığını ve bölmenin her zaman yarı yarıya menteşenin üzerinde durduğunu bildiriyor. Bu mantıklı: 30/70'lik bir bölme, panellerden birinin kenarını katlama çizgisinin üzerine denk getirirdi. Oranınızı düz ekran için tasarlayın ve cihaz katlıyken eşit bir bölme bekleyin. Bu davranışın Apple'ın belgelerinde yazdığını bulamadık; iOS 27.2'de gözlemlenmiş bir davranış olarak değerlendirin.

Eşit bölme, eşit panel boyutu anlamına gelmez. Sarun'un yatay konumda yarı açık bir cihaz diyagramında ekranın her yarısı 475 punto ve durum çubuğu sağ kenar boyunca 84 punto yer kaplıyor. Sonuç olarak ikincil panel daha dar çıkıyor. İki panelin eşleştiğini varsaymak yerine her zaman size verilen boyuta göre düzen kurun.

Katlama yerinin kendisinin nasıl bildirildiğini öğrenmek için ayrılmış bölgelerin iPhone Duo katlama yerini nasıl tanımladığına bakın.

Her ArrangementView paneli hangi boyut sınıflarını alır?

Bir arrangement'taki her panel kendi boyut sınıflarını alır ve bunlar çoğu zaman pencereninkinden farklıdır. Sarun bunları iOS 27.2'de ölçtü. H yatay, V dikey anlamına geliyor.

Buradan iki kural çıkıyor. Birincisi, bölme ekseni compact olur: yan yana düzen her panele compact bir genişlik, alt alta düzen ise compact bir yükseklik verir. İkincisi, iç ekranda (yarı açık veya açık) paneller, iPad'deki bir ArrangementView ile aynı boyut sınıflarını alır.

Yani regular genişlikteki bir iç ekranda duran bir panel yine de compact yatay boyut sınıfı bildirebilir. Her paneli kendi ortamına yanıt verecek şekilde oluşturun ve panelin içinden pencerenin özelliklerini (traits) okumayın. Pencere düzeyindeki değerler için iPhone Duo boyut sınıfları yazımıza bakın.

Bölme yönünü doğrudan da okuyabilirsiniz. splitArrangementAxis ortam değeri bir split arrangement içinde .horizontal veya .vertical, dışında ise nil olur. Apple'ın örneği bunu bir panelin iç düzenini değiştirmek için kullanıyor:

struct DetailsView: View {
    @Environment(\.splitArrangementAxis) var axis

    var body: some View {
        let layout: AnyLayout = axis == .horizontal
            ? AnyLayout(VStackLayout())
            : AnyLayout(HStackLayout())
        layout {
            Artwork()
            Metadata()
        }
    }
}

İkincil görünüm gizlendiğinde kontrolleri de onunla birlikte gider. Bir Apple mühendisi forumlarda, hayatta kalanın o olması için temel görünüme daha yüksek bir layoutPriority vermeyi önerdi. Bu durumda ikincil içeriğe ulaşan bir düğme veya sheet eklemek de isteyebilirsiniz.

ArrangementView mi NavigationSplitView mi: hangisini ne zaman kullanmalıyım?

Farklı sorunları çözerler ve iç içe kullanılmak üzere tasarlanmamışlardır.

Görünümler navigasyon düzeyleri olduğunda (örneğin bir e-posta listesi ve seçili e-posta) NavigationSplitView kullanın. Apple'ın tasarım yönergeleri split view'ların iç ekranda genişlediğini, dış ekranda tek panele daraldığını ve katlama yerine kendiliğinden uyum sağladığını söylüyor. Uygulamanız zaten bir tane kullanıyorsa ArrangementView'a hiç ihtiyacınız olmayabilir.

ArrangementView'u, tek bir hedef içinde aynı ekranda yaşayan iki görünüm için kullanın. Bir video ve kontrolleri, bir tarif ve zamanlayıcısı ya da bir oyun tahtası ve skor tablosu iyi örnekler. Apple'ın iPhone Duo tasarım yönergelerindeki kalıplardan biri masa üstü duruşu: uzaktan görülmekten fayda sağlayan içerik dik duran yarıya, kontroller ise düz yatan yarıya gider. Built for the Fold sayfamızdaki oyunlar bu düzenin ne kadar güçlü olabileceğini gösteriyor.

UIKit'te aynı tavsiye UISplitViewController ve UIArrangementViewController için de geçerli. Bir Apple evangelist'i forumlarda, Apple'ın bir UINavigationController öğesini UIArrangementViewController içine gömmeyi önermediğini belirtti.

Önemli çıkarımlar

• iOS 27.1 ile gelen ArrangementView, birincil ve ikincil bir görünümü boyut sınıflarına, en-boy oranına ve katlama yerine göre yerleştirir. Bir stack'ten farklı olarak ikincil görünümü gizleyebilir.
• Split iki görünümü ayrı alanlarda tutar ve bölünemediğinde yalnızca birincili gösterir. Overlay düz ekranda görünümleri üst üste bindirir ve katlama yerinde birincil sonda (trailing) olacak şekilde ayırır.
• splitArrangementLayoutRatio düz ekrandaki düzeni şekillendirir. Sarun'a göre yarı açık bir iPhone Duo'da yok sayılıyor ve bölme menteşenin üzerinde duruyor.
• Her panel kendi boyut sınıflarını alır ve bölme ekseni compact olur. Ortamı her panelin içinden okuyun.
• ArrangementView'u bir navigasyon kapsayıcısının içine koyun; asla bir list, scroll view veya NavigationSplitView içine koymayın.

Sırada, menteşenin kendisine nasıl tepki vereceğinizi iPhone Duo menteşe durumları ve onHingeChange yazısında öğrenin ya da iPhone Duo uygulama hazırlık kontrol listesini tamamlayın.