• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 26/02/2020

Restez dans la zone protégée

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

En septembre 2017, Apple a fêté les 10 ans de l'iPhone !

Et forcément pour fêter ça, ils n'ont pas fait les choses à moitié ! Ils ont créé un iPhone spécial : l'iPhone X ! En plus d'être l'iPhone le plus puissant jamais conçu par Apple, c'est surtout son écran qui a fait couler beaucoup d'encre.

L'iPhone X
L'iPhone X

Le problème de l'écran de l'iPhone X

Comme vous pouvez le constater, cet écran prend toute la face avant du téléphone. A l'exception d'une encoche en haut dans laquelle se trouve la caméra des selfies ainsi que les capteurs nécessaires pour FaceID.

Et cela change beaucoup de choses à notre approche du responsive ! En effet, l'écran n'est plus un rectangle tout simple ! C'est un rectangle dont on a enlevé une encoche en haut ainsi que les quatre coins (car ils sont arrondis). Du coup, ces zones qui ont disparu de l'écran peuvent nous gêner en cachant des boutons, images et autres vues qui pourraient s'y trouver.

C'est d'ailleurs le cas de notre vue question qui disparaît en partie derrière l'encoche.

Il y a donc des zones dans cet écran qui ne sont pas sûres puisque des éléments peuvent s'y trouver cachés ou en partie occultés.

Pour résoudre cela, Apple a créé la zone protégée (ou Safe Area).

La zone protégée

Le principe de la zone protégée est simple. C'est un rectangle à l'intérieur de l'écran qui évite l'encoche et les coins. A l'intérieur de ce dernier, on est certain que l'interface ne sera pas occultée.

 

Comme vous pouvez le constater sur l'illustration ci-dessus, la zone protégée permet sur l'iPhone X d'éviter :

  • En haut l'encoche

  • En bas les angles arrondis et la barrette grise qui remplace le bouton Home

Utiliser la zone protégée

En créant cette zone protégée Apple nous a bien facilité le travail ! Car en fait, il nous suffit de faire tout notre design à l'intérieur de cette zone.

Donc quand nous allons créer des contraintes dans le prochain chapitre, nous allons toutes les créer en prenant la zone protégée comme référence.

Activer et voir la zone protégée

Si vous ouvrez d'anciens projets, la zone protégée n'est pas forcément visible par défaut. Pour l'activer, il suffit de trois petites étapes :

1. Dans le storyboard, sélectionnez le View Controller
1. Dans le storyboard, sélectionnez le View Controller
2. Choisissez le premier onglet dans les utilitaires (panneau de droite)
2. Choisissez le premier onglet dans les utilitaires (panneau de droite)
3. Cochez la case Use Safe Area Layout Guides
3. Cochez la case Use Safe Area Layout Guides

Et voilà, maintenant votre fichier utilise et affiche la zone protégée ! Vous pouvez la voir apparaître dans la hiérarchie des vues. En cliquant dessus, vous pouvez voir la zone protégée :

En résumé

  • La zone protégée (ou Safe Area) permet de composer son interface à l'intérieur d'un rectangle dont on est certain qu'il ne sera pas occulté ou encombré par d'autres éléments du téléphone ou d'iOS.

  • Sauf exception, vous prendrez toujours la zone protégée et non la vue racine comme rectangle de base pour composer votre interface responsive.

Dans le prochain chapitre, nous allons créer nos premières contraintes !

Exemple de certificat de réussite
Exemple de certificat de réussite