• 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

Créez une variation en mode paysage

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

Nous allons maintenant essayer de modifier notre interface pour le mode paysage. À la fin de ce chapitre, notre interface sera belle, quelle que soit l'orientation de l'iPhone !

Orientations supportées

Avant de nous lancer, je me permets une toute petite parenthèse sur le support des différentes orientations. En tant que développeur, vous pouvez décider que votre application restera toujours en mode portrait, ou toujours en mode paysage ou de supporter les deux comme OpenQuizz.

Il suffit d'aller dans les paramètres du projet en sélectionnant votre projet dans le navigateur.

Sur cette interface, vous pouvez cocher les orientations supportées par votre application.

  • Les deux premières cases concernent le mode portrait avec l'iPhone à l'endroit ou à l'envers.

  • Les deux dernières concernent le mode paysage avec l'iPhone couché en mode paysage vers la droite ou vers la gauche. 

Donc si vous décochez par exemple les deux dernières, votre interface ne tournera pas si l'utilisateur couche son iPhone en mode paysage.

Créer une variation

Retournez maintenant dans le storyboard, nous allons créer notre première variation en utilisant les catégories de tailles. Pour cela, il faut retourner en bas dans le sélecteur de taille.

Ensuite, nous allons utiliser le bouton Vary for Traits qui se trouve sur la droite.

Il permet de faire des modifications sur notre interface qui ne vont concerner que la catégorie de taille dans laquelle nous nous trouvons. Cela veut dire que je peux modifier toutes les contraintes et même déplacer, ajouter ou supprimer des vues et cela ne concernera que la catégorie de taille actuelle.

Par exemple, plaçons-nous sur iPhone 8 en mode paysage. Si on se réfère au schéma du chapitre précédent, la catégorie de taille dans laquelle nous nous trouvons est : (Compact, Compact).

Lorsqu'on clique sur le bouton, une pop-up apparaît qui nous demande sur quelle propriété on souhaite créer une variation : la hauteur, la largeur ou les deux.

Si on coche les deux, la variation concernera uniquement les écrans dans la catégorie sélectionnée :(Compact, Compact). Si on décoche la largeur par exemple, la variation concernera tous les écrans qui ont une hauteur compact quelle que soit leur largeur.

Dans notre cas, on souhaite créer une variation qui concerne tous les iPhone en mode paysage. Donc on veut que la hauteur soit compact mais la largeur peut être compact ou regular pour inclure les grands iPhone. On va donc cocher Height et laisser décochée Width.

Manipuler la variation

À partir de maintenant, on peut tout casser, cela ne concernera que le mode paysage sur iPhone ! Nous allons donc supprimer les contraintes qui ne sont plus pertinentes comme l'alignement au centre et en recréer de nouvelles spécifiques à notre design en mode paysage.

Comme cette partie du travail concerne plus AutoLayout et que nous avons déjà vu ça ensemble, je vous laisse essayer de le faire. Vous pouvez consulter la correction à cette adresse ou ci-dessous. Je vous invite à la regarder, car j'y donne quelques astuces qui vous seront sûrement utiles !

 Quand vous avez terminé, vous pouvez cliquer sur Done Varying pour terminer la variation.

Vous pouvez ensuite vérifier en changeant l'orientation que tout s'affiche correctement dans les deux modes.

En résumé

  • On peut sélectionner les orientations supportées dans les paramètres du projet.

  • Pour créer une variation, on choisit la catégorie de taille désirée puis on clique sur le bouton Vary for traits.

  • À partir de là, tous les changements que l'on peut faire ne concerneront que la catégorie de taille sélectionnée.

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