Zone de sécurité de Xcode 9

Lors de l'exploration de la version bêta de Xcode9, une zone de sécurité a été trouvée sur les constructeurs d'interface. Affichez la visionneuse de hiérarchie. Je suis curieux et j'ai essayé de connaître la documentation de Safe Area on Apples, dans l'essentiel le doc dit "La zone de vue qui interagit directement avec la mise en page automatique" Mais cela ne m'a pas satisfait, je veux savoir l'utilisation pratique de cette nouvelle chose.

Quelqu'un a-t-il une idée?

Paragraphe de conclusion du document Apple pour la zone sûre.

La classe UILayoutGuide est conçue pour exécuter toutes les tâches précédemment effectuées par les vues factices, mais pour le faire de manière plus sûre et plus efficace. Les guides de mise en page ne définissent pas de 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 disposition automatique.

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 :

• Comment ajouter une zone sûre par programme

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é

Je veux mentionner quelque chose qui m'a surpris en premier lorsque j'essayais d'adapter une application basée sur SpriteKit pour éviter les bords arrondis et l '«encoche» du nouvel iPhone X, comme suggéré par les dernières directives de l'interface humaine : La nouvelle propriété safeAreaLayoutGuidede UIViewdoit être interrogé après que la vue a été ajoutée à la hiérarchie (par exemple, sur -viewDidAppear:) afin de signaler un cadre de mise en page significatif (sinon, il renvoie simplement la taille plein écran).

De la documentation de la propriété:

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. Lorsque la vue est visible à l'écran , ce guide 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 autres vues des ancêtres. (Dans tvOS, la zone de sécurité reflète la zone non couverte par le cadre 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 égaux aux bords de la vue .

(c'est moi qui souligne)

Si vous le lisez dès le début -viewDidLoad:, le layoutFramedu guide sera {{0, 0}, {375, 812}}au lieu du prévu{{0, 44}, {375, 734}}

• Plus tôt dans iOS 7,0 à 11,0 < Obsolète > UIKitutilise le topLayoutGuide & bottomLayoutGuide qui est la UIViewpropriété

• iOS11 + utilise safeAreaLayoutGuide qui est également la UIViewpropriété

• Activez la case à cocher Guide de disposition de la zone de sécurité dans l'inspecteur de fichiers.

• Les zones sûres vous aident à placer vos vues dans la partie visible de l'interface globale.

• Dans tvOS , la zone de sécurité comprend également les encarts 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 autres vues ancêtres.

• Utilisez des zones sûres pour vous aider à présenter votre contenu comme UIButton etc.

• 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.

• 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'en bas.

• La barre d'état est plus haute sur iPhone X que sur les autres iPhones. Si votre application suppose une hauteur de barre d'état fixe pour positionner le contenu sous la barre d'état, vous devez mettre à jour votre application pour positionner dynamiquement le contenu en fonction de l'appareil de l'utilisateur. Notez que la barre d'état sur l'iPhone X ne change pas de hauteur lorsque des tâches d'arrière-plan telles que l'enregistrement vocal et le suivi de l'emplacement sont actives print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones

• La hauteur du conteneur d'indicateur de domicile est de 34 points.

• Une fois que vous avez activé le Guide de disposition de la zone de sécurité, vous pouvez voir la propriété des contraintes de zone de sécurité répertoriée dans le générateur d'interface.

Vous pouvez définir des contraintes avec respectivement self.view.safeAreaLayoutGuideas-

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 présenté topLayoutGuide et bottomLayoutGuide en tant que propriétés d'UIViewController dans iOS 7. Ils vous permettaient de créer des contraintes pour empêcher votre contenu d'être masqué par les barres UIKit telles que l'état, la navigation ou la barre d'onglets. Ces guides de mise en page sont obsolètes dans iOS 11 et remplacés par un seul guide de mise en page de zone de sécurité.

Reportez - vous au lien pour plus d'informations.

Le Guide de mise en page de la zone de sécurité permet d'éviter de sous-estimer les éléments de l'interface utilisateur du 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 utilisateur du système qui sont 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é se réduit. Lorsque vous ajoutez une barre de navigation à votre application, la zone de sécurité se réduit à nouveau.

Sur l'iPhone X, la zone de sécurité fournit un encart supplémentaire à partir des bords supérieur et inférieur de l'écran en portrait, même lorsqu'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 d'accueil.

Ceci est tiré de la vidéo d'Apple Designing for iPhone X où ils visualisent également comment différents éléments affectent la zone de sécurité.