Pour aborder sereinement la question de la gestion des tailles d'écran, commençons par faire le tour des tailles que vous allez devoir gérer en iOS.
Appréhendez les tailles d'écran
On parle généralement des tailles d'écran en pouces (notés ''), et on mesure la diagonale.
En iOS, il y a deux grandes familles de tailles :
les tailles iPhone ;
les tailles iPad.
Dans chaque famille il y a plusieurs tailles différentes, que l’on retrouve dans le schéma ci-dessous.
Appareil | Taille |
iPad Pro Big 1, 2 | 12,9” |
iPad Pro Small 2 | 10,5” |
iPad 1, 2, 3, 4 iPad Air 1, 2 iPad Pro Small 1 | 9,7” |
iPad Mini | 7,9” |
iPhone Pro Max 12, 13 | 6,7” |
iPhone 11 Pro Max | 6,5” |
iPhone 11, 12, 13 iPhone Pro 12, 13 | 6,1” |
iPhone X | 5,8” |
iPhone 6+, 6S+, 7+, 8+ | 5,5” |
iPhone 6, 6S, 7, 8 | 4,7” |
iPhone 5, 5S, SE | 4” |
iPhone 4s | 3,5” |
Ce tableau résume les douze tailles existantes dans la famille iOS avec la liste exhaustive de tous les appareils iOS associés. Inutile que vous connaissiez tout cela par cœur. Sachez seulement qu'il y a six tailles pour l'iPhone et six pour l'iPad. Et ces douze tailles, vous pouvez toutes les visualiser dans le storyboard !
Visualisez les tailles dans le storyboard
Pour changer la taille de l'interface dans le storyboard, il faut utiliser le sélecteur de tailles. En bas à gauche du storyboard, vous avez le bouton suivant :
Cliquez dessus pour révéler le sélecteur de taille.
Ici vous pouvez sélectionner la taille à laquelle vous souhaitez afficher les interfaces de votre storyboard. Par défaut, la taille est celle de l'iPhone 8 Plus, mais vous pouvez modifier ça à votre guise.
Je vous invite à jouer un peu avec les différentes tailles. Il y a trois réglages possibles :
la taille ;
l'orientation ;
l'adaptation.
La taille
La taille de l'écran permet de choisir tout simplement la taille d'écran que l'on souhaite visualiser.
Il y a bien huit tailles pour l'iPhone, mais il n'y a qu’une taille pour l'iPad ! Ils en ont oublié?
Bien vu ! Avec douze tailles disponibles en tout, Apple a voulu éviter d’afficher une trop longue liste. Mais essayez donc de cliquer sur l’iPad à droite de la liste, celle-ci va se mettre à jour instantanément en affichant les iPads disponibles, magique !
L'orientation
On peut décider d'afficher l'orientation paysage ou portrait en appliquant une rotation à l’affichage :
L'adaptation
Si vous choisissez l'un des iPads dans le sélecteur, un troisième réglage est disponible : l'adaptation.
En effet sur l'iPad, on peut afficher deux applications l'une à côté de l'autre. Apple appelle cela Split View. Du coup l'application ne prendra plus tout l'écran, il faut donc prévoir la variation de la taille de l'interface dans ce cas. Et c'est avec le réglage Adaptation qu'on peut le visualiser.
En résumé
Il y a douze tailles d'écran différentes pour les appareils iOS : quatre pour l'iPad et huit pour l'iPhone.
Comme avec le mode aperçu, dans le chapitre précédent, le sélecteur de taille vous permet donc de visualiser ce que donne votre application sur différents appareils directement dans le storyboard. Et vous pouvez voir que dès que l'on quitte l'iPhone 8 Plus, ça n'est pas très probant !
Dès la prochaine partie, nous allons commencer à résoudre ce problème ! Mais avant d’y plonger, vérifiez vos acquis dans le quiz. 😊 À tout de suite !
