Safe Area est un guide de disposition ( Safe Area Layout Guide ) .
Le guide de mise en page représentant la partie de votre vue qui n'est pas masquée par les barres et autres contenus. Dans iOS 11+, Apple abandonne les guides de mise en page supérieur et inférieur et les remplace par un seul guide de mise en page de zone de sécurité.
Lorsque la vue est visible à l'écran, ce guide reflète la partie de la vue qui n'est pas couverte par d'autres contenus. La zone de sécurité d'une vue reflète la zone couverte par les barres de navigation, les barres d'onglets, les barres d'outils et d'autres ancêtres qui obscurcissent la vue d'un contrôleur de vue. (Dans tvOS, la zone de sécurité incorpore le cadre de l'écran, tel que défini par la overscanCompensationInsetspropriété d'UIScreen.) Elle couvre également tout espace supplémentaire défini par la additionalSafeAreaInsetspropriété du contrôleur de vue . Si la vue n'est pas actuellement installée dans une hiérarchie de vues, ou n'est pas encore visible à l'écran, le guide de disposition correspond toujours aux bords de la vue.
Pour la vue racine du contrôleur de vue, la zone de sécurité de cette propriété représente la partie entière du contenu du contrôleur de vue qui est masquée, ainsi que tous les encarts supplémentaires que vous avez spécifiés. Pour les autres vues de la hiérarchie de vues, la zone de sécurité reflète uniquement la partie de cette vue qui est masquée. Par exemple, si une vue se trouve entièrement dans la zone de sécurité de la vue racine de son contrôleur de vue, les inserts d'arête dans cette propriété sont 0.
Selon Apple, Xcode 9 - Release note
Interface Builder utilise UIView.safeAreaLayoutGuide en remplacement des guides de mise en page Haut et Bas obsolètes dans UIViewController. Pour utiliser la nouvelle zone de sécurité, sélectionnez Guides de mise en page de la zone de sécurité dans l'inspecteur de fichiers du contrôleur de vue, puis ajoutez des contraintes entre votre contenu et les nouvelles ancres de la zone de sécurité. Cela empêche votre contenu d'être obscurci par les barres du haut et du bas, et par la région de surbalayage sur tvOS. Les contraintes de la zone sûre sont converties en haut et en bas lors du déploiement vers des versions antérieures d'iOS.
Voici une simple référence à titre de comparaison (pour créer un effet visuel similaire) entre le guide de disposition (haut et bas) existant et le guide de disposition de zone de sécurité.
Disposition de la zone de sécurité:
Mise en page automatique
Comment travailler avec la disposition de zone sûre?
Suivez ces étapes pour trouver une solution:
- Activez «Disposition de la zone de sécurité», si elle n'est pas activée.
- Supprimez «toutes les contraintes» si elles montrent une connexion avec Super View et reconnectez-les toutes avec une ancre de mise en page sûre. OU Double-cliquez sur une contrainte et modifiez la connexion de la super vue à l'ancre SafeArea
Voici un exemple d'instantané, comment activer la disposition de la zone de sécurité et modifier la contrainte.
Voici le résultat des changements ci-dessus
Conception de la mise en page avec SafeArea
Lors de la conception pour iPhone X, vous devez vous assurer que les mises en page remplissent l'écran et ne sont pas masquées par les coins arrondis de l'appareil, le boîtier du capteur ou l'indicateur d'accès à l'écran d'accueil.
La plupart des applications qui utilisent des éléments d'interface utilisateur standard fournis par le système, tels que les barres de navigation, les tableaux et les collections, s'adaptent automatiquement au nouveau facteur de forme de l'appareil. Les matériaux d'arrière-plan s'étendent jusqu'aux bords de l'affichage et les éléments de l'interface utilisateur sont correctement incrustés et positionnés.
Pour les applications avec des mises en page personnalisées, la prise en charge de l'iPhone X devrait également être relativement simple, surtout si votre application utilise la mise en page automatique et adhère aux guides de mise en page des zones de sécurité et des marges.
Voici un exemple de code (Réf. De: Safe Area Layout Guide ) :
Si vous créez vos contraintes dans le code, utilisez la propriété safeAreaLayoutGuide de UIView pour obtenir les ancres de disposition appropriées. Recréons l'exemple d'Interface Builder ci-dessus dans le code pour voir à quoi il ressemble:
En supposant que nous ayons la vue verte en tant que propriété dans notre contrôleur de vue:
private let greenView = UIView()
Nous pourrions avoir une fonction pour configurer les vues et les contraintes appelées depuis viewDidLoad:
private func setupView() {
greenView.translatesAutoresizingMaskIntoConstraints = false
greenView.backgroundColor = .green
view.addSubview(greenView)
}
Créez les contraintes de marge de début et de fin comme toujours à l'aide du layoutMarginsGuide de la vue racine:
let margins = view.layoutMarginsGuide
NSLayoutConstraint.activate([
greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
])
Maintenant, à moins que vous ne cibliez uniquement iOS 11, vous devrez encapsuler les contraintes du guide de mise en page de la zone de sécurité avec #available et revenir aux guides de mise en page supérieur et inférieur pour les versions antérieures d'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)
])
}
Résultat:
Suite à l' UIViewextension, simplifiez-vous l'utilisation de SafeAreaLayout par programme.
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
}
}
}
Voici un exemple de code en Objective-C :
Voici la documentation officielle des développeurs Apple pour le guide de disposition des zones de sécurité
La zone de sécurité est requise pour gérer la conception de l'interface utilisateur pour iPhone-X. Voici les directives de base pour concevoir une interface utilisateur pour iPhone-X à l'aide de la disposition de la zone de sécurité
