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 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 Aller à l'é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 états d'avant-plan. Chaque état est lié au précédent pour conserver les liens et les transitions. Sur chaque état, 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 état ! Rendez-vous dans les Propriétés de l'écran et sélectionnez le bon avant-plan.  

Conseils

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