En 2017, Apple a créé un iPhone spécial : l'iPhone X ! Cet iPhone est, depuis, le précurseur d’un tout nouveau design d’écran (tous les nouveaux iPhones créés depuis reposent sur cette nouvelle interface) :
Comme vous pouvez le constater, cet écran prend toute la face avant du téléphone, à l'exception d'une encoche en haut, dans laquelle se trouvent 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).
Découvrez 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. À l'intérieur de ce rectangle, 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 d'éviter :
en haut, l'encoche ;
en bas, les angles arrondis et la barrette grise qui remplace le bouton Home.
Utilisez 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.
Activez et voyez 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 :
Dans le storyboard, sélectionnez le View Controller.
View Controller Choisissez le premier onglet dans les utilitaires (panneau de droite).
Les utilitaires Cochez la case Use Safe Area Layout Guides.
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 !
