Création d'une App iOS à barre d'onglets avec UITabBarViewController

Ce tutoriel vous montrera comment créer un projet Xcode pour construire une application iPhone avec une barre d'onglets en bas de l'écran.

Dans la plupart de mes tutoriels et démonstrations, nous commençons par un projet Xcode de type Single View Application, qui est un point de départ fondamental et polyvalent.

Toutefois, si votre intention est de créer une application iOS à barre d'onglets, il y a un autre modèle de projet Xcode qui offre un meilleur point de départ : le modèle de projet Tabbed Application.

Essentiellement, celui-ci contiendra un UITabBarViewController et deux contrôleurs de vue représentant deux onglets, comme vous verrez un peu plus loin.

Sélectionnez ce modèle comme point de départ et cliquez sur Suivant. Sur la boîte de dialogue suivante, vous pouvez entrer quelques paramètres du projet, mais cela ne présente pas beaucoup d'intérêt, car il s'agit d'une démonstration :

Après cela, vous aurez un tout nouveau projet Xcode Tabbed App Demo ! Regardez le volet du navigateur de fichiers sur votre gauche et vous verrez quelque chose comme ceci :

Le modèle de projet démarre avec deux onglets dans votre barre d'onglets.

Comme vous pouvez l'observer dans le navigateur de fichiers, il y a deux contrôleurs de vue, chacun représentant l'un des onglets.

Maintenant, exécutez votre application et vous pouvez essayer les deux onglets en action.

Accédez à votre Main.Storyboard dans le navigateur de fichiers. Remarquez que vous avez un seul point de départ, le contrôleur de la barre d'onglets, et deux contrôleurs de vue qui sont connectés au contrôleur de la barre d'onglets par des segues (transitions). Les deux flèches grises allant du contrôleur de la barre d'onglets aux deux autres contrôleurs de vue sont les transitions.

Remarquez également la flèche sur le côté gauche du contrôleur de la barre d'onglets. Cette flèche pointant vers le contrôleur de la barre d'onglets indique que c'est lui le contrôleur de vue de départ.

Donc l'ajout d'un autre onglet à la barre d'onglets équivaut à l'ajout d'une autre vue !

Nous devrons ajouter un autre contrôleur de vue au storyboard, puis connecter une transition à partir du contrôleur de la barre d'onglets vers le troisième contrôleur de vue.

Commencez par vérifier que vous pouvez voir le panneau de droite, appelé volet d'inspection. Sa moitié inférieure est le volet des bibliothèques, où vous pouvez voir une collection d'objets liés à l'interface utilisateur.

Si vous ne le voyez pas, vous pouvez cliquer sur le bouton du coin supérieur droit pour activer/désactiver la visibilité du volet.

Assurez-vous que vous êtes sur l'onglet Objets et tapez « view controller » pour filtrer la liste.

Quand vous voyez les objets contrôleur de vue, cliquez et faites glisser sur une zone vide de votre storyboard. Assurez-vous que vous faites glisser un View Controller et pas un autre type tel que Table View Controller ou Collection View Controller.

Après l'ajout d'un nouveau contrôleur de vue, votre storyboard ressemblera à ceci :

Notez cependant qu'il n'y a aucune transition (ligne grise) reliant le contrôleur de la barre d'onglets à ce nouveau contrôleur de vue.

Nous devons l'ajouter !

Maintenez enfoncée la touche contrôle, cliquez sur le contrôleur de la barre d'onglets et commencez à faire glisser votre souris vers le nouveau contrôleur de vue. Si vous maintenez enfoncée la touche contrôle, le contrôleur de la barre d'onglets ne bouge pas et au lieu de cela, vous allez commencer à voir une ligne bleue qui suit votre souris. Déposez-la exactement sur le nouveau contrôleur de vue pour faire apparaître ce menu :

Sélectionnez le dernier élément, view controllers.

Vous devriez voir instantanément une transition se former et connecter le contrôleur de la barre d'onglets au nouveau contrôleur de vue et de plus, vous remarquerez l'apparition d'un nouvel objet onglet dans la barre d'onglets !

À ce stade, si vous exécutez votre projet, vous pouvez interagir avec vos trois onglets.

Si vous allez à votre bibliothèque de ressources, qui est l'élément nommé Images.xcassets dans votre navigateur de fichiers, vous verrez les deux icônes par défaut, utilisées pour les deux onglets que Xcode a créés pour vous lorsque vous avez créé le projet.

La bibliothèque de ressources est la bibliothèque d'images de votre application. À chaque fois que vous aurez besoin d'ajouter des images à votre application, vous souhaiterez les ajouter à cette bibliothèque.

Toutes les ressources ne doivent pas être utilisées ; considérez cela plutôt comme un référentiel d'images disponibles pour utilisation dans votre application.

Ainsi, si vous voulez changer les icônes des onglets, vous devez préalablement ajouter les images des icônes dans la bibliothèque de ressources.

Commencez par un clic droit sur une zone vide de la liste de composants en choisissant New Image Set.

Vous pouvez ensuite le renommer comme vous voulez. Pour suivre la convention commencée par le projet par défaut, je l'ai appelé « third »(1).

Comme vous pouvez le voir dans l'image, il y a deux emplacements pour ajouter des images : 1x et 2x. La version 2x est le double de la taille de la version 1x et est utilisée pour les écrans Retina (que la plupart des périphériques iOS ont ces jours-ci).

Pour connaître les dimensions des icônes de la barre d'onglets, j'ai fait un clic droit sur l'une des images d'icône existantes dans la bibliothèque de ressources et sélectionné « Reveal in Finder ».

Ensuite, j'ai été en mesure d'en examiner les dimensions. Ceci a révélé les informations suivantes :

first.png (1x Version) a 30px x 30px
first@2x.png (2x Version) a 60px x 60px

Remarquez que la version 2x porte le même nom, mais avec un « @2x » supplémentaire. Cela permet au système de savoir que c'est la version retina de la même image.

Deuxièmement, notez que les images sont en noir et blanc.

Enfin, remarquez que les images des icônes sont des PNG. Vous pouvez ajouter uniquement des PNG à la bibliothèque de ressources.

Expérimentez avec différentes icônes créées à partir de votre programme graphique préféré.

Une fois que vous avez les versions 1x et 2x de l'image de votre icône, vous pouvez simplement les faire glisser et déposer dans les fentes respectives de l'ensemble d'images que vous venez de créer dans la bibliothèque de ressources.

Après avoir ajouté les images de vos icônes à la bibliothèque de ressources, retournez à Main.Storyboard et cliquez sur le contrôleur de vue dont vous souhaitez modifier l'icône et le titre.

Il y a un aperçu du document dans le storyboard (si vous ne le voyez pas, j'ai indiqué le bouton qui permet de basculer sa visibilité dans la capture d'écran ci-dessous) et vous voudrez le développer pour votre contrôleur de vue souhaité, de sorte que vous voyez le Tab Bar Item dans l'arborescence.

Une fois que vous avez mis en évidence cet élément, allez dans le volet d'inspection et si vous avez sélectionné l'onglet de droite (voir la capture d'écran ci-dessous), vous verrez les propriétés à modifier de la barre d'onglets, l'icône et le titre.

La dernière chose que vous pourriez vouloir faire pour votre nouvel onglet est de créer une classe personnalisée pour le contrôleur de vue que vous avez ajouté via le storyboard.

Qu'est-ce que cela veut dire ?

Si vous regardez dans votre navigateur de fichiers, vous allez remarquer deux classes, FirstViewController et SecondViewController.

Ces deux classes correspondent chacune à l'un des deux contrôleurs de vue par défaut qui étaient dans votre projet au début. Cela signifie que vous pouvez ajouter du code et de la logique métier à ces classes pour faire fonctionner les deux premières vues de l'onglet.

Malheureusement, vous n'avez pas cela pour votre troisième onglet, celui que vous avez ajouté !

Vous pouvez corriger cela en cliquant droit dans le navigateur de fichiers et en sélectionnant New File.

Dans la boîte de dialogue suivante, assurez-vous que vous êtes sur la section « Cocoa Touch » et sélectionnez Objective-C class.

Puis, dans la boîte de dialogue des détails de la classe, assurez-vous de taper UIViewController pour la sous-classe et, quant au nom, vous pouvez l'appeler comme vous voulez. Pour suivre la convention de nommage des deux autres contrôleurs de vue, je l'ai appelé « ThirdViewController ».

Après avoir confirmé et enregistré le fichier, vous le verrez dans votre navigateur de fichiers comme ceci :

Maintenant, retournez à Main.Storyboard, cliquez sur votre troisième contrôleur de vue et vérifiez s'il y a un contour bleu autour de lui, pour vous assurer qu'il est sélectionné.

S'il n'y a pas de contour bleu lorsque vous cliquez dessus, vous pouvez le sélectionner sur l'aperçu du document :

Maintenant que notre troisième contrôleur de vue est sélectionné, nous devons être sûrs que les propriétés que nous sommes sur le point de modifier appartiennent à ce contrôleur de vue.

Regardez dans l'Inspecteur d'attributs (fenêtre de droite). Si vous avez sélectionné le bon onglet (voir la capture d'écran ci-dessous), vous verrez une liste déroulante pour choisir une classe personnalisée.

Développez la liste déroulante Custom Class et sélectionnez la nouvelle classe UIViewController que vous avez créée et vous avez terminé !

Maintenant, ce storyboard sera la vue pour la classe UIViewController que vous avez créée dans votre projet Xcode et tout est mis en place pour y ajouter du code/logique.

Comme vous pouvez voir, parfois le choix judicieux du modèle de projet Xcode peut vous faire économiser beaucoup de temps. On aurait pu arriver au même résultat, même si nous avions commencé avec le modèle de projet Xcode Single View Application, mais nous aurions dû ajouter manuellement une partie de la plomberie que nous avons obtenue gratuitement en utilisant le modèle Tabbed Application.

Si vous avez des questions au sujet des applications aux onglets ou des idées pour élargir ce tutoriel, s'il vous plaît n'hésitez pas à me le faire savoir.

Si vous avez trouvé ce tutoriel intéressant et que vous le partagez avec vos amis et collègues, je vous en serai reconnaissant !

Nous remercions Chris Ching de nous avoir aimablement autorisés à publier son article. Cet article est une traduction autorisée dont le texte original peut être trouvé sur codewithchris.com. Nous remercions aussi Mishulyna pour sa traduction, LeBzul pour sa relecture technique ainsi que jacques_jean pour sa relecture orthographique.