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

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.

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 :

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

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.

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

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.

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

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.

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.

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

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

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.

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.