IOS 11 guide de disposition de zone de sécurité compatibilité ascendante

Question

Est-il possible d'activer les guides de mise en page de la zone de sécurité sur iOS versions antérieures à 11 ?

Answer 1

J'ai réussi à travailler avec les nouveaux guides de mise en page de la zone de sécurité et maintenir la compatibilité avec les anciennes versions iOS 9 et iOS 10 : (ÉDIT : comme souligné dans les commentaires par @NickEntin, cette implémentation présumera qu'une barre d'état est présente, ce qui ne sera pas vrai en mode paysage sur l'iPhone X. Résultant en trop d'espace en haut (20 points). Cela fonctionnera parfaitement cependant.

Par exemple, si vous voulez qu'une vue soit à 10 points en dessous de la barre d'état (et à 10 points en dessous du boîtier du capteur sur l'iPhone X) :

1. Dans votre XIB, allez dans Inspecteur de fichier et activez la zone de sécurité en cochant Utiliser les guides de mise en page de la zone de sécurité.
2. Créez une contrainte du haut de la vue vers le haut de la vue principale, avec une contrainte >= (supérieure ou égale), constante 30 (30 car nous voulons un espacement de 10 points jusqu'à la barre d'état qui fait 20 points de hauteur) et priorité Élevée (750).
3. Créez une contrainte du haut de la vue vers le haut de la Zone de sécurité, avec une contrainte = (égal), constante 10 et priorité Faible (250).

La même chose peut être faite pour une vue en bas (et pour mener/traîner ou à gauche/à droite de la Zone de sécurité) :

1. Dans votre XIB, allez dans Inspecteur de fichier et activez la zone de sécurité en cochant Utiliser les guides de mise en page de la zone de sécurité.
2. Créez une contrainte du bas de la vue vers le bas de la vue principale, avec une contrainte >= (supérieure ou égale), constante 10 et priorité Élevée (750).
3. Créez une contrainte du bas de la vue vers le bas de la Zone de sécurité, avec une contrainte = (égal), constante 10 et priorité Faible (250).

Answer 2

La compatibilité ascendante de Safe Areas pour iOS 9 et iOS 10 ne fonctionne que si vous utilisez des storyboards. Si vous utilisez des xibs, il n'y a pas de guide de mise en page sur lequel s'appuyer. https://forums.developer.apple.com/thread/87329

Les solutions de contournement semblent être soit

(a) migrer vos xibs vers des storyboards, ou

(b) ajouter des contraintes supplémentaires de manière programmatique.

Si (a) n'est pas vraiment une option, l'approche manuelle sera quelque chose comme ceci:

En supposant que vous avez une vue dans votre xib que vous voulez maintenir dans la zone de sécurité (c'est-à-dire sous toute barre de statut ou barre de navigation).

1. Ajoutez des contraintes dans votre xib entre votre vue et la zone de sécurité pour iOS 11. Attribuez la contrainte supérieure à une priorité de 750.

   

2. Dans votre contrôleur de vue, ajoutez une propriété:

   @property (nonatomic, strong) NSLayoutConstraint *topLayoutConstraint;

   Puis dans viewDidLayoutSubviews:

   - (void)viewDidLayoutSubviews {
       [super viewDidLayoutSubviews];
   
       if (@available(iOS 11, *)) {
           // contraintes de la zone de sécurité déjà définies
       }
       else {
           if (!self.topLayoutConstraint) {
               self.topLayoutConstraint = [self..topAnchor constraintEqualToAnchor:self.topLayoutGuide.bottomAnchor];
               [self.topLayoutConstraint setActive:YES];
           }
       }
   }

   La nouvelle contrainte ne sera créée que pour iOS 9 et iOS 10, a une priorité par défaut de 1000, et remplace celle dans le xib.

3. Répétez pour une contrainte inférieure si vous avez besoin d'éviter l'indicateur de domicile.

Version Swift 4 :

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    if #available(iOS 11, *) {
        // contraintes de la zone de sécurité déjà définies
    } else {
        if topLayoutConstraint == nil {
            topLayoutConstraint = .topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor)
            topLayoutConstraint?.isActive = true
        }
    }
}

Answer 3

Il y a certainement au moins un problème de compatibilité ascendante avec les contraintes de zone de sécurité d'iOS 11 que j'ai observé dans le GM Xcode 9 : les vues poussées avec des contraintes de zone de sécurité.

Si votre barre de navigation est masquée et que vous poussez une vue avec une contrainte de zone de sécurité en haut, la vue poussée chevauchera la barre d'état sur iOS 9 et 10.

Si la barre de navigation est visible et que "sous les barres supérieures" est désactivé, la vue poussée glissera toujours sous la barre de navigation pour atteindre le haut de l'écran. La barre de navigation est placée correctement.

Sur iOS 11, la mise en page sera correcte dans les deux cas.

Voici un exemple simple : http://www.filedropper.com/foobar

Et voici une vidéo avec la barre de navigation masquée (iOS 10.3 à gauche, iOS 11 à droite) : https://vimeo.com/234174841/1e27a96a87

Voici une version où la barre de navigation est visible (activée dans le fichier NIB) : https://vimeo.com/234316256/f022132d57

J'ai signalé cela comme un radar #34477706.

Merci à @Sander d'avoir signalé le cas de la barre de navigation visible.

Answer 4

Oui, votre projet/application fonctionnera dans les versions antérieures à iOS 11 sans aucun problème. Dans les versions antérieures à 11, il remplace/considère la mise en page de la zone de sécurité en mise en page automatique normale et suit les règles du guide de mise en page supérieure et inférieure.

J'ai testé mon projet existant avec et sans 'SafeAreaLayout' sur les deux plateformes (iOS 11 et iOS 10 antérieur). Ça fonctionne bien.

Assurez-vous simplement :

• Si vous avez conçu votre projet/interface utilisateur en mise en page automatique; les contraintes de votre élément d'interface utilisateur suivent/sont relatives au guide de mise en page supérieure et inférieure (pas à la super vue). Donc, en un seul clic (activation) sur l'option de SafeAreaLayout, la mise en page de la zone de sécurité sera automatiquement implémentée correctement pour tous les fichiers Interface Builders dans votre storyboard.

• Si vous avez conçu votre projet/interface utilisateur en SafeAreaLayout; alors il suivra automatiquement le guide de mise en page supérieure et inférieure dans iOS antérieur.

Voici un exemple de capture d'écran avec le résultat, en activant ou désactivant la mise en page de la zone de sécurité, cela n'affectera pas la conception existante.

Mise en page de la zone de sécurité:

Mise en page automatique

**En résumé, la réponse à votre question est : "Activer les guides de mise en page de la zone de sécurité compatible avec iOS antérieur à 11"

Vous pouvez implémenter la mise en page de la zone de sécurité dans votre projet/application et cela fonctionnera bien avec les versions précédentes d'iOS en convertissant la mise en page de la zone de sécurité en mise en page supérieure et inférieure.**

Answer 5

Si vous utilisez des fichiers xib sans storyboard, ils n'ont pas de guides de disposition sur ios 10. Déplacez donc le xib dans le storyboard pour assurer la compatibilité ascendante.