• 20 heures
  • {0} Facile|{1} Moyenne|{2} Difficile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 21/06/2013

Fenêtres, vues et contrôles

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

Les iPhone, iPad et iPod Touch ont une particularité : ils ne sont capables d'afficher qu'une seule fenêtre sur l'écran. Ceci les différencie des ordinateurs, sur lesquels un nombre indéfini de fenêtres peut être affiché.

Pour que cette spécificité ne soit pas une limitation, les devices iOS peuvent afficher plusieurs vues et les « empiler » selon les directives du programmeur.

Une vue est constituée d'un ou de plusieurs contrôles. Il peut s'agir d'informations (textes, images, vidéos), d'éléments pour communiquer avec l'utilisateur (boutons, zones de texte, curseurs, etc.) ou encore d'éléments pour basculer entre les différentes vues (onglets, barres de navigation, barres de recherche, etc.).

Création d'une application multivues

Avant de nous intéresser aux contrôles, nous allons consacrer un peu de temps à l'étude des vues. Cette étape est fondamentale. En effet, si les applications les plus simples comportent une seule vue, il n'est pas rare d'utiliser trois ou quatre vues dans une application traditionnelle.

Une bonne nouvelle : la quasi-totalité du travail se fera dans Interface Builder. Ce sera donc un jeu d'enfant pour vous.

Création de l'application

Commencez par créer une application basée sur le modèle Single View Application et donnez-lui le nom « troisVues ».
Cliquez sur MainStoryboard.storyboard dans le volet de navigation.

Rappelons que nous voulons créer une application qui comporte trois vues. Un contrôleur de vue étant déjà présent dans l'application, vous allez en ajouter deux autres en effectuant des glisser-déposer de la bibliothèque d'objets à la zone d'édition d'Interface Builder. Cliquez sur l'icône Hide or show the Utilities dans la barre d'outils de Xcode (1), sur l'icône Show the Object library dans la partie inférieure du volet des utilitaires (2), puis faites glisser deux View Controller sur la zone d'édition (3), comme indiqué à la figure suivante.

Il faut ajouter deux vues à l'application

Pour bien repérer chacune des vues, vous allez modifier leur couleur d'arrière-plan. Cliquez sur l'icône Show the Attributes inspector dans le volet des utilitaires et agissez sur la liste déroulante Background. Choisissez alors les couleurs que vous souhaitez. Pour ma part, j'ai respectivement choisi les couleurs bleu, blanc et vert.

Ensuite, faites glisser :

  • un contrôle Label sur chacune des vues ;

  • un contrôle Round Rect Button sur la première vue et un autre sur la troisième vue;

  • deux contrôles Round Rect Button sur la deuxième vue.

Double-cliquez tour à tour sur chacun de ces contrôles et ajoutez le texte suivant :

Vue

Contrôle

Texte

1

Label

Vue 1

1

Round Rect Button

Vue suivante

2

Label

Vue 2

2

Premier Round Rect Button

Vue suivante

2

Deuxième Round Rect Button

Vue précédente

3

Label

Vue 3

3

Round Rect Button

Vue précédente

La figure suivante représente le résultat que j'ai obtenu.

Les trois vues avec les Label et les Round Rect Button

Pour que ces vues puissent se faire référence l'une l'autre, vous allez ajouter un contrôleur de navigation.

Cliquez sur la première vue, déroulez le menu Editor, pointez Embed In et cliquez sur Navigation Controller. Un contrôleur de navigation est ajouté (figure suivante), et il est automatiquement relié à la première vue.

Le contrôleur est automatiquement relié à la vue sélectionnée

Vous allez maintenant relier les Round Rect Button aux différentes vues. Je vais vous indiquer en détail comment procéder pour relier le bouton de la vue 1 à la vue 2. Vous ferez de même pour relier les autres boutons des autres vues.

Cliquez sur le Round Rect Button de la vue 1 pour le sélectionner. Maintenez la touche Ctrl enfoncée, puis glissez-déposez le Round Rect Button sur la vue 2. Au relâchement du bouton gauche, une bulle intitulée Storyboard Segues est affichée. Dans cette bulle, vous devez choisir le type de transition entre les deux vues :

  • Push : transition horizontale ;

  • Modal : transition verticale ;

  • Custom : transition personnalisée.

Choisissez Push pour obtenir une translation horizontale. Une flèche entre la vue 1 et la vue 2 indique que la liaison a été établie (figure suivante).

Une flèche indique que la liaison a été faite

Recommencez la manipulation qui vient d'être décrite pour relier :

  • les vues 1 et 2 via le bouton Vue précédente de la vue 2 ;

  • les vues 2 et 3 via le bouton Vue suivante de la vue 2 ;

  • les vues 2 et 3 via le bouton Vue précédente de la vue 3.

Ça y est, vous pouvez exécuter l'application et jouer avec les boutons des trois vues.

Insérer un contrôle dans une application

Arrivés à ce point, vous savez créer une application multivues, mais vous ne savez pas encore (du moins pas précisément) comment ajouter du contenu dans chacune de ces vues. Il est grand temps de nous intéresser aux contrôles.

Pour insérer un contrôle dans une application, vous devez dans un premier temps afficher la bibliothèque de contrôles. Comme à la figure suivante, sélectionnez le fichier MainStoryboard.storyboard correspondant à la vue dans la zone de navigation (1), cliquez sur l'icône Hide or show the Utilities dans la barre d'outils (2), puis sur Show the Object Library dans la zone des utilitaires (3).
Pointez alors un contrôle dans la bibliothèque, maintenez le bouton gauche de la souris enfoncé et déposez le contrôle sur la fenêtre de l'application (4).

Insertion d'un contrôle dans une application

Si vous n'êtes pas certains de la fonction d'un contrôle, cliquez dessus dans la bibliothèque et maintenez le pointeur de la souris immobile pendant quelques instants. Une bulle d'aide sera alors affichée. Si ces informations ne sont pas suffisantes, vous pouvez cliquer sur l'icône Show Quick Help dans la partie supérieure du volet des utilitaires, comme indiqué à la figure suivante.

Cliquez sur l'icône Show Quick Help

Si nécessaire, cliquez sur un des liens (affichés en bleu) pour accéder à l'aide correspondante dans la documentation Apple.

Positionner, aligner et redimensionner un contrôle à vue

La façon la plus naturelle et la plus rapide pour positionner, aligner et redimensionner des contrôles consiste à utiliser la souris.

Positionner un contrôle à vue

Pour déplacer un contrôle dans la vue qui le contient, pointez-le, maintenez le bouton gauche de la souris enfoncé, déplacez la souris jusqu'à ce que l'objet ait la position souhaitée puis relâchez le bouton gauche de la souris.

Aligner un contrôle à vue

Les contrôles d'une application peuvent être alignés à vue. Ainsi par exemple, il est possible de faire correspondre le bord gauche d'un contrôle avec celui d'un autre contrôle, ou encore d'aligner un contrôle au centre ou sur une marge de la vue.
Pointez le contrôle à positionner, maintenez le bouton gauche de la souris enfoncé et déplacez le contrôle dans la vue. Une ou plusieurs lignes pointillées signalent le ou les divers alignements possibles pendant que le contrôle est déplacé, comme le montre la figure suivante. Relâchez le bouton gauche lorsque le contrôle a la position souhaitée.

Des pointillés apparaissent pour aligner les différents éléments

Redimensionner un contrôle à vue

De nombreux contrôles peuvent être redimensionnés. Pour cela, il suffit d'agir sur leurs poignées de redimensionnement à l'aide de la souris.
Cliquez sur le contrôle pour le sélectionner. Plusieurs poignées de redimensionnement sont affichées. Pointez l'une d'entre elles. Lorsque le pointeur de la souris change de forme, maintenez le bouton gauche enfoncé et déplacez la souris pour obtenir la dimension souhaitée (figure suivante).

Il est facile de redimensionner à la main un élément

Un aperçu des contrôles disponibles

Vous trouverez dans cette section les différents contrôles accessibles dans la bibliothèque. Chacun d'eux peut être utilisé dans une application pour iPhone, iPod Touch et iPad.

Icône

Nom du contrôle

Fonction

Image utilisateurImage utilisateur

Label

Texte non modifiable par l'utilisateur

Image utilisateurImage utilisateur

Round Rect Button

Bouton de commande touch

Image utilisateurImage utilisateur

Segmented Control

Onglets permettant d'afficher différentes vues/contrôles

Image utilisateurImage utilisateur

Text Field

Zone de texte modifiable par l'utilisateur

Image utilisateurImage utilisateur

Slider

Curseur pour faciliter la saisie d'une valeur

Image utilisateurImage utilisateur

Switch

Bouton de type ON/OFF

Image utilisateurImage utilisateur

Activity Indicator View

Indicateur d'activité pour faire patienter l'utilisateur pendant un long traitement

Image utilisateurImage utilisateur

Progress View

Indicateur de progression utilisé pendant un long traitement

Image utilisateurImage utilisateur

Page Control

Indique la page en cours de visualisation (dans une application multi-page)

Image utilisateurImage utilisateur

Table View

Liste hiérarchique d'informations textuelles disposées verticalement

Image utilisateurImage utilisateur

Table View Cell

Paramètre d'une des cellules affichées dans un Table View

Image utilisateurImage utilisateur

Image View

Conteneur permettant d'afficher une image ou une animation

Image utilisateurImage utilisateur

Text View

Zone de texte multiligne éditable

Image utilisateurImage utilisateur

Web View

Affichage d'un contenu Web

Image utilisateurImage utilisateur

Map View

Affichage d'une carte, similaire à celle affichée dans l'application Plans

Image utilisateurImage utilisateur

Scroll View

Contrôle permettant d'afficher un contenu d'une taille supérieure à celle de la fenêtre/du contrôle en faisant glisser l'affichage dans la zone de visualisation

Image utilisateurImage utilisateur

Date Picker

Sélection d'une date et d'une heure à l'aide de plusieurs contrôles en forme de roues

Image utilisateurImage utilisateur

Picker View

Sélection d'une valeur dans un contrôle en forme de roue

Image utilisateurImage utilisateur

Ad BannerView

Vue dédiée à l'affichage de publicités

Image utilisateurImage utilisateur

GLKit View

Vue OpenGL ES

Image utilisateurImage utilisateur

Tap Gesture Recognizer

Reconnaissance d'une gestuelle multitouch

Image utilisateurImage utilisateur

Pinch Gesture Recognizer

Reconnaissance de la gestuelle "rétrécir"

Image utilisateurImage utilisateur

Rotation Gesture Recognizer

Reconnaissance de la gestuelle "rotation"

Image utilisateurImage utilisateur

Swipe Gesture Recognizer

Reconnaissance de la gestuelle "glisser"

Image utilisateurImage utilisateur

Pan Gesture Recognizer

Reconnaissance de la gestuelle "glisser"

Image utilisateurImage utilisateur

Long Press Gesture Recognizer

Reconnaissance de la gestuelle "long toucher"

Image utilisateurImage utilisateur

Object

Un objet non disponible dans Interface Builder, tiré d'une instance d'une classe

Image utilisateurImage utilisateur

View Controller

Contrôle dédiée à la gestion de barres d'outils, barres de navigation et vues d'une application

Image utilisateurImage utilisateur

Table View Controller

Contrôle dédié à la gestion d'un Table View

Image utilisateurImage utilisateur

Navigation Controller

Ce contrôle est dédié à la gestion des contrôleurs de vue. Il fournit des informations relatives à la vue active.

Image utilisateurImage utilisateur

Tab Bar Controller

Gère plusieurs vues au travers d'onglets

Image utilisateurImage utilisateur

View

Zone rectangulaire de tracé

Image utilisateurImage utilisateur

Navigation Bar

Barre de navigation, affichée juste en dessous de la barre d'état

Image utilisateurImage utilisateur

Navigation Item

Elément affiché dans un contrôle Navigation Bar

Image utilisateurImage utilisateur

Search Bar

Barre de recherche éditable

Image utilisateurImage utilisateur

Search Bar and Search Display Controller

Barre de recherche et son contrôleur Table View associé

Image utilisateurImage utilisateur

Toolbar

Barre d'outils contenant un ou plusieurs boutons

Image utilisateurImage utilisateur

Bar Button Item

Un bouton dans un contrôle Toolbar

Image utilisateurImage utilisateur

Fixed Space Bar Button Item

Espace ajustable par le programmeur dans un contrôle Toolbar

Image utilisateurImage utilisateur

Flexible Space Bar Button Item

Espace qui s'ajuste automatiquement en fonction de la place disponible dans un contrôle Toolbar

Image utilisateurImage utilisateur

Tab Bar

Barre d'onglets

Image utilisateurImage utilisateur

Tab Bar Item

Une icône représentant un onglet dans un contrôle Tab Bar

Les volets Attributs et Taille

Tous ces contrôles ont l'air très intéressants, mais est-il possible de les personnaliser ?

Juste avant cette (longue) liste, vous avez vu qu'il était possible de changer la taille d'un contrôle en agissant sur ses poignées de redimensionnement. Rassurez-vous, la personnalisation des contrôles ne se limite pas à leur redimensionnement. De nombreux autres paramètres sont accessibles en utilisant le volet des attributs. Pour accéder à ce volet, cliquez sur l'icône Show the Attributes inspector, dans la partie supérieure du volet des utilitaires, comme indiqué à la figure suivante.

Affichage du volet des attributs

Je ne vais pas décrire en détail tous les paramètres accessibles dans le volet des attributs, d'autant plus qu'ils varient énormément d'un contrôle à l'autre. Ce sera donc à vous de les découvrir. Cependant, je ne peux m'empêcher de vous donner quelques conseils pour que vous soyez encore plus efficaces.

  • Le volet des attributs concerne le contrôle actif. Pour sélectionner un contrôle, il vous suffit de cliquer dessus.

  • Les caractéristiques de la vue peuvent également être ajustées dans le volet des attributs : il suffit pour cela de cliquer sur un emplacement inoccupé de la vue afin d'accéder aux paramètres correspondants.

  • Pour sélectionner facilement un des contrôles de l'application, vous pouvez utiliser la barre d'accès rapide d'Interface Builder (cette barre est située au-dessus de la zone d'édition). Cliquez sur l'icône View puis sur le contrôle que vous voulez sélectionner.

  • Pour chaque contrôle, le volet des attributs donne accès à un grand nombre de caractéristiques. Cependant, les informations relatives à la position et à la taille ne sont pas accessibles. Si vous désirez positionner très précisément un contrôle, vous utiliserez le volet Taille. Cliquez sur le contrôle concerné, puis sur l'icône Show the Size inspector dans la partie supérieure du volet des utilitaires.

En résumé

  • Les iPhone, iPod Touch et iPad ont une particularité : ils ne sont capables d'afficher qu'une et une seule fenêtre sur l'écran. Cependant, il est possible de définir plusieurs vues dans Interface Builder, en glissant-déposant des contrôles View Controller depuis la bibliothèque d'objets dans le canevas.

  • Pour que plusieurs vues puissent se faire référence l'une l'autre, vous devez ajouter un contrôleur de navigation (Navigation Controller). Ce dernier est ajouté avec la commande Embed In/Navigation Controller dans le menu Editor de Xcode.

  • Pour définir une transition d'une vue à une autre, contrôle-glissez-déposez un bouton de la vue d'origine sur la vue de destination et choisissez un type de transition : Push, Modal ou Custom.

  • Pour ajouter des contrôles dans une application multivue, glissez-déposez le contrôle souhaité depuis la bibliothèque de contrôles dans la vue qui doit l'héberger. Les contrôles ainsi déposés peuvent être déplacés, alignés et redimensionnés à vue. Vous pouvez également utiliser les volets Attributs et Taille pour accéder à des paramètres complémentaires.

  • Pour sélectionner facilement un des contrôles de l'application, vous pouvez utiliser la barre d'accès rapide d'Interface Builder, au-dessus du canevas. Cliquez sur l'icône View puis sur le contrôle que vous voulez sélectionner.

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