Zone de sécurité de Xcode 9
Lors de l'exploration de Xcode9 Beta trouvée Zone de sécurité sur les constructeurs d'interface Afficher le visualiseur de hiérarchie. Je suis devenu curieux et j'ai essayé de connaître la documentation de Safe Area on Apples. Dans Gist, le doc dit "La zone de visualisation qui interagit directement avec la mise en page automatique" Mais cela ne m'a pas satisfait. veux savoir Utilisation pratique de cette nouvelle chose.
Quelqu'un a-t-il un indice?
Conclusion du paragraphe de Apple doc pour Zone sécurisée.
La classe UILayoutGuide est conçue pour exécuter toutes les tâches précédemment exécutées par des vues factices, mais de manière plus sûre et plus efficace. Les guides de mise en page ne définissent pas une nouvelle vue. Ils ne participent pas à la hiérarchie des vues. Au lieu de cela, ils définissent simplement une région rectangulaire dans le système de coordonnées de leur propre vue qui peut interagir avec la présentation automatique.
Zone sécurisée est un guide de présentation ( Guide de présentation des zones sécurisées ) .
Le guide de présentation représentant la partie de votre vue qui n’est pas masquée par les barres et d’autres contenus. Dans iOS 11+, Apple désapprouve les guides de présentation supérieur et inférieur et les remplace par un seul guide de présentation des zones sécurisées.
Lorsque la vue est visible à l'écran, ce guide reflète la partie de la vue qui n'est pas couverte par un autre contenu. La zone sécurisée 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 masquent la vue d'un contrôleur de vue. (Dans tvOS, la zone de sécurité incorpore le cadre de l'écran, défini par la propriété overscanCompensationInsets de UIScreen.) Il couvre également tout espace supplémentaire défini par la propriété additionalSafeAreaInsets 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 sécurisée de cette propriété représente la totalité du contenu du contrôleur de contrôle masqué, ainsi que les encarts supplémentaires que vous avez spécifiés. Pour les autres vues de la hiérarchie, la zone sécurisée ne reflète que la partie de cette vue masquée. Par exemple, si une vue se trouve entièrement dans la zone sécurisée de la vue racine de son contrôleur de vue, les incrustations Edge dans cette propriété sont 0.
Selon Apple, Xcode 9 - Release note
Interface Builder utilise UIView.safeAreaLayoutGuide en remplacement des guides de présentation obsolètes en haut et en bas de UIViewController. Pour utiliser la nouvelle zone sécurisée, sélectionnez Guides de présentation de la zone sécurisée dans l'inspecteur de fichier du contrôleur de vue, puis ajoutez des contraintes entre votre contenu et les nouvelles ancres de la zone sécurisée. Cela évite que votre contenu ne soit masqué par les barres supérieure et inférieure, ainsi que par la zone de surbalayage sur tvOS. Les contraintes imposées à la zone de sécurité sont converties en haut et en bas lors du déploiement vers des versions antérieures d'iOS.
Voici une référence simple à titre de comparaison (pour créer un effet visuel similaire) entre le guide de disposition existant (haut et bas) et le guide de disposition de la zone sécurisée.
Disposition de la zone sécurisée: 
AutoLayout
Comment travailler avec la disposition des zones sécurisées?
Suivez ces étapes pour trouver une solution:
- Activez la "Disposition de la zone sécurisée", si non activée.
- Supprimez 'toutes les contraintes' si elles montrent une connexion avec avec Super view et réattachez-les avec une ancre de mise en page sûre. OR Double-cliquez sur une contrainte et modifiez la connexion de super vue à l'ancre SafeArea.
Voici un exemple d’instantané, comment activer la disposition de la zone sécurisée et modifier la contrainte.
Voici le résultat des changements ci-dessus
Mise en page avec SafeArea
Lors de la conception pour iPhone X, vous devez vous assurer que les présentations remplissent l'écran et ne sont pas masquées par les coins arrondis de l'appareil, le boîtier du capteur ou l'indicateur permettant d'accéder à l'écran d'accueil.
La plupart des applications utilisant des éléments d'interface utilisateur standard fournis par le système, telles que des barres de navigation, des tableaux et des collections, s'adaptent automatiquement au nouveau facteur de forme du périphérique. Les matériaux de fond s'étendent jusqu'aux bords de l'écran et les éléments de l'interface utilisateur sont insérés et positionnés de manière appropriée.
La prise en charge d'iPhone X pour les applications avec des dispositions personnalisées devrait également être relativement facile, en particulier si votre application utilise la disposition automatique et respecte les guides de disposition des zones et marges sécurisés.
Voici un exemple de code (Réf de: Guide de présentation des zones sécurisées ) :
Si vous créez vos contraintes dans le code, utilisez la propriété safeAreaLayoutGuide de UIView pour obtenir les ancres de présentation pertinentes. 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 de layoutMarginsGuide de la vue racine:
let margins = view.layoutMarginsGuide
NSLayoutConstraint.activate([
greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
])
Désormais, à moins de cibler iOS 11 uniquement, vous devrez encapsuler les contraintes du guide de disposition de la zone sécurisée avec #available et revenir aux guides de disposition du haut et du bas pour les versions iOS antérieures:
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:
Après l’extension UIView, vous pouvez facilement travailler avec SafeAreaLayout.
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 dans Objective-C :
Voici Apple Documentation officielle du développeur pour Guide de présentation des zones sécurisées
Une zone sécurisée est nécessaire pour gérer la conception de l'interface utilisateur pour iPhone-X. Voici les directives de base pour Comment concevoir une interface utilisateur pour iPhone-X à l’aide de la présentation de la zone sécurisée
Je veux mentionner quelque chose qui m'a attiré en premier lorsque j'essayais d'adapter une application basée sur SpriteKit afin d'éviter les contours arrondis et les "encoches" de la nouvelle iPhone X, comme suggéré par le dernier Human Interface Guidelines : La nouvelle propriété safeAreaLayoutGuide sur UIView doit être interrogée après la vue a été ajoutée à la hiérarchie (par exemple, sur -viewDidAppear:) afin de générer un cadre de mise en page significatif (sinon, elle ne renvoie que la taille de l'écran complet).
De la documentation de la propriété:
Le guide de présentation représentant la partie de votre vue qui n'est pas masquée par les barres et autres contenus. Lorsque la vue est visible à l'écran , ce guide indique la partie de la vue qui n'est pas couverte par les barres de navigation, les barres d'onglets, les barres d'outils et d'autres vues ancêtres. . (Dans tvOS, la zone sécurisée correspond à la zone non recouverte par le cache de l'écran.) Si la vue n'est pas actuellement installée dans une hiérarchie de vues ou n'est pas encore visible à l'écran, les bords du guide de disposition sont égal aux bords de la vue .
(c'est moi qui souligne)
Si vous le lisez dès -viewDidLoad:, le layoutFrame du guide sera {{0, 0}, {375, 812}} au lieu du {{0, 44}, {375, 734}} attendu.
- Plus tôt dans iOS 7.0–11.0 < Déconseillé >
UIKitutilise le topLayoutGuide & bottomLayoutGuide = qui est la propriétéUIView iOS11 + utilise safeAreaLayoutGuide qui est également la propriété
UIViewCochez la case Activer Guide de présentation de la zone sécurisée de l'inspecteur de fichiers.
Les zones de sécurité vous aident à placer vos vues dans la partie visible de l'interface globale.
Dans tvOS , la zone de sécurité inclut également les incrustations de surbalayage de l’écran, qui représentent la zone couverte par le cadre de l’écran.
- safeAreaLayoutGuide reflète la partie de la vue qui n'est pas couverte par les barres de navigation, les barres d'onglets, les barres d'outils et les autres vues d'ancêtres.
Utilisez des zones sûres pour faciliter l’affichage de votre contenu, comme
UIButtonetc.Lors de la conception pour iPhone X, vous devez vous assurer que les présentations remplissent l'écran et ne sont pas masquées par les coins arrondis de l'appareil, le boîtier du capteur ou l'indicateur permettant d'accéder à l'écran d'accueil.
Assurez-vous que les arrière-plans s'étendent jusqu'aux bords de l'écran et que les dispositions à défilement vertical, telles que les tableaux et les collections, continuent jusqu'au bas.
La barre d'état est plus grande sur iPhone X que sur d'autres iPhones. Si votre application suppose une hauteur de barre d'état fixe pour le positionnement du contenu sous la barre d'état, vous devez mettre à jour votre application pour positionner le contenu de manière dynamique en fonction du périphérique de l'utilisateur. Notez que la barre d'état de l'iPhone X ne change pas de hauteur lorsque des tâches en arrière-plan, telles que l'enregistrement vocal et le suivi de localisation, sont actives
print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhonesLa hauteur du conteneur d'indicateur de domicile est de 34 points.
Une fois que vous avez activé le Guide de présentation des zones sécurisées , vous pouvez voir la propriété des contraintes de zone sécurisée répertoriée dans le générateur d'interface.
Vous pouvez définir des contraintes avec respectivement self.view.safeAreaLayoutGuide
ObjC:
self.demoView.translatesAutoresizingMaskIntoConstraints = NO;
UILayoutGuide * guide = self.view.safeAreaLayoutGuide;
[self.demoView.leadingAnchor constraintEqualToAnchor:guide.leadingAnchor].active = YES;
[self.demoView.trailingAnchor constraintEqualToAnchor:guide.trailingAnchor].active = YES;
[self.demoView.topAnchor constraintEqualToAnchor:guide.topAnchor].active = YES;
[self.demoView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor].active = YES;
Rapide:
demoView.translatesAutoresizingMaskIntoConstraints = false
if #available(iOS 11.0, *) {
let guide = self.view.safeAreaLayoutGuide
demoView.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
demoView.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
demoView.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true
demoView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true
} else {
NSLayoutConstraint(item: demoView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
NSLayoutConstraint(item: demoView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
NSLayoutConstraint(item: demoView, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true
NSLayoutConstraint(item: demoView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
}
Apple a introduit topLayoutGuide et bottomLayoutGuide en tant que propriétés de UIViewController dans iOS 7. Ils vous permettaient de créer des contraintes pour que votre contenu ne soit pas masqué par les barres UIKit, telles que l'état, la navigation ou la barre d'onglets. Ces guides de présentation sont obsolètes dans iOS 11 et remplacés par un guide de présentation unique pour les zones sûres.
Reportez-vous à lien pour plus d'informations.
Le Guide de présentation des zones sécurisées aide à éviter de superposer des éléments de l'interface utilisateur système lors du positionnement du contenu et des contrôles.
La zone de sécurité est la zone située entre les éléments de l'interface système, à savoir la barre d'état, la barre de navigation et la barre d'outils ou la barre d'onglets. Ainsi, lorsque vous ajoutez une barre d'état à votre application, la zone de sécurité est réduite. Lorsque vous ajoutez une barre de navigation à votre application, la zone de sécurité est à nouveau réduite.
Sur l'iPhone X, la zone de sécurité offre des encarts supplémentaires à partir des bords supérieur et inférieur de l'écran en mode portrait, même si aucune barre n'est affichée. En mode paysage, la zone de sécurité est insérée à partir des côtés des écrans et de l'indicateur de domicile.
Ceci est tiré de la vidéo d'Apple Conception pour iPhone X où ils visualisent également la manière dont différents éléments affectent la zone de sécurité.