Tab bar

Une tab bar (barre d’onglets) apparaît au bas de l’écran d’une application et permet de passer rapidement d’une section à l’autre de l’application. C’est la structure de navigation la plus choisie par les applications mobiles. Elle contient généralement entre 4 et 5 onglets.

Vous pouvez compléter cette navigation principale par une navigation secondaire, par exemple des onglets au niveau de la section.

Créer une tab bar

Comme pour tout élément de navigation, il est préférable d’ utiliser l’avant-plan pour créer la tab bar. Ainsi cette barre est persistante tout au long de l’application et vous pouvez utiliser les états pour représenter la sélection de chaque icône.

Rendez-vous sur l’avant-plan.

Insérer les éléments graphiques

Importez les éléments graphiques de votre tab bar : la barre de fond et les icônes. Pour la barre de fond, vous pouvez utiliser une Forme. Si vous souhaitez colorer vos icônes à la sélection, privilégiez un format .svg ou importez vos fichiers d’icônes en deux couleurs. Dans l’exemple ci-dessous, des icônes blanches sont posées sur des formes colorées : seule la couleur des formes change d’un avant-plan à l’autre.

Dans le 1er avant-plan, représentez votre tab bar pour la 1ère section, ici il s’agit de la section “Articles”. Indiquez visuellement à l’utilisateur que la première icône a été sélectionnée. Dans cet exemple, l’icône sélectionnée est aux couleurs de la section. (NB : si vous souhaitez créer un écran d’accueil sans tab bar, il vous faut créer un avant-plan vierge.)

Créer le lien entre chaque icône et sa section

Au-dessus de chaque icône, ajoutez un composant Zone interactive, ce qui vous permet d’élargir la zone de tap. Associez l’action Changer d’écran vers le bon écran.

Décliner les autres avant-plans

Déclinez les autres sections (“Procédure”, “Quiz”, “Formulaire”) en créant de nouveaux avant-plans liés : dans le panneau Avant-plans, ouvrez le menu + et choisissez Créer un avant-plan lié. Chaque avant-plan est lié au précédent pour conserver les liens et les transitions. Sur chacun, changez la couleur de l’icône et représentez visuellement l’icône sélectionnée.

Associer chaque section à son avant-plan

Dernière étape : il reste à associer chaque section au bon avant-plan ! Sélectionnez l’écran et, dans son panneau Propriétés, choisissez le bon avant-plan dans la liste Avant-plan.

Conseils

iOS Guidelines : https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/