Safe Area è una guida di layout (Guida di layout di Safe Area ) .
La guida al layout che rappresenta la parte della vista non oscurata da barre e altri contenuti. In iOS 11+, Apple sta deprecando le guide di layout superiore e inferiore e le sostituisce con una singola guida di layout di area sicura.
Quando la vista è visibile sullo schermo, questa guida riflette la parte della vista che non è coperta da altri contenuti. L'area sicura di una vista riflette l'area coperta da barre di navigazione, barre delle schede, barre degli strumenti e altri antenati che oscurano la vista di un controller di vista. (In tvOS, l'area sicura incorpora la cornice dello schermo, come definita dalla overscanCompensationInsetsproprietà di UIScreen.) Copre anche qualsiasi spazio aggiuntivo definito dalla additionalSafeAreaInsetsproprietà del controller di visualizzazione . Se la vista non è attualmente installata in una gerarchia di vista o non è ancora visibile sullo schermo, la guida del layout corrisponde sempre ai bordi della vista.
Per la vista radice del controller di visualizzazione, l'area sicura in questa proprietà rappresenta l'intera parte del contenuto del controller di visualizzazione che è oscurata e tutti gli inserti aggiuntivi specificati. Per altre viste nella gerarchia della vista, l'area sicura riflette solo la parte di quella vista che è oscurata. Ad esempio, se una vista si trova interamente nell'area sicura della vista radice del controller di vista, gli inserimenti dei bordi in questa proprietà sono 0.
Secondo Apple, Xcode 9 - Nota di rilascio
Interface Builder utilizza UIView.safeAreaLayoutGuide in sostituzione delle guide di layout obsolete Top e Bottom in UIViewController. Per utilizzare la nuova area sicura, selezionare Guide layout area sicura nella finestra di ispezione File per il controller di visualizzazione, quindi aggiungere vincoli tra il contenuto e i nuovi ancoraggi area sicura. Questo impedisce che i tuoi contenuti vengano oscurati dalle barre superiore e inferiore e dalla regione di overscan su tvOS. I vincoli nell'area di sicurezza vengono convertiti in Alto e Basso quando si esegue la distribuzione in versioni precedenti di iOS.
Ecco un semplice riferimento come confronto (per ottenere effetti visivi simili) tra la Guida al layout (in alto e in basso) esistente e la Guida al layout in area sicura.
Layout dell'area sicura:
AutoLayout
Come lavorare con il layout dell'area sicura?
Seguire questi passaggi per trovare la soluzione:
- Abilita 'Layout area sicura', se non abilitato.
- Rimuovere "tutti i vincoli" se mostrano una connessione con Super View e ricollegare tutti con un ancoraggio di layout sicuro. OPPURE Fare doppio clic su un vincolo e modificare la connessione dalla vista super all'ancoraggio SafeArea
Ecco un'istantanea di esempio, come abilitare il layout dell'area sicura e modificare il vincolo.
Ecco il risultato delle modifiche sopra
Progettazione del layout con SafeArea
Quando si progetta per iPhone X, è necessario assicurarsi che i layout riempiano lo schermo e non siano oscurati dagli angoli arrotondati del dispositivo, dalla custodia del sensore o dall'indicatore per accedere alla schermata Home.
La maggior parte delle app che utilizzano elementi dell'interfaccia utente standard forniti dal sistema come barre di navigazione, tabelle e raccolte si adattano automaticamente al nuovo fattore di forma del dispositivo. I materiali di sfondo si estendono ai bordi del display e gli elementi dell'interfaccia utente sono opportunamente inseriti e posizionati.
Per le app con layout personalizzati, anche il supporto di iPhone X dovrebbe essere relativamente semplice, soprattutto se l'app utilizza il layout automatico e aderisce alle guide di layout dell'area sicura e dei margini.
Ecco un esempio di codice (Rif. Da: Guida al layout dell'area sicura ) :
se si creano vincoli nel codice, utilizzare la proprietà safeAreaLayoutGuide di UIView per ottenere gli ancoraggi di layout pertinenti. Ricreamo l'esempio sopra di Interface Builder nel codice per vedere come appare:
Supponendo che abbiamo la vista verde come proprietà nel nostro controller di vista:
private let greenView = UIView()
Potremmo avere una funzione per impostare le viste e i vincoli chiamati da viewDidLoad:
private func setupView() {
greenView.translatesAutoresizingMaskIntoConstraints = false
greenView.backgroundColor = .green
view.addSubview(greenView)
}
Crea i vincoli di margine iniziali e finali come sempre usando layoutMarginsGuide della vista radice:
let margins = view.layoutMarginsGuide
NSLayoutConstraint.activate([
greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
])
Ora, a meno che non si stia prendendo di mira solo iOS 11, sarà necessario racchiudere i vincoli della guida del layout dell'area sicura con #available e tornare alle guide di layout superiore e inferiore per le versioni precedenti di iOS:
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)
])
}
Risultato:
Dopo l' UIViewestensione, ti consente di lavorare con SafeAreaLayout in modo programmatico.
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
}
}
}
Ecco il codice di esempio in Objective-C :
Ecco la documentazione ufficiale per gli sviluppatori Apple per la guida al layout delle aree sicure
Area protetta è necessaria per gestire il design dell'interfaccia utente per iPhone-X. Ecco le linee guida di base su Come progettare l'interfaccia utente per iPhone-X usando Safe Area Layout
