> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Mobiles

> Créez des applications pour iPhone, iPad et iPod Touch

> Création d'interfaces graphiques

> Fenêtres, vues et contrôles

> Lecture du tutoriel

Fenêtres, vues et contrôles

Par MichelMartin

Mise à jour : 01/02/2012

Difficulté : Facile Facile

Durée d'étude : 1 heure, 30 minutes

19 893 visites depuis 7 jours, dont 501 sur ce chapitre classé 18/786

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.).

Retour en haut

Sommaire du chapitre :

Création d'une application multivues
Insérer un contrôle dans une application
Positionner, aligner et redimensionner un contrôle à vue
Un aperçu des contrôles disponibles
Les volets Attributs et Taille
Q.C.M.

Retour en haut

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.

Retour en haut

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

Pour insérer un contrôle dans l'application, vous pouvez également double-cliquer sur son icône dans la bibliothèque.

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.

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

Retour en haut

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

Retour en haut

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
	Label	Texte non modifiable par l'utilisateur
	Round Rect Button	Bouton de commande touch
	Segmented Control	Onglets permettant d'afficher différentes vues/contrôles
	Text Field	Zone de texte modifiable par l'utilisateur
	Slider	Curseur pour faciliter la saisie d'une valeur
	Switch	Bouton de type ON/OFF
	Activity Indicator View	Indicateur d'activité pour faire patienter l'utilisateur pendant un long traitement
	Progress View	Indicateur de progression utilisé pendant un long traitement
	Page Control	Indique la page en cours de visualisation (dans une application multi-page)
	Table View	Liste hiérarchique d'informations textuelles disposées verticalement
	Table View Cell	Paramètre d'une des cellules affichées dans un Table View
	Image View	Conteneur permettant d'afficher une image ou une animation
	Text View	Zone de texte multiligne éditable
	Web View	Affichage d'un contenu Web
	Map View	Affichage d'une carte, similaire à celle affichée dans l'application Plans
	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
	Date Picker	Sélection d'une date et d'une heure à l'aide de plusieurs contrôles en forme de roues
	Picker View	Sélection d'une valeur dans un contrôle en forme de roue
	Ad BannerView	Vue dédiée à l'affichage de publicités
	GLKit View	Vue OpenGL ES
	Tap Gesture Recognizer	Reconnaissance d'une gestuelle multitouch
	Pinch Gesture Recognizer	Reconnaissance de la gestuelle "rétrécir"
	Rotation Gesture Recognizer	Reconnaissance de la gestuelle "rotation"
	Swipe Gesture Recognizer	Reconnaissance de la gestuelle "glisser"
	Pan Gesture Recognizer	Reconnaissance de la gestuelle "glisser"
	Long Press Gesture Recognizer	Reconnaissance de la gestuelle "long toucher"
	Object	Un objet non disponible dans Interface Builder, tiré d'une instance d'une classe
	View Controller	Contrôle dédiée à la gestion de barres d'outils, barres de navigation et vues d'une application
	Table View Controller	Contrôle dédié à la gestion d'un Table View
	Navigation Controller	Ce contrôle est dédié à la gestion des contrôleurs de vue. Il fournit des informations relatives à la vue active.
	Tab Bar Controller	Gère plusieurs vues au travers d'onglets
	View	Zone rectangulaire de tracé
	Navigation Bar	Barre de navigation, affichée juste en dessous de la barre d'état
	Navigation Item	Elément affiché dans un contrôle Navigation Bar
	Search Bar	Barre de recherche éditable
	Search Bar and Search Display Controller	Barre de recherche et son contrôleur Table View associé
	Toolbar	Barre d'outils contenant un ou plusieurs boutons
	Bar Button Item	Un bouton dans un contrôle Toolbar
	Fixed Space Bar Button Item	Espace ajustable par le programmeur dans un contrôle Toolbar
	Flexible Space Bar Button Item	Espace qui s'ajuste automatiquement en fonction de la place disponible dans un contrôle Toolbar
	Tab Bar	Barre d'onglets
	Tab Bar Item	Une icône représentant un onglet dans un contrôle Tab Bar

Retour en haut

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.

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.

Retour en haut

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.

Retour en haut

Retour en haut

19 commentaires pour "Fenêtres, vues et contrôles"

Note moyenne : 3.41 / 4 (189 votes)

Pseudo	Commentaire
Laffineur	# Posté le 25/04/2012 à 01:14:15
	Bonjour MichelMartin, J'ai une question a vous poser, Dès lors que l'on ajoute le "Navigation Controller, puis qu'on le relie à la première page, puis ainsi-de suite, des NavBar s'ajoutent automatiquement, et, pour ma part, impossible de les supprimer (j'utilise une NavBar personnalisée, et cela me gène assez, auriez vous une astuce pour la supprimer ? Merci. Sinon, le tutoriel est excellent.
MichelMartin	# Posté le 01/05/2012 à 20:33:39
Avis : Très bon Groupe : Auteurs	Bonjour Laffineur, La barre de navigation fait partie de la gestion de vues multiples. Je ne sais pas comment la supprimer. Essayez de poster sur le forum. Peut-être que quelqu'un pourra vous aider. Bonne chance... Et pour terminer, je suis content que ce tuto vous plaise
Scissors	# Posté le 02/05/2012 à 17:18:24
	Laffineur, si tu veux vraiment enlever la navigation Bar des vues qui y sont rattachées, clique sur ton navigation Controller, puis dans "Attributes Inspector", décoches la case "Show Navigation Bar" dans l'onglet "Navigation Controller". J'éspère que c'est bien ce que tu cherchais à faire
yo-2b	# Posté le 21/05/2012 à 14:29:59
	Bonjour à tous, J'ai lu tout vos tutos, et ils sont très bien fait, encore merci ! Cependant, a mes heures perdues, j'essaie de creer une application native très basique et simple permettant de recuperer le flux RSS de mon site type blog (wordpress) afin qu'il soit disponible sur iPhone. Mais je ne sais pas du tout comment m'y prendre, donc si vous avez des idées ou des liens a me conseiller, je suis preneur ! Ah j'oubliais, la plupars des tutos que j'ai trouver sont fait avec XCode 4.2.0 ou inferieur. Or moi j'ai télécharger et installer XCode 4.3.2 et je n'ai pas les mêmes templates que dans leur tutos donc je suis un peu perdu. Merci d'avance
zozzo	# Posté hier à 15:00:36
	Merci pour tous ces tutus, ils sont excellents !! Par rapport aux multi-view, j'ai une question (probablement basique), faut il créer des subclass viewcontroller pour chacune de nos view controller. J'aurai aimé changer un label dans le deuxième viewcontroller en fonction d'une valeur entrée dans le premier view controller; mais le ctrl-drag vers la class (j'en ai qu'une pour le moment) uiviewcontroller ne marche que pour les éléments du premier viewcontroller. Merci encore !