iPhone Duo Ayrılmış Bölgeler: Arayüzünüzü Katlama Yerinden Uzak Tutun

iPhone Duo kısmen katlandığında iç ekranın ortası bükülür. Kıvrımın üzerinden geçen metni okumak, oraya denk gelen bir düğmeye dokunmak zordur. Dış ve iç kameralar da yer kaplar. iPhone Duo ayrılmış bölgeleri (reserved regions), sistemin uygulamanıza bu alanların nerede olduğunu söyleme biçimidir; böylece kendi arayüzünüzü onlardan uzak tutabilirsiniz. Bu rehber SwiftUI API'sini, katlama yerinin ne zaman etkin sayıldığını, bir bölgenin neler içerdiğini ve tüm bunların masa üstü modunda oynanan oyunlar için ne anlama geldiğini anlatıyor.

Ayrılmış bölgeler iOS 27.1 ile geldi ve SwiftUI ile UIKit'te kullanılabiliyor. Apple'ın Prepare your app for iPhone Duo konuşması, tam ekran iPhone Duo deneyimi için Xcode 27.1'e ihtiyacınız olduğunu söylüyor. API'ler yeni olduğu için ayrıntılar sürümler arasında değişebilir. Bu yazıyı 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 yola çıkarak yazdık. Bu değerleri kendimiz donanım üzerinde ölçmedik.

iPhone Duo'da ayrılmış bölgeler nedir?

Ayrılmış bölge, görünümünüzde başka bir şeyin (genellikle cihaz donanımının) ayırdığı bir alandır. Sarun bunu basitçe şöyle açıklıyor: ayrılmış bölgeler arayüzünüzü koymamanız gereken alanı size söyler.

Apple, Tech Talk'ta iPhone Duo'da üç bölge sayıyor: dış kamera, etkinken iç kamera ve katlama yeri. Bunlar iki türde geliyor.

Katlama yeri bir division'dır, çünkü büyük bir alanı iki küçük alana böler. İçeriğiniz orada gizlenmez, ancak üzerinden geçen her şeyi kullanmak zorlaşır.

Çoğu uygulamanın bu bölgeleri okumasına gerek yok. Apple'ın belgeleri split view, tab bar, uyarı, bağlam menüsü ve sheet gibi framework görünümlerinin katlama yerine ve kameralara zaten uyum sağladığını söylüyor. Bu API'ye özel arayüz için ihtiyacınız var: kayan bir kontrol, özel bir katman, bir oyun HUD'u veya açık frame değerleriyle ya da özel bir Layout ile yerleştirdiğiniz herhangi bir şey. Bir Apple mühendisi geliştirici forumlarında aynı tavsiyeyi verdi: yerleşik kapsayıcıları tercih edin, özel iki görünümlü düzenler için ArrangementView kullanın ve elle yerleştirilen kontroller için ayrılmış bölgeleri kullanın.

SwiftUI'de ayrılmış bölgeleri nasıl okurum?

İçeriğinizi bir GeometryReader ile sarın ve proxy üzerinde reservedRegions(kind:) çağırın. Sarun'un gösterdiği çağrı şu:

GeometryReader { proxy in
    let regions = proxy.reservedRegions(kind: .division)
}

Apple'ın belge sayfasındaki tam imza şöyle:

func reservedRegions(
    kind: ReservedRegion.Kind,
    options: ReservedRegion.QueryOptions = [],
    layoutDirectionBehavior: LayoutDirectionBehavior = .mirrors
) -> [ReservedRegion]

Yalnızca görünümünüzle çakışan bölgeleri, frame değerleri görünümünüzün koordinat uzayında olacak şekilde döndürür. Bir bölge görünümünüzle yalnızca kısmen çakışıyorsa frame değeri negatif koordinatlardan başlayabilir veya görünümünüzün boyutunun ötesine uzanabilir.

Tech Talk, geometry proxy almanın bir başka yolu olarak onGeometryChange değiştiricisinden de söz ediyor. ReservedRegion Equatable olduğu için bölgeleri izleyip state'te saklayabilirsiniz. Bu, Apple örnek kodu değil, bu kalıp için kendi taslağımız:

struct GameBoard: View {
    @State private var folds: [ReservedRegion] = []

    var body: some View {
        BoardView(folds: folds)
            .onGeometryChange(for: [ReservedRegion].self) { proxy in
                proxy.reservedRegions(kind: .division)
            } action: { newValue in
                folds = newValue
            }
    }
}

UIKit'te bir UIView üzerinde reservedRegions(kind:) çağırın ve her bölgenin frame değerini okuyun:

let regions = view.reservedRegions(kind: .division)
let frames = regions.map(\.frame)

Menteşenin kapladığı alan yerine açısının kendisine tepki vermeniz gerekiyorsa iPhone Duo menteşe durumları ve onHingeChange yazısına bakın.

Katlama yerinin bölme bölgesi ne zaman etkindir?

Katlama yeri her zaman bir sorun değil. iPhone Duo düz açıkken ekran kesintisizdir ve içerik ortadan geçebilir. Bu yüzden bölme bölgesi duruşa göre açılıp kapanır.

Sarun, reservedRegions metodunun varsayılan olarak yalnızca etkin bölgeleri döndürdüğünü ve katlama yerinin division bölgesinin yalnızca cihaz katlıyken etkin olduğunu belirtiyor. Apple'ın ReservedRegion belgeleri de aynısını söylüyor: iPhone Duo tamamen açıkken metot hiçbir division bölgesi döndürmez. İç kamera da aynı şekilde, yalnızca kamera kullanımdayken etkin olan bir occlusion bölgesi olarak çalışır. Dış kamera her zaman etkindir.

Etkin olmayan bölgeleri de almak için .includeInactive geçirin:

GeometryReader { proxy in
    let regions = proxy.reservedRegions(
        kind: .division,
        options: .includeInactive)
    let foldIsActive = regions.contains { $0.isActive }
    Text(foldIsActive ? "Folded" : "Flat")
}

Etkin olmayan bir bölgeyi neden isteyesiniz? Apple iki neden veriyor. Etkin olmayan bir bölgenin de bir frame değeri vardır; böylece ona yer bırakabilir ve biri cihazı katladığında düzeninizin sıçramasını önleyebilirsiniz. Ayrıca bundan kaba kararlar çıkarabilirsiniz; örneğin bir division olduğunda ızgarada çift sayıda sütunu tercih etmek gibi. Tech Talk, cihaz düzken katlama yeri bölgesinin genişliğinin sıfır olduğunu da ekliyor; bu yüzden etkin olmayan bölgeleri kesin boşluklar için değil, bu tür kararlar için kullanın.

Bir ReservedRegion içinde neler var?

Her bölge beş özelliğe sahip küçük bir değerdir. Hepsi Apple'ın iOS 27.1 belgelerinde listeleniyor.

Gözden kaçması kolay üç ayrıntı var. Birincisi, (0, 0) ekranın değil, bölgeyi okuduğunuz görünümün sol üst (top-leading) köşesidir. Koordinatların eşleşmesi için bölgeleri içeriğinizi konumlandıran görünümün kendisinde okuyun. Özel bir Layout içinde hesaplarınızı sıfırdan yapın ve bounds.origin değerini yalnızca her alt görünümü yerleştirirken ekleyin.

İkincisi, frame kenar boşluklarını zaten içerir; onları tekrar eklemeyin. Üçüncüsü, frame değerleri sağdan sola yazılan diller için varsayılan olarak aynalanır. İçeriğiniz düzen yönüyle birlikte dönmüyorsa aynalanmamış frame değerleri almak için layoutDirectionBehavior: .fixed geçirin.

Ölçek hakkında fikir vermesi için: Sarun'un dış ekran demosunda iki etkin occlusion bölgesi görünüyor: biri (399, 29) konumunda 37 × 37 punto, diğeri (382, 0) konumunda 84 × 170 punto. Bunlar sağ üst (top trailing) köşedeki kamerayı ve yanındaki durum alanını kaplıyor. Bunları sabit değerler olarak değil, iOS 27.x'ten bir örnek olarak değerlendirin. Frame değerlerini çalışma zamanında okuyun, çünkü görünümünüze göredirler ve sürümler arasında değişebilirler. Aynı sorunun güvenli alan tarafı için iPhone Duo güvenli alanları ve içerik kenar boşlukları yazısına bakın.

Düğmeleri ve metni kıvrımdan nasıl uzak tutarım?

Bir division etkin olduğunda her görünümü tamamen onun bir tarafında tutun. Katlama yerinin hangi yönde uzandığını anlamak için frame'in genişliğini ve yüksekliğini karşılaştırın, ardından panellerinizi buna göre boyutlandırın. Bu görünüm Apple'ın belgelerinden uyarlandı:

struct SplitContent: View {
    var body: some View {
        GeometryReader { proxy in
            if let fold = proxy.reservedRegions(kind: .division).first,
               fold.frame.width > fold.frame.height {
                // Dizüstü bilgisayar gibi katlı: panelleri alt alta dizin.
                VStack(spacing: 0) {
                    ScreenView()
                        .frame(height: fold.frame.minY)
                    Color.clear
                        .frame(height: fold.frame.height)
                    ControlsView()
                        .frame(height: proxy.size.height - fold.frame.maxY)
                }
            } else {
                // Düz veya kitap gibi katlı: tek düzen.
                SingleLayout()
            }
        }
    }
}

Şeffaf boşluk tam olarak division boyutunda; böylece hiçbir şey kıvrıma denk gelmez. Apple'ın tam örneği dikey, kitap tarzı katlamayı da bir HStack ile ele alıyor. iPhone Duo'da tek bir katlama yeri var; bu yüzden .first okumak yeterli.

Apple'ın yönergelerinden birkaç kural burada işe yarıyor:

• Yalnızca gerekeni taşıyın. Uzağa sıçrayan veya kaybolan kontrolleri yeniden bulmak zordur. Küçük ayarlamaları tercih edin ve ilişkili kontrolleri birlikte taşıyın.
• Kaydırılan içerik kaymaya devam etsin. List ve scroll view'lar varsayılan olarak satırlarını katlama yerinin çevresinde bölmez; Tech Talk, kaydırılan içeriğin genellikle kendiliğinden uyum sağladığını söylüyor. Division'ı yalnızca bir satırı okumak veya kullanmak zorlaşırsa kontrol edin.
• Çift sayıda sütun kullanın. Bir ızgarada çift sayıda sütun katlama yerinde temiz bir şekilde bölünür.
• Bir kapsayıcıyı tercih edin. Ekranınız ilişkili iki görünümden oluşuyorsa SwiftUI'de ArrangementView, bölgeleri kendiniz okumanıza gerek kalmadan onları katlama yerinin iki karşı tarafında tutar.

Ayrılmış bölgeler oyun tasarımı için ne anlama geliyor?

Oyunlar genellikle kendi arayüzlerini çizer; bu yüzden sistem onu sizin yerinize taşıyamaz. Katlama yerinin üzerinden geçen bir can çubuğu, ateş düğmesi veya skor, tam olarak Apple'ın kontrol etmenizi söylediği özel içeriktir.

Dizüstü bilgisayar gibi katlanıp masaya konan masa üstü duruşu, düzen sorusunu değiştirir. Tasarımcı Blake Crosley'nin özetlediği Apple tasarım yönergeleri, üst bölgenin insanların uzaktan izlediği içerik için, alt bölgenin ise etkileşimli kontroller için uygun olduğunu söylüyor. Apple'ın yönergeleri ayrıca oyunlardan duruş değiştikçe ekranı doldurmalarını, letterbox yerine en-boy oranını değiştirmeyi tercih etmelerini ve yeniden boyutlandırırken metin ve kontrol boyutlarını tutarlı tutmalarını istiyor.

AppleDuo'daki birçok oyun bu bölünme üzerine kurulu. Battlefleet Duo'da filonuz alt ekranda dururken düşman suları dik durur ve iki oyuncu katlama yerinin iki yanından karşı karşıya oynayabilir. Greens: Mini-golf dizüstü bilgisayar gibi katlanır: alt yarıda vuruş yaparsınız, dik duran yarı bir caddie kamerasına dönüşür. Bu oyunları mağaza sayfalarından yola çıkarak anlatıyoruz; dahili olarak hangi API'leri kullandıklarını bilmiyoruz.

Kendi oyununuz için API'den birkaç kalıp çıkıyor:

• Katlama yerini HUD'unuzda bir dikiş yeri olarak görün. Division frame'ini sınır olarak kullanıp dokunmatik kontrolleri düz yarıya, durum bilgilerini dik yarıya sabitleyin.
• Oyun alanının önemli kısımlarını açık tutun. Arka plan görsellerinin kıvrımın üzerinden geçmesi sorun değil, ancak birinin dokunması gereken bir hedef, kart veya karo için bu geçerli değil.
• İki yönü de planlayın. Kitap tarzı katlama dikey uzanır; bu, iki oyuncu veya yan yana iki tahta gibi bir bölünmeye uygundur. Dizüstü bilgisayar tarzı katlama ise yatay uzanır.
• Düzen sıçramalarından kaçının. Ani bir kayma oyunu bozacaksa .includeInactive ile sorgulayın ve alanı önceden ayırın.

Daha fazla örnek Built for the Fold sayfamızda.

Önemli çıkarımlar

• iOS 27.1 ile gelen ayrılmış bölgeler, arayüzünüzün kullanmaması gereken alanları işaretler. iPhone Duo'da bunlar dış kamera, etkinken iç kamera ve katlama yeridir.
• Katlama yeri için proxy.reservedRegions(kind: .division), kameralar için .occlusion çağırın. UIKit'te aynı metot UIView üzerinde var.
• Katlama yerinin division bölgesi yalnızca iPhone Duo kısmen katlıyken etkindir. Düzken almak için .includeInactive geçirin ve isActive değerini kontrol edin.
• Her ReservedRegion, görünümünüzün koordinatlarında, punto cinsinden ve margins zaten dahil edilmiş bir frame içerir. Bunu içeriğinizi yerleştiren görünümde okuyun.
• Standart kapsayıcılar katlama yerini zaten ele alır. Ayrılmış bölgeleri özel kontroller, katmanlar ve oyun HUD'ları için kullanın; dokunulabilir her şeyi kıvrımın tek bir tarafında tutun.

Sırada, ArrangementView'un iki görünümlü düzenlerde katlama yerini nasıl ele aldığına bakın ya da iPhone Duo uygulama hazırlık kontrol listesini gözden geçirin.