iPhone Duo Güvenli Alan ve İçerik Kenar Boşlukları: Geliştirici Rehberi

Yıllarca iPhone'da güvenli alan çoğunlukla üst ve alt kenarın sorunuydu: yukarıda çentik veya Dynamic Island, aşağıda Ana Ekran göstergesi. iPhone Duo'da güvenli alan farklı. Navigasyon, araç çubuğu öğeleri, durum bilgileri ve Live Activities ekranın kenarı boyunca uzanan tek bir dikey çubuğu paylaşabilir; bu yüzden sol ve sağ boşluklar çoğu zaman eşit değildir. Bu rehber neyin değiştiğini, SwiftUI ve UIKit'te hangi API'leri kullanmanız gerektiğini ve yayımlamadan önce düzeninizi nasıl kontrol edeceğinizi anlatıyor.

Buradaki her şey Apple'ın iPhone Duo Tech Talk'larından, Apple'ın belgelerinden ve geliştirici forumu yanıtlarından, ayrıca iOS geliştiricisi @sarunw tarafından paylaşılan gönderilerden geliyor. Bu API'leri kendimiz donanım üzerinde test etmedik. Çoğu iOS 27.1 ve Xcode 27.1 ile geldi; bu yüzden ayrıntılar sürümler arasında hâlâ değişebilir.

iPhone Duo'da güvenli alan neden eşit değil?

iPhone Duo'da birçok kontrol ekranın üstünden ve altından yana taşınıyor. Apple'ın "Design for iPhone Duo" Tech Talk'u bunu açıkça söylüyor: kontroller "cihazın kenarı boyunca konumlanır" ve "içeriğin çoğu, kontrollerin arkasında kalmaması için bir kaydırmaya ihtiyaç duyar." Dikey çubuğu iPhone Duo dikey araç çubuğu rehberimizde ayrıntılı olarak ele alıyoruz.

Bu kaydırma, yatay güvenli alan boşluğudur (safe area inset). Apple, Prepare your app for iPhone Duo konuşmasında güvenli alanların "çoğu zaman asimetrik" olduğunu söylüyor; özellikle dikey düğmelerin yatay konumda ve Split View çoklu görevde sol tarafta görünebildiği iPhone Duo'da. Split View'da karşı kenarda başka bir uygulamanın kontrolleri de olabilir; yani iki taraf da önemli.

Dikey çubuk okuma yönünü değil, donanımı izler. Sağdan sola yazılan dillerde çubuk cihazın aynı tarafında kalır; bu yüzden "çubuğun olduğu taraf" ifadesini leading veya trailing ile eşlemeyin. Her kenardaki gerçek boşluğu okuyun.

Yatay güvenli alan boşluklarını nasıl ele alırım?

Apple'ın kuralı kısa: "Karşılıklı kenarlardaki boşlukların eşit olduğunu varsaymaktan kaçının." Ön plan içeriğini güvenli alanın içine yerleştirin, arka planların onun altına uzanmasına izin verin ve boyutları tek bir taraftan değil, boşluklar düşülmüş dikdörtgenden hesaplayın.

SwiftUI içeriği varsayılan olarak zaten güvenli alanın içine yerleştirir. UIKit'te Apple'ın Tech Talk'u yaygın hatayı ve düzeltmesini gösteriyor:

// Kaçının: sol ve sağ boşlukların eşit olduğunu varsayar
let width = view.bounds.width - view.safeAreaInsets.left * 2

// Her tarafı ayrı ayrı ele alın
let width = view.bounds.inset(by: view.safeAreaInsets).width

İlk satır sol boşluğu ikiye katlıyor; çubuk yalnızca bir taraftayken bu her zaman yanlış. İkinci satır her kenarı ayrı ayrı çıkarıyor; bu yüzden her cihazda ve her duruşta çalışıyor.

Arka planlar için Apple, SwiftUI'de .ignoresSafeArea() kullanmayı, UIKit'te ise arka plan görünümünü view.bounds boyutunda ayarlamayı öneriyor. "Design for iPhone Duo" konuşması bir karışım da öneriyor: tüm etkileşimli öğeler boşluklu alanın içinde kaldığı sürece "tam genişlikte bir arka plan görseli veya başlık ile içeri alınmış, kaydırılabilir ön plan içeriği."

Dikey çubuğun altındaki kaydırma içeriğini kırpmam gerekir mi?

Hayır. Bir Apple mühendisi geliştirici forumlarında, çubuğun olduğu taraftaki güvenli alan boşluğunun "scroll view üzerinde otomatik olarak bir içerik boşluğuna dönüşeceğini" açıkladı; böylece tüm içerik erişilebilir kalıyor. Elle kırpmayın.

iPhone Duo'da eşit olmayan kenar boşlukları nedir?

Güvenli alanlar sistem arayüzünün nerede olduğunu söyler. Kenar boşlukları (margins) ise içeriğinizin kapsayıcısının kenarından ne kadar uzakta durması gerektiğini söyler. iPhone Duo'da ikisi de tarafa göre değişebilir.

@sarunw'ye göre iPhone Duo'da "bir tarafta 20 punto, çubuğun yanında 0" var. Bu, Apple'ın yeni kapsayıcı kenar boşluğu kılavuzu (container margin guide) belgeleriyle örtüşüyor: belgeler sistem düzen kenar boşluklarının "iPhone'da 16 ile 20 punto arasında değiştiğini" ve iPhone Duo'da "kenar boşluğunun asimetrik de olabileceğini, dikey bir çubuğun yanındayken cihazın her tarafında farklı değerler uygulanabileceğini" söylüyor. Apple'ın Tech Talk'u nedenini açıklıyor: asimetrik kenar boşlukları ön plan içeriğinin "dikey düğmelere ve durum çubuğuna daha çok yaklaşmasını, karşı taraftaki kenar boşluğunun ise korunmasını" sağlıyor.

Kesin punto değerleri bir Apple spesifikasyonundan değil, bir geliştiricinin gözleminden geliyor. Apple'ın yönergesi, "bu değerleri düzeninize yazmak yerine" kılavuzu okumak veya uygulamak.

SwiftUI'de .contentMargins(for: .container) nasıl kullanılır?

iOS 27.1, bir görünümü bir ContentMarginGuide kadar içeri alan contentMargins(for:edges:alignment:) değiştiricisini ekliyor. SwiftUI tek bir kılavuz sağlıyor: "görünümün içinde bulunduğu kapsayıcının kenar boşlukları" olarak tanımlanan container. edges parametresinin varsayılanı tüm kenarlar, alignment ise isteğe bağlı.

Bu, Apple'ın belgelerindeki örnek. Bir ızgarayı yatay sistem kenar boşluklarıyla hizalıyor:

NavigationStack {
    AlbumGrid()
        .contentMargins(for: .container, edges: .horizontal)
}

Kılavuzda onlar için bir değer olsa bile dışarıda bıraktığınız kenarlar değişmeden kalır. Bu da .horizontal seçeneğini, değişen kenar boşluklarının yatay olanlar olduğu iPhone Duo için iyi bir seçim yapıyor.

Bir görünüm önerilen boyutu doldurmadığında alignment onu kenar boşluklarının içinde konumlandırır. Apple'ın belgeleri, kapsayıcısının kenar boşluklarının sağ alt (bottom-trailing) köşesinde duran bir oluşturma düğmesi kullanıyor:

ZStack {
    MessageList()
    ComposeButton()
        .contentMargins(
            for: .container, alignment: .bottomTrailing)
}

Bu, kaydırma içeriği gibi bir yerleşim için sabit bir uzunluk belirleyen eski contentMargins(_:for:) ve contentMargins(_:_:for:) değiştiricilerinden farklı bir değiştirici. Yenisi sayı yerine bir kılavuz alıyor; böylece değer cihaza, kapsayıcıya ve duruşa göre değişebiliyor.

Kenar boşluklarını GeometryProxy'den okumak

Görünümleri elle yerleştiriyorsanız GeometryProxy, EdgeInsets döndüren contentMargins(for:edges:) metodunu kazanıyor. Mevcut safeAreaInsets değerinin yanında duruyor:

GeometryReader { proxy in
    let margins = proxy.contentMargins(for: .container, edges: .horizontal)
    let safeArea = proxy.safeAreaInsets
    // iPhone Duo'da margins.leading ve margins.trailing farklı olabilir.
    CustomCanvas(leading: margins.leading, trailing: margins.trailing)
}

CustomCanvas, kendi görünümünüz için bir yer tutucu. Buradaki amaç tek bir değer varsaymak yerine iki kenarı ayrı ayrı okumak.

iPhone Duo'da UIKit düzen kenar boşlukları nasıl çalışır?

UIKit'te zaten düzen kenar boşlukları var: layoutMargins, directionalLayoutMargins ve layoutMarginsGuide. Apple'ın Tech Talk'u bunların iPhone Duo'da, tıpkı güvenli alanlar gibi, asimetrik olduğunu söylüyor. İçeriği bir view controller'ın kök görünümünün margins guide'ına sabitlemek bu değerleri ek bir çaba gerektirmeden alır.

Bilmeniz gereken bir değişiklik var. Kenar boşluklarının bozuk göründüğü bir forum başlığında bir Apple mühendisi, "iOS 27.1'de bir UIView'un varsayılan düzen kenar boşluklarının iPhone Duo'da sıfır olduğunu" ve değişikliğin iOS 27.2'de diğer cihazlara da geldiğini açıkladı. Bir view controller, kök görünümüne yine de systemMinimumLayoutMargins veriyor. Bunları bir alt görünümde devralmak için preservesSuperviewLayoutMargins değerini true yapın.

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

// View controller'ın kenar boşluklarını devralması gereken özel bir alt görünüm
cardView.preservesSuperviewLayoutMargins = true

Özel hücre içeriği için aynı mühendis, UIView varsayılanına güvenmek yerine UIListContentConfiguration.cell() üzerinden tercih edilen directionalLayoutMargins değerini okumayı önerdi. Hücreleriniz iPhone Duo'da birdenbire iç boşluklarını kaybederse önce bunu kontrol edin.

Dikey çubuk eski SDK'larla derlenen uygulamaları nasıl etkiler?

Uygulamanızın ekranın ne kadarını kullandığı, derlediğiniz SDK'ya bağlı. Apple üç aşama tanımlıyor:

Eski uygulamalar çalışmaya devam eder, ancak tam deneyimi alamazlar. Eşit olmayan boşluklar ve kenar boşlukları iOS 27.1 SDK ile derlediğinizde önem kazanır, çünkü içeriğiniz artık çubuğun yanındaki kenara kadar uzanır. Apple ayrıca iPhone Duo'nun UIRequiresFullScreen ayarına uyduğunu, ancak biri cihazı açıp kapattığında uygulamanızın yine de yeniden boyutlandığını belirtiyor.

Kamera ayrı bir durum. Apple geliştirici forumlarında, tam genişlikte içerik istediğinizde tüm güvenli alanı yok saymak yerine occlusion bölgelerini sorgulamanızı öneriyor. Ayrılmış bölgeler ve katlama yeri rehberimiz bu API'leri ele alıyor.

Yayımlamadan önce neleri kontrol etmeliyim?

Apple'ın tasarım yönergesi, "düzenlerinizi düzen kenar boşlukları ve yatay güvenli alan boşluklarıyla oluşturmak" ve "sabit genişliklerden, kırılma noktalarından veya belirli bir ekrana bağlı herhangi bir ölçüden" kaçınmak. Bu size kısa bir kontrol listesi veriyor:

1. Xcode 27.1 ve iOS 27.1 SDK ile derleyin, ardından uygulamanızı iPhone Duo simülatöründe her duruşta çalıştırın: kapalı, açık, dikey ve yatay.
2. Kodunuzda safeAreaInsets.left * 2 ve benzeri hesapları arayın. Bunları bounds.inset(by:) veya kenar başına değerlerle değiştirin.
3. 16 veya 20 puntoyu sabit kodlamayın. SwiftUI'de .contentMargins(for: .container, edges: .horizontal) uygulayın veya UIKit'te layoutMarginsGuide öğesine sabitleyin.
4. Varsayılan UIView kenar boşlukları artık iPhone Duo'da sıfır olduğu için iç boşluğunu kaybeden UIKit görünümlerini ve hücrelerini arayın.
5. Her düğmeyi ve metin alanını güvenli alanın içinde tutun. Yalnızca arka planların ve dekoratif görsellerin kenardan kenara uzanmasına izin verin.
6. Karşı kenarda başka bir uygulamanın kontrollerinin bulunabildiği Split View çoklu görevi test edin.
7. Sağdan sola yazılan bir dili test edin. Çubuk cihazın aynı tarafında kalır.

Bütün bir uygulamayı uyarlıyorsanız iPhone Duo hazırlık kontrol listemiz bunu boyut sınıfları, sheet'ler ve menteşeyle birlikte ele alıyor.

Önemli çıkarımlar

• iPhone Duo'da kontroller yanda durabilir; bu yüzden yatay güvenli alan boşlukları üst ve alt kadar önemlidir.
• Sol ve sağ boşlukların eşleştiğini asla varsaymayın. bounds.inset(by: safeAreaInsets) kullanın veya her kenarı okuyun.
• iOS 27.1, dikey bir çubuğun yanında eşit olmayabilen sistem kenar boşlukları için .contentMargins(for: .container, edges: .horizontal) ve GeometryProxy.contentMargins(for:edges:) ekliyor.
• UIKit'te layoutMarginsGuide öğesine sabitleyin ve iOS 27.1'de iPhone Duo'da varsayılan UIView kenar boşluklarının sıfır olduğunu unutmayın.
• Ekranın kenarına ulaşmak için iOS 27.1 SDK ile derleyin, ardından her duruşu, Split View'u ve sağdan sola düzenleri test edin.

Sırada, sistemin çubukları yana nasıl taşıdığını dikey araç çubuğu rehberimizde okuyun ya da ekranı şimdiden en iyi şekilde kullanan uygulamaları Built for the Fold sayfasında görün.