Tutoriel mobile : Utilisation des composants Onglet pour afficher des pages (iOS et Android)

De Appmethod Topics
Aller à : navigation, rechercher

Remonter à Tutoriels mobiles : Développement d'applications mobiles (iOS et Android)


Les onglets sont définis par FMX.TabControl.TTabControl, qui est un conteneur pouvant contenir plusieurs pages d'onglets. Chaque page d'onglet peut contenir n'importe quel contrôle utilisé comme élément de l'interface utilisateur. Vous pouvez masquer l'onglet de ces pages et changer de page sans afficher les onglets.

IOSTabs.png

Pour chaque onglet, vous pouvez spécifier :

  • Un libellé texte — pour iOS et Android
  • Des icônes prédéfinies — pour iOS uniquement
  • Des icônes personnalisées — pour iOS et Android

Utilisation du style natif pour les onglets sur iOS et Android

Ce tutoriel montre des onglets ayant le même style sur iOS et Android, mais cette pratique n'est pas recommandée.
Nous vous recommandons d'adopter le style natif de chaque plate-forme, comme suit :

  • Sur Android :
  • Sur iOS :
    • Les onglets sont typiquement affichés en bas de l'écran (vous devez donc définir TTabPosition sur Bottom ou PlatformDefault).
    • Les éléments onglet affichent toujours du texte et une icône, ce qui peut être défini via la propriété StyleLookup pour chaque onglet.

Remarque : Vous pouvez utiliser la valeur PlatformDefault de l'énumération TTabPosition pour définir la position de l'onglet selon le comportement par défaut de la plate-forme cible. Lorsque PlatformDefault est défini pour TTabPosition :

  • Dans les apps iOS, les onglets sont alignés sur le bord inférieur du TTabControl.
  • Dans les apps Android, les onglets sont alignés sur le bord supérieur du TTabControl.

Conception de pages d'onglets en utilisant le Concepteur de fiches

Pour créer des pages d'onglets dans votre application, utilisez le composant TTabControl en procédant comme suit :

  1. Sélectionnez :
  2. Sélectionnez TTabControl dans la palette d'outils :
    SelectTTabControlFromToolPalette.png

  3. Après avoir déposé le TTabControl, un TabControl vide est affiché sur le Concepteur de fiches (vous devrez peut-être ajuster manuellement la position du TabControl) :
EmptyTabControlOnMobileDesigner.png


  1. Typiquement, les applications qui possèdent un TabControl utilisent le plein écran pour afficher les pages.
    Pour cela, vous devez changer l'alignement par défaut du TabControl. Dans l'inspecteur d'objets, changez la propriété Align du TabControl sur Client:
    ChangeAlignPropertyForTabControlXE6.png

  2. Cliquez avec le bouton droit sur le TabControl et sélectionnez Editeur d'éléments... dans le menu contextuel :
    SelectItemEditorForTabControl.png

  3. Cliquez sur Ajouter un élément trois fois afin d'avoir trois instances de TabItem à cet emplacement. Fermez la boîte de dialogue.

    ItemEditorForTabControl.png


  4. Dans le Concepteur de fiches, sélectionnez le premier TabItem et changez sa propriété StyleLookup.
    iOS

    SetStyleLookupForTabItem iOS7.png

    Android

    AndroidSetStyleLookupForTabItem.png


  5. Vous pouvez placer n'importe quel composant sur chacune des pages.
    Pour passer à une autre page, cliquez simplement sur l'onglet voulu dans le Concepteur de fiches ou changez la propriété ActiveTab dans l'inspecteur d'objets :
    : ChangeActiveTab.png

  6. Pour changer l'emplacement des onglets, sélectionnez la propriété TabPosition pour le composant TabControl, et définissez-la sur l'une des valeurs suivantes dans l'inspecteur d'objets :
    SelectTabPositionPropertyForTabControl.png

Comparaison des paramètres d'onglet sur iOS et Android

Les figures suivantes présentent des apps avec les mêmes paramètres TabPosition (Top, Bottom, Dots et None) sur iOS et Android.
Toutefois, vous devez définir des paramètres d'onglet différents pour chaque plate-forme mobile, comme indiqué dans #Utilisation du style natif pour les onglets sur iOS et Android.

Top
iOS Android
TabControlTop.png AndroidTabControlTop.png
Les onglets sont affichés en haut.


Bottom
iOS Android
TabControlButtom.png AndroidTabControlBottom.png
Les onglets sont affichés en bas.


Dots
iOS Android
TabControlDots.png AndroidTabControlDots.png
Aucun onglet n'est affiché.

A la place, trois points ([...]) sont affichés pour signaler l'existence de pages supplémentaires.


None
iOS Android
TabControlTopNone.png AndroidTabControlNone.png
Aucun onglet ni aucun point n'est affiché à l'exécution, même s'il est visible à la conception.
Les pages peuvent être changées uniquement via le code ou une action.


Paramètres par défaut de la plate-forme
iOS Android
TabControlPlatformDefaultiOS.png AndroidTabControlPlatformDefault.png
Les onglets sont affichés avec les paramètres par défaut de la plate-forme.


Utilisation d'icônes multi-résolutions personnalisées pour vos onglets

Vous pouvez utiliser des icônes multi-résolutions ainsi que du texte personnalisé sur les onglets de votre application.
Ce tutoriel montre comment créer les trois onglets suivants avec des icônes et du texte personnalisés :

ThreeTabsWithText.png
Remarques :
  • Dans les apps Android, les icônes prédéfinies ne sont pas prises en charge et vous devez donc utiliser des icônes personnalisées.
  • Dans les apps iOS, vous pouvez utiliser des icônes prédéfinies ou des icônes personnalisées.
  • Pour utiliser des icônes personnalisées sur iOS ou Android, sélectionnez le Style iOS ou Android approprié dans le Concepteur de fiches, définissez la propriété StyleLookup de TTabItem sur tabitemcustom, spécifiez votre icône personnalisée comme expliqué dans cette section, puis construisez votre app.
  • Pour iOS, vous pouvez utiliser nos icônes prédéfinies en définissant la propriété StyleLookup de TTabItem sur l'icône de votre choix, comme TabItemSearch.png (tabitemsearch).
  • Les glyphes personnalisés utilisés dans cette section sont disponibles dans un fichier zip de votre répertoire C:\Program Files (x86)\Embarcadero\Studio\17.0\Images\GlyFX.
    Les trois PNG utilisés ici sont localisés dans le répertoire Icons\Aero\PNG\32x32.
    • users_32 (People)
    • unlock_32 (Security)
    • tree_32 (Organization)
    Décompressez le fichier glyFX.zip avant d'utiliser l'éditeur MultiResBitmap si vous voulez utiliser ces images ou d'autres images disponibles dans la collection GlyFX.

Affichage d'icônes multi-résolutions personnalisées sur les onglets

  1. Dans l'inspecteur d'objets, sélectionnez TabItem1, puis redéfinissez le libellé de l'onglet spécifié par la propriété Text sur People ; redéfinissez la propriété Text de TabItem2 sur Security, et TabItem3 sur Organization.
    TabsAtTop.png

  2. Sélectionnez un onglet, et cliquez sur le bouton points de suspension [...] sur la propriété CustomIcon du TTabItem dans l'inspecteur d'objets :
    TabItemCustomIconBitmapXE6.png

  3. L'éditeur MultiResBitmap s'ouvre :
    MultiResBitmapEditor0.png
  4. Assurez-vous que vous êtes dans la vue maître puis, dans l'éditeur MultiResBitmap, cliquez sur le tableau en regard de Taille personnalisée et choisissez Taille par défaut.
    DefaultSize.png

  5. Répétez les étapes suivantes pour ajouter les échelles supplémentaires à prendre en charge :
    1. Dans l'éditeur MultiResBitmap, cliquez sur New.bmp (Ajouter un nouvel élément).
    2. Entrez l'échelle supplémentaire à prendre en charge, par exemple 1.5, 2 ou 3.
      • Une fois toutes les échelles voulues ajoutées, l'éditeur ressemble à ceci :
        AllTheScalesAdded2.png

  6. Cliquez sur le bouton Tout remplir depuis le fichier MResBMPFill.png, naviguez jusqu'au fichier image que vous souhaitez utiliser, puis cliquez sur Ouvrir.
    L'image sélectionnée apparaît désormais à l'échelle appropriée dans chacune des entrées Echelle figurant dans l'éditeur MultiResBitmap :
    EditorFullyPopulated2.png

  7. Fermez l'éditeur MultiResBitmap.
  8. Répétez les étapes 2 à 7 pour chacun des composants Tabitem restants et assignez à chaque Tabitem une image d'icône personnalisée.


Dès que vous avez défini une icône personnalisée, le framework FireMonkey génère une image sélectionnée et une image non sélectionnée (estompée) basées sur le fichier .png spécifié. Cette transformation est effectuée en utilisant le canal alpha des données bitmap. Par exemple :

Image d'origine Image sélectionnée Image non sélectionnée
Users 32 h.png TabItemSelected.png TabItemNotSelected.png


Utilisation d'un bitmap à une seule résolution pour une icône personnalisée

Vous pouvez également utiliser uniquement un bitmap à une seule résolution à l'aide de l'éditeur de bitmaps. Un bitmap à une seule résolution affiche une seule échelle dans la vue Structure :

SingleResBitmapInStructureView.png

Pour spécifier un bitmap à une seule résolution pour une icône personnalisée, exécutez la première étape de la procédure ci-dessus, puis continuez comme suit :

  1. Dans la vue Structure, sélectionnez Empty sous CustomIcon :
    TabItemCustomIconBitmapXE6 1.png

  2. Dans l'inspecteur d'objets, cliquez sur le bouton points de suspension [...] dans le champ Bitmap (du TabItem1.CustomIcon[0]). L'éditeur de bitmaps s'ouvre :
    TabItemCustomIconBitmapXE6 2.png

  3. Dans l'éditeur de bitmaps, cliquez sur le bouton Charger... puis sélectionnez un fichier PNG.
    La taille recommandée est 30x30 pixels pour une résolution normale et 60x60 pixels pour une haute résolution :
    BitmapEditorForCustomIcon.png

  4. Cliquez sur OK pour fermer l'éditeur de bitmaps.

  5. Dans l'inspecteur d'objets, définissez la propriété StyleLookup sur tabitemcustom :
    TabItemStyleLookupProperty.png

Définition de contrôles dans un TabControl

Comme nous l'avons vu, chaque page d'onglets peut contenir un nombre quelconque de contrôles, y compris un autre TabControl. Dans ce cas, vous pouvez facilement gérer et parcourir les différentes pages d'onglets dans la vue Structure :

iOS

TabControlCanContainAnotherTabControl.png

Android

AndroidTabControlCanContainAnotherTabControl.png


Changement de page à l'exécution

Par l'interaction de l'utilisateur en touchant l'onglet

Si les onglets sont visibles (lorsque la propriété TabPosition est définie sur toute valeur autre que None), l'utilisateur final peut simplement toucher un onglet pour ouvrir la page associée.

Par les actions et une liste d'actions

Une action correspond à un ou plusieurs éléments de l'interface utilisateur, comme les commandes de menu, les boutons de barre d'outils et les contrôles. Les actions ont deux fonctions :

  • Elles représentent les propriétés communes aux éléments de l'interface utilisateur, par exemple si un contrôle est activé ou si une case à cocher est sélectionnée.
  • Les actions répondent quand un contrôle est déclenché, par exemple quand l'utilisateur de l'application clique sur un bouton ou choisit un élément de menu.

Voici les étapes à suivre pour permettre à un utilisateur de se déplacer de page en page en cliquant sur un bouton :

  1. Sur le Concepteur de fiches, cliquez sur TabItem1 pour le sélectionner.
  2. Depuis la palette d'outils, ajoutez un composant TActionList à la fiche, puis ajoutez un composant TButton à TabItem1 :
    PlaceActionListComponentToForm.png
  3. Le bouton étant sélectionné dans l'inspecteur d'objets, sélectionnez Action | Nouvelle action standard | Onglet > TChangeTabAction dans le menu déroulant. Dès que l'utilisateur clique sur ce bouton, l'action que vous venez de définir est réalisée (changement de page) :
    CreateNewChangeTabAction.png
  4. Sélectionnez ChangeTabAction1 dans la vue Structure, puis sélectionnez TabItem2 pour la propriété Tab dans l'inspecteur d'objets. En liant TabItem2, cette action entraîne le changement de page vers TabItem2 :
    SelectTabPageForChangeTabAction.png
  5. Consécutivement à l'étape précédente, le libellé du bouton (la propriété Text) est automatiquement remplacé par "Go To Security", car le libellé de TabItem2 est "Security" dans notre exemple. Définissez la propriété CustomText du composant ChangeTabAction1 sur Security comme illustré ci-dessous, et changez la taille du bouton pour que le nouveau libellé puisse s'afficher, si nécessaire.
    ChangeCustomText.png
  6. ChangeTabAction prend en charge également l'animation Glissement (Slide) pour indiquer une transition entre chaque page. Pour l'utiliser, définissez la propriété Transition sur Slide :
    SetChangeTabTransitionXE6.png
  7. Sur le Concepteur de fiches, sélectionnez TabItem2 et déposez deux TButton de la palette d'outils sur TabItem2.
  8. Sur le Concepteur de fiches, sélectionnez Button2 et dans l'inspecteur d'objets, sélectionnez Action | Nouvelle action standard | Onglet > TPreviousTabAction dans le menu déroulant.
  9. Sur le Concepteur de fiches, sélectionnez Button3 et dans l'inspecteur d'objets, sélectionnez Action | Nouvelle action standard | Onglet > TNextTabAction dans le menu déroulant.
  10. Sélectionnez PreviousTabAction1 dans la vue Structure et dans l'inspecteur d'objets, définissez sa propriété TabControl sur TabControl1.
  11. Sélectionnez NextTabAction1 dans la vue Structure et dans l'inspecteur d'objets, définissez sa propriété TabControl sur TabControl1.
    SetTabControl1.png
  12. Sur le Concepteur de fiches, sélectionnez TabItem3 et déposez un TButton de la palette d'outils sur TabItem3.
  13. Dans l'inspecteur d'objets, définissez la propriété Action du bouton sur PreviousTabAction1.

Par le code source

En cliquant sur le bouton, vous pouvez utiliser l'une quelconque des trois méthodes suivantes pour changer la page d'onglet active dans votre code source.

Assigner une instance de TTabItem à la propriété ActiveTab

  1. Depuis la palette d'outils, ajoutez un TButton à TabItem3.
  2. Dans l'inspecteur d'objets, définissez sa propriété Text sur Go To People.
    TextGoToPeople.png
  3. Dans le Concepteur de fiches, double-cliquez sur le bouton pour créer le gestionnaire d'événement OnClick et ajoutez le code suivant :
Object Pascal :
  TabControl1.ActiveTab := TabItem1;
C++ :
  TabControl1->ActiveTab = TabItem1;

Assigner une valeur différente à la propriété TabIndex

La propriété TabIndex est une valeur entière basée sur zéro. Vous pouvez spécifier un nombre compris entre 0 et TabControl1.TabCount - 1.

  1. Depuis la palette d'outils, ajoutez un TButton à TabItem1.
  2. Dans l'inspecteur d'objets, définissez sa propriété Text sur Go To Organization.
    TextGoToOrganization.png
  3. Dans le Concepteur de fiches, double-cliquez sur le bouton pour créer le gestionnaire d'événement OnClick et ajoutez le code suivant :
Object Pascal :
  TabControl1.TabIndex := 2;
C++ :
  TabControl1->TabIndex = 2;

Appeler la méthode ExecuteTarget d'une action onglet

Vous pouvez appeler la méthode ExecuteTarget pour chacune des actions de contrôle onglet (TChangeTabAction, TNextTabAction et TPreviousTabAction). Vous devez définir les propriétés TChangeTabAction.Tab, TPreviousTabAction.TabControl et TNextTabAction.TabControl.

Object Pascal :
  // You can set the target at run time if it is not defined yet.
  ChangeTabAction1.Tab := TabItem2;

  // Call the action
  ChangeTabAction1.ExecuteTarget(nil);
C++ :
  // You can set the target at run time if it is not defined yet.
  ChangeTabAction1->Tab = TabItem2;
  
  // Call the action
  ChangeTabAction1->ExecuteTarget(NULL);

Voir aussi

Exemples