Güvenli Alan bir düzen kılavuzudur ( Güvenli Alan Yerleşim Kılavuzu ) .
Görünümünüzün çubuklar ve diğer içerikler tarafından etkilenmeyen bölümünü temsil eden düzen kılavuzu. İOS 11 ve sonraki sürümlerinde, Apple üst ve alt düzen kılavuzlarını kullanımdan kaldırıyor ve bunları tek bir güvenli alan düzeni kılavuzuyla değiştiriyor.
Görünüm ekranda göründüğünde, bu kılavuz görünümün diğer içerik tarafından kaplanmayan kısmını yansıtır. Bir görünümün güvenli alanı, gezinme çubukları, sekme çubukları, araç çubukları ve görünüm denetleyicisinin görünümünü gizleyen diğer ataların kapsadığı alanı yansıtır. (TvOS'ta, güvenli alan overscanCompensationInsetsUIScreen'in özelliği tarafından tanımlanan ekran çerçevesini içerir.) Ayrıca, görünüm denetleyicisinin additionalSafeAreaInsetsözelliği tarafından tanımlanan ek alanları da kapsar . Görünüm şu anda bir görünüm hiyerarşisine yüklenmemişse veya henüz ekranda görünmüyorsa, düzen kılavuzu her zaman görünümün kenarlarıyla eşleşir.
Görünüm denetleyicisinin kök görünümü için, bu özellikteki güvenli alan, görünüm denetleyicisinin içeriğinin gizlenmiş olan tüm bölümünü ve belirttiğiniz ek ekleri temsil eder. Görünüm hiyerarşisindeki diğer görünümler için, güvenli alan yalnızca o görünümün gizlenmiş olan kısmını yansıtır. Örneğin, bir görünüm tamamen görünüm denetleyicisinin kök görünümünün güvenli alanı içindeyse, bu özellikteki kenar iç metinleri 0 olur.
Apple'a göre, Xcode 9 - Sürüm notu
Interface Builder, UIViewController'daki kullanımdan kaldırılan Üst ve Alt düzen kılavuzlarının yerine UIView.safeAreaLayoutGuide kullanır. Yeni güvenli alanı kullanmak için, görünüm denetleyicisinin Dosya denetçisinde Güvenli Alan Düzeni Kılavuzları'nı seçin ve ardından içeriğinizle yeni güvenli alan çapaları arasında kısıtlamalar ekleyin. Bu, içeriğinizin üst ve alt çubuklar ile tvOS'taki aşırı tarama bölgesi tarafından gizlenmesini önler. Güvenli alandaki kısıtlamalar, iOS'un önceki sürümlerine dağıtılırken Üst ve Alt'a dönüştürülür.
Mevcut (Üst ve Alt) Düzen Kılavuzu ve Güvenli Alan Düzeni Kılavuzu arasında bir karşılaştırma (benzer görsel efekt yapmak için) basit referans.
Güvenli Alan Düzeni:
AutoLayout
Güvenli Alan Düzeni ile nasıl çalışılır?
Çözüm bulmak için şu adımları izleyin:
- Etkin değilse, 'Güvenli Alan Düzeni'ni etkinleştirin.
- Süper görünüm ile bağlantı gösteriyorsa 'tüm kısıtlamaları' kaldırın ve hepsini güvenli yerleşim bağlantı noktasıyla yeniden takın. VEYA Bir kısıtlamaya çift tıklayın ve süper görünümden SafeArea bağlantısına bağlantıyı düzenleyin
Örnek anlık görüntü, güvenli alan düzenini etkinleştirme ve kısıtlamayı düzenleme.
Yukarıdaki değişikliklerin sonucu
SafeArea ile Mizanpaj Tasarımı
iPhone X için tasarlarken, mizanpajların ekranı doldurduğundan ve cihazın yuvarlak köşeleri, sensör muhafazası veya Ana ekrana erişim göstergesi tarafından gizlenmediğinden emin olmalısınız.
Gezinme çubukları, tablolar ve koleksiyonlar gibi standart, sistem tarafından sağlanan UI öğelerini kullanan çoğu uygulama otomatik olarak cihazın yeni form faktörüne uyarlanır. Arka plan malzemeleri ekranın kenarlarına uzanır ve UI öğeleri uygun şekilde yerleştirilir ve yerleştirilir.
Özel düzenleri olan uygulamalar için, özellikle uygulamanız Otomatik Düzen kullanıyorsa ve güvenli alan ve kenar boşluğu düzeni kılavuzlarına uyuyorsa, iPhone X'i desteklemek nispeten kolay olmalıdır.
Örnek kod (Ref from: Safe Area Layout Guide ) :
Kodda kısıtlamalarınızı oluşturursanız, ilgili yerleşim bağlantılarını almak için UIView'un safeAreaLayoutGuide özelliğini kullanın. Nasıl göründüğünü görmek için yukarıdaki Interface Builder örneğini kodda yeniden oluşturalım:
Görünüm denetleyicimizde yeşil görünümün bir özellik olduğunu varsayarsak:
private let greenView = UIView()
ViewDidLoad denilen görünümleri ve kısıtlamaları ayarlamak için bir fonksiyonumuz olabilir:
private func setupView() {
greenView.translatesAutoresizingMaskIntoConstraints = false
greenView.backgroundColor = .green
view.addSubview(greenView)
}
Kök görünümünün layoutMarginsGuide öğesini kullanarak her zamanki gibi önde gelen ve sondaki kenar boşluğu kısıtlamalarını oluşturun:
let margins = view.layoutMarginsGuide
NSLayoutConstraint.activate([
greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
])
Şimdi iOS 11'i hedeflemiyorsanız, yalnızca güvenli alan düzeni kılavuzu kısıtlamalarını # mevcut olanlara sarmanız ve önceki iOS sürümleri için üst ve alt düzen kılavuzlarına geri dönmeniz gerekecek:
if #available(iOS 11, *) {
let guide = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
greenView.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor, multiplier: 1.0),
guide.bottomAnchor.constraintEqualToSystemSpacingBelow(greenView.bottomAnchor, multiplier: 1.0)
])
} else {
let standardSpacing: CGFloat = 8.0
NSLayoutConstraint.activate([
greenView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: standardSpacing),
bottomLayoutGuide.topAnchor.constraint(equalTo: greenView.bottomAnchor, constant: standardSpacing)
])
}
Sonuç:
UIViewUzantıyı takiben , SafeAreaLayout ile programlı olarak çalışmanızı kolaylaştırın.
extension UIView {
// Top Anchor
var safeAreaTopAnchor: NSLayoutYAxisAnchor {
if #available(iOS 11.0, *) {
return self.safeAreaLayoutGuide.topAnchor
} else {
return self.topAnchor
}
}
// Bottom Anchor
var safeAreaBottomAnchor: NSLayoutYAxisAnchor {
if #available(iOS 11.0, *) {
return self.safeAreaLayoutGuide.bottomAnchor
} else {
return self.bottomAnchor
}
}
// Left Anchor
var safeAreaLeftAnchor: NSLayoutXAxisAnchor {
if #available(iOS 11.0, *) {
return self.safeAreaLayoutGuide.leftAnchor
} else {
return self.leftAnchor
}
}
// Right Anchor
var safeAreaRightAnchor: NSLayoutXAxisAnchor {
if #available(iOS 11.0, *) {
return self.safeAreaLayoutGuide.rightAnchor
} else {
return self.rightAnchor
}
}
}
Objective-C örnek kod :
İşte Güvenli Alan Düzeni Kılavuzu için Apple Developer Resmi Belgeleri
İPhone-X için kullanıcı arayüzü tasarımını yönetmek için Güvenli Alan gereklidir. İşte temel yol göstericidir Güvenli Alan Düzeni kullanarak iPhone X için kullanıcı arayüzü tasarımı nasıl
