Barres d’onglets et contrôleurs de barre d’onglets dans Xamarin.iOS

Les applications à onglets sont utilisées dans iOS pour prendre en charge les interfaces utilisateur où plusieurs écrans sont accessibles dans un ordre particulier. Par le biais de la classe, les applications peuvent facilement inclure la UITabBarController prise en charge de ces scénarios multi-écran. UITabBarController s’occupe de la gestion multi-écran, ce qui permet au développeur d’applications de se concentrer sur les détails de chaque écran.

En règle générale, les applications à onglets sont créées avec l’être UITabBarController RootViewController de la fenêtre principale. Toutefois, avec un peu de code supplémentaire, les applications à onglets peuvent également être utilisées par succession à un autre écran initial, tel que le scénario dans lequel une application présente d’abord un écran de connexion, suivie de l’interface par onglets.

Cette page décrit les deux scénarios : lorsque les onglets se trouvent à la racine de la hiérarchie d’affichage d’application et également dans le scénario non.RootViewController

Présentation de UITabBarController

Le UITabBarController développement d’applications par onglets prend en charge les éléments suivants :

• Autoriser l’ajout de plusieurs contrôleurs à celui-ci.
• Fourniture d’une interface utilisateur à onglets, via la UITabBar classe, pour permettre à un utilisateur de basculer entre les contrôleurs et leurs vues.

Les contrôleurs sont ajoutés à la UITabBarController propriété via sa ViewControllers propriété, qui est un UIViewController tableau. Elle-même UITabBarController gère le chargement du contrôleur approprié et présente son affichage en fonction de l’onglet sélectionné.

Les onglets sont des instances de la UITabBarItem classe, qui sont contenues dans une UITabBar instance. Chaque UITabBar instance est accessible via la TabBarItem propriété du contrôleur dans chaque onglet.

Pour comprendre comment travailler avec le UITabBarController, voyons comment créer une application simple qui en utilise une.

Procédure pas à pas de l’application à onglets

Pour cette procédure pas à pas, nous allons créer l’application suivante :

Bien qu’il existe déjà un modèle d’application à onglets disponible dans Visual Studio pour Mac, pour cet exemple, ces instructions fonctionnent à partir d’un projet vide pour mieux comprendre la façon dont l’application est construite.

Création de l’application

Commencez par créer une application.

Sélectionnez l’élément de menu Fichier > nouvelle > solution dans Visual Studio pour Mac et sélectionnez un modèle de projet vide d’application > iOS>, nommez le projetTabbedApplication, comme indiqué ci-dessous :

Ajout de UITabBarController

Ensuite, ajoutez une classe vide en sélectionnant Fichier > nouveau fichier et en choisissant le modèle Général : Classe vide. Nommez le fichier TabController comme indiqué ci-dessous :

La TabController classe contiendra l’implémentation de la UITabBarController classe qui gérera un tableau de UIViewControllers. Lorsque l’utilisateur sélectionne un onglet, il UITabBarController s’occupe de présenter l’affichage pour le contrôleur de vue approprié.

Pour implémenter les UITabBarController opérations suivantes :

1. Définissez la classe de base sur TabController UITabBarController .
2. Créez des UIViewController instances à ajouter au TabController .
3. Ajoutez les UIViewController instances à un tableau affecté à la ViewControllers propriété du TabController .

Ajoutez le code suivant à la TabController classe pour effectuer les étapes suivantes :

using System;
using UIKit;

namespace TabbedApplication {
    public class TabController : UITabBarController {

        UIViewController tab1, tab2, tab3;

        public TabController ()
        {
            tab1 = new UIViewController();
            tab1.Title = "Green";
            tab1.View.BackgroundColor = UIColor.Green;

            tab2 = new UIViewController();
            tab2.Title = "Orange";
            tab2.View.BackgroundColor = UIColor.Orange;

            tab3 = new UIViewController();
            tab3.Title = "Red";
            tab3.View.BackgroundColor = UIColor.Red;

            var tabs = new UIViewController[] {
                tab1, tab2, tab3
            };

            ViewControllers = tabs;
        }
    }
}

Notez que pour chaque UIViewController instance, nous définissons la Title propriété du UIViewController. Lorsque les contrôleurs sont ajoutés au UITabBarControllercontrôleur, le UITabBarController contrôleur lit le Title contrôleur et l’affiche sur l’étiquette de l’onglet associé, comme indiqué ci-dessous :

Définition de TabController en tant que RootViewController

L’ordre dans lequel les contrôleurs sont placés dans les onglets correspond à l’ordre dans lequel ils sont ajoutés au ViewControllers tableau.

Pour obtenir le UITabController chargement comme premier écran, nous devons le rendre la fenêtre RootViewController, comme indiqué dans le code suivant pour le AppDelegate:

[Register ("AppDelegate")]
public partial class AppDelegate : UIApplicationDelegate
{
    UIWindow window;
    TabController tabController;

    public override bool FinishedLaunching (UIApplication app, NSDictionary options)
    {
        window = new UIWindow (UIScreen.MainScreen.Bounds);

        tabController = new TabController ();
        window.RootViewController = tabController;

        window.MakeKeyAndVisible ();

        return true;
    }
}

Si nous exécutons l’application maintenant, le UITabBarController chargement avec le premier onglet sélectionné par défaut. La sélection de l’un des autres onglets entraîne la présentation de l’affichage du contrôleur associé, UITabBarController, comme indiqué ci-dessous, où l’utilisateur final a sélectionné le deuxième onglet :

Modification de TabBarItems

Maintenant que nous avons une application onglet en cours d’exécution, nous allons modifier l’image TabBarItem et le texte affichés, ainsi que pour ajouter un badge à l’un des onglets.

Définition d’un élément système

Tout d’abord, nous allons définir le premier onglet pour utiliser un élément système. Dans le constructeur du TabController, supprimez la ligne qui définit l’instance Title tab1 du contrôleur et remplacez-la par le code suivant pour définir la propriété du TabBarItem contrôleur :

tab1.TabBarItem = new UITabBarItem (UITabBarSystemItem.Favorites, 0);

Lorsque vous créez l’utilisation UITabBarItem d’un UITabBarSystemItem, le titre et l’image sont fournis automatiquement par iOS, comme illustré dans la capture d’écran ci-dessous montrant l’icône favoris et le titre sous le premier onglet :

Définition de l’image

Outre l’utilisation d’un élément système, le titre et l’image d’un UITabBarItem peut être défini sur des valeurs personnalisées. Par exemple, modifiez le code qui définit la TabBarItem propriété du contrôleur nommé tab2 comme suit :

tab2 = new UIViewController ();
tab2.TabBarItem = new UITabBarItem ();
tab2.TabBarItem.Image = UIImage.FromFile ("second.png");
tab2.TabBarItem.Title = "Second";
tab2.View.BackgroundColor = UIColor.Orange;

Le code ci-dessus suppose qu’une image nommée second.png a été ajoutée à la racine du projet (ou à un répertoire Resources ). Pour prendre en charge toutes les densités d’écran, vous avez besoin de trois images, comme indiqué ci-dessous :

La taille recommandée varie en fonction du style de l’image (circulaire, carré, large ou grand).

La Image propriété doit uniquement être définie sur le nom de fichier second.png , iOS charge automatiquement les fichiers de résolution plus élevés si nécessaire. Vous pouvez en savoir plus sur ce sujet dans les guides Working with Images . Par défaut, les éléments de la barre d’onglets sont gris, avec une teinte bleue lorsqu’ils sont sélectionnés.

Remplacement du titre

Lorsque la Title propriété est définie directement sur le TabBarItemcontrôleur, elle remplace toute valeur définie Title sur le contrôleur lui-même.

Le deuxième onglet (milieu) de cette capture d’écran montre un titre et une image personnalisés :

Définition de la valeur du badge

Un onglet peut également afficher un badge. Par exemple, ajoutez la ligne de code suivante pour définir un badge sous le troisième onglet :

tab3.TabBarItem.BadgeValue = "Hi";

L’exécution de cette opération entraîne une étiquette rouge avec la chaîne « Hi » dans le coin supérieur gauche de l’onglet, comme indiqué ci-dessous :

Le badge est souvent utilisé pour afficher une indication numérique non lue, de nouveaux éléments. Pour supprimer le badge, définissez la BadgeValue valeur Null comme indiqué ci-dessous :

tab3.TabBarItem.BadgeValue = null;

Onglets dans les scénarios non RootViewController

Dans l’exemple ci-dessus, nous avons montré comment utiliser un UITabBarController moment où il s’agit RootViewController de la fenêtre. Dans cet exemple, nous allons examiner comment utiliser un UITabBarController moment où ce n’est pas le RootViewController cas et montrer comment cela est créé à l’aide de Storyboards.

Exemple d’écran initial

Pour ce scénario, l’écran initial se charge à partir d’un contrôleur qui n’est pas un UITabBarController. Lorsque l’utilisateur interagit avec l’écran en appuyant sur un bouton, le même contrôleur d’affichage est chargé dans un UITabBarController, qui est ensuite présenté à l’utilisateur. La capture d’écran suivante présente le flux d’application :

Commençons une nouvelle application pour cet exemple. Là encore, nous allons utiliser le modèle Projet vide de l’application > iPhone > (C#), cette fois en nommant le projetInitialScreenDemo.

Dans cet exemple, un storyboard est utilisé pour disposer des contrôleurs de vue. Pour ajouter un storyboard :

• Cliquez avec le bouton droit sur le nom du projet, puis sélectionnez Ajouter > un nouveau fichier.

• Lorsque la boîte de dialogue Nouveau fichier s’affiche, accédez à iOS > Vide iPhone Storyboard.

Appelons ce nouveau Storyboard MainStoryboard , comme illustré ci-dessous :

Il existe quelques étapes importantes à noter lors de l’ajout d’un storyboard à un fichier de montage séquentiel précédemment non-storyboard, qui sont abordés dans le guide Introduction aux storyboards . Il s’agit des étapes suivantes :

1. Ajoutez le nom de votre storyboard à la section Interface principale du Info.plist:

   

2. Dans votre App Delegate, remplacez la méthode Window par le code suivant :

   public override UIWindow Window {
       get;
       set;
   }
   

Nous allons avoir besoin de trois contrôleurs d’affichage pour cet exemple. Un, nommé ViewController1, sera utilisé comme contrôleur d’affichage initial et dans le premier onglet. Les deux autres, nommés ViewController2 et ViewController3, qui seront utilisés respectivement dans les deuxième et troisième onglets.

Ouvrez le Concepteur en double-cliquant sur le fichier MainStoryboard.storyboard, puis faites glisser trois contrôleurs d’affichage sur l’aire de conception. Nous voulons que chacun de ces contrôleurs d’affichage ait leur propre classe correspondant au nom ci-dessus. Par conséquent, sous Classe d’identité>, tapez son nom, comme illustré dans la capture d’écran ci-dessous :

Visual Studio pour Mac génère automatiquement les classes et les fichiers de concepteur nécessaires, comme illustré ci-dessous :

Création de l’interface utilisateur

Ensuite, nous allons créer une interface utilisateur simple pour chacune des vues de ViewController, à l’aide du concepteur Xamarin iOS.

Nous voulons faire glisser un Label et un Button vers ViewController1 à partir de l’ToolBox sur le côté droit. Ensuite, nous allons utiliser le panneau Propriétés pour modifier le nom et le texte des contrôles en procédant comme suit :

• Étiquette : Text = Un
• Bouton : Title = l’utilisateur effectue une action initiale

Nous allons contrôler la visibilité de notre bouton dans un TouchUpInside événement et nous devons y faire référence dans le code-behind. Nous allons l’identifier avec le nom aButton dans le panneau Propriétés, comme illustré dans la capture d’écran suivante :

Votre Surface de conception doit maintenant ressembler à la capture d’écran ci-dessous :

Ajoutons un peu plus de détails à ViewController2 et ViewController3, en ajoutant une étiquette à chacun d’eux, et en remplaçant le texte par « Two » et « Three » respectivement. Cela met en évidence l’utilisateur auquel nous examinons l’onglet/affichage.

Câblage vers le haut du bouton

Nous allons charger ViewController1 lorsque l’application démarre pour la première fois. Lorsque l’utilisateur appuie sur le bouton, nous allons masquer le bouton et charger une UITabBarController instance avec l’instance ViewController1 dans le premier onglet.

Lorsque l’utilisateur libère , aButtonnous voulons qu’un événement TouchUpInside soit déclenché. Nous allons sélectionner le bouton et, dans l’onglet Événements du panneau Propriétés, déclarez le gestionnaire d’événements , InitialActionCompleted afin qu’il puisse être référencé dans le code. Ceci est illustré dans la capture d’écran ci-dessous :

Nous devons maintenant indiquer au contrôleur de vue de masquer le bouton lorsque l’événement se InitialActionCompleteddéclenche. Dans ViewController1, ajoutez la méthode partielle suivante :

partial void InitialActionCompleted (UIButton sender)
{
    aButton.Hidden = true;  
}

Enregistrez le fichier et exécutez l’application. Nous devrions voir l’écran 1 apparaître et le bouton disparaît sur Touch Up.

Ajout du contrôleur de barre d’onglets

Nous avons maintenant notre vue initiale qui fonctionne comme prévu. Ensuite, nous voulons l’ajouter à un UITabBarController, ainsi que Views 2 et 3. Nous allons ouvrir le Storyboard dans le Concepteur.

Dans la boîte à outils, recherchez le contrôleur de barre d’onglets sous Contrôleurs et objets, puis faites-le glisser sur l’aire de conception. Comme vous pouvez le voir dans la capture d’écran ci-dessous, le contrôleur de barre d’onglets est sans interface utilisateur et apporte donc deux contrôleurs d’affichage avec celui-ci par défaut :

Supprimez ces nouveaux contrôleurs d’affichage en sélectionnant la barre noire en bas et en appuyant sur Supprimer.

Dans notre Storyboard, nous pouvons utiliser Segues pour gérer les transitions entre tabBarController et nos contrôleurs de vue. Après avoir interagissant avec l’affichage initial, nous voulons le charger dans tabBarController présenté à l’utilisateur. Nous allons configurer cela dans le concepteur.

Ctrl-Click and Drag from the button to the TabBarController. Sur la souris, un menu contextuel s’affiche. Nous voulons utiliser un segue modal.

Pour configurer chacun de nos onglets, cliquez sur Ctrl à partir de TabBarController pour chacun de nos contrôleurs d’affichage dans l’ordre d’un à trois, puis sélectionnez l’onglet Relation dans le menu contextuel, comme illustré ci-dessous :

Votre Storyboard doit ressembler à la capture d’écran ci-dessous :

Si nous cliquez sur l’un des éléments de la barre d’onglets et explorez le volet de propriétés, vous pouvez voir plusieurs options différentes, comme illustré ci-dessous :

Nous pouvons l’utiliser pour modifier certains attributs tels que le badge, le titre et l’identificateur iOS, entre autres.

Si nous enregistrons et exécutons l’application maintenant, nous constatons que le bouton réapparaît lorsque l’instance ViewController1 est chargée dans tabBarController. Nous allons résoudre ce problème en vérifiant si l’affichage actuel a un contrôleur de vue parent. Si c’est le cas, nous savons que nous sommes à l’intérieur de TabBarController, et par conséquent, le bouton doit être masqué. Ajoutons le code ci-dessous à la classe ViewController1 :

public override void ViewDidLoad ()
{
    if (ParentViewController != null){
        aButton.Hidden = true;
    }
}

Lorsque l’application s’exécute et que l’utilisateur appuie sur le bouton sur le premier écran, uiTabBarController est chargé, avec l’affichage à partir du premier écran placé dans le premier onglet, comme indiqué ci-dessous :

Résumé

Cet article a abordé l’utilisation d’une UITabBarController application. Nous avons découvert comment charger des contrôleurs dans chaque onglet, ainsi que comment définir des propriétés sur des onglets tels que le titre, l’image et le badge. Nous avons ensuite examiné, à l’aide de storyboards, comment charger un UITabBarController au moment de l’exécution lorsqu’il n’est pas la RootViewController fenêtre.

Liens connexes

• Images.zip
• UITabBarController, référence de classe