• 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

Tirez le meilleur de ce cours

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

Bienvenue dans ce cours sur la création d'application responsive en iOS ! Nous allons apprendre à adapter une interface à toutes les tailles d'écran existantes en iOS !

 

Prérequis

Dans ce cours, nous allons travailler sur l'application OpenQuizz. Si vous avez suivi le cours précédent, vous connaissez bien cette application pour l'avoir conçue de A à Z !

Si vous ne connaissez pas l'application, mais que vous avez les compétences nécessaires pour suivre le cours, pas de panique ! Nous allons voir ensemble ce qu'est OpenQuizz pour que vous ne soyez pas perdu.

L'application OpenQuizz

L'application OpenQuizz est comme son nom l'indique un jeu de quizz.

Dans ce jeu, l'utilisateur peut répondre à 10 questions par vrai ou faux. Pour cela, il peut glisser la question vers la droite ou la gauche pour donner sa réponse.

À chaque bonne réponse, il marque un point ! À la fin des 10 questions, la partie se termine.

Pour relancer une partie, l'utilisateur peut cliquer sur New Game et recharger des nouvelles questions.

Inspecter OpenQuizz

Pour suivre ce cours, vous allez donc avoir besoin du projet OpenQuizz. Je vous invite à le télécharger à cette adresse.

Ouvrez le projet avec Xcode et lancez l'application pour vous familiariser un peu avec.

Une fois que c'est fait, je vous propose de regarder comment est construite l'interface en ouvrant le fichier Main.storyboard. Nous allons exclusivement travailler sur ce fichier dans ce cours.

L'interface est composée de quatre éléments :

  • Une vue question, la vue grise qui contient deux sous-vues :

    • Un label qui affiche le texte de la question.

    • Une icône qui varie en fonction de la réponse de l'utilisateur.

  • Un label qui affiche le score de l'utilisateur.

  • Un bouton New Game pour relancer la partie.

  • Un indicateur d'activité positionné derrière le bouton pour notifier l'utilisateur que les questions sont en cours de chargement.

Le problème

Bon on a compris qu'elle était belle ton appli... C'est quoi le problème ?

J'y viens ! Notre interface n'est belle pour l'instant que sur un iPhone 8 (ou 7 ou 6). Sur les autres tailles d'iPhone, l'interface ne s'adapte pas. Vous ne me croyez pas ? Laissez-moi vous montrer.

Ouvrez le storyboard. Et cliquez en haut pour vous placer en mode assistant.

À la place du ViewController qui devrait s'afficher sur la gauche par défaut, nous allons afficher le mode aperçu. Pour cela cliquez en haut sur Automatic puis glissez en bas dans la liste déroulante jusqu'à Preview et choisissez Main.storyboard (Preview).

 

Votre interface devrait ressembler à ceci :

Sur la gauche vous avez le storyboard et sur la droite le mode aperçu. Le mode aperçu permet de visualiser votre interface sur plusieurs appareils différents. Pour cela, cliquez sur le + en bas à gauche de la section aperçu et rajoutez autant d'appareils que vous le souhaitez.

J'ai de mon côté décidé de rajouter toutes les tailles possibles d'iPhone et cela donne :

Et là c'est flagrant :O ! On constate avec le mode aperçu que notre interface ne s'affiche correctement que sur l'iPhone 8 :

  • Sur les plus petits iPhone : le bouton est trop bas et donc n'est même plus visible à l'écran.

  • Sur les iPhone "Plus" : le bouton ne reste pas en bas de l'interface.

  • Sur l'iPhone X : la question est en partie cachée sous l'encoche.

  • De manière générale : le contenu n'est plus centré.

Et encore, nous n'avons même pas essayé de regarder ce que cela donne sur un iPad ou si on tourne l'écran de l'iPhone en mode paysage !

Dans ce cours, nous allons donc apprendre à adapter notre interface à toutes les tailles d'écran de l'iPhone et iPad et pour les deux orientations paysage et portrait.

La solution

Pour résoudre notre problème, nous allons commencer dès le prochain chapitre par apprendre quelles sont les différentes tailles d'écran de la famille iOS.

Ensuite dans la partie 2, nous allons adapter notre interface à tous les iPhone en mode portrait. Pour cela, nous allons apprendre à créer des contraintes avec AutoLayout.

Enfin en partie 3, nous découvrirons comment les catégories de taille vont nous permettre d'adapter notre interface à tous les écrans de l'iPhone et de l'iPad en mode paysage et portrait.

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