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. Dans le champ Vues du Concepteur de fiches, créez une vue pour chaque plate-forme que vous voulez supporter. Ce tutoriel utilise une vue iOS et une vue Android.
  3. Sélectionnez TTabControl dans la palette d'outils :
    SelectTTabControlFromToolPalette.png

  4. 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) :
iOS

EmptyTabControlOnMobileDesigner.png

Android

AndroidEmptyTabControlOnMobileDesigner.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 en 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. Sur le Concepteur de fiches, sélectionnez le premier TabItem et changez sa propriété StyleLookup :
    iOS 7

    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 TabControls.
    Pour chaque onglet, vous pouvez sélectionner l'une quelconque des valeurs suivantes de la propriété TabPosition dans l'inspecteur d'objets :
    SelectTabPositionPropertyForTabControlXE7.jpeg

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
Ios.jpeg Android.jpeg
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 indifféremment sur iOS ou Android, sélectionnez le périphérique de conception 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 $(BDS)\Images\GlyFX.
    Les trois PNG utilisés ici sont localisés dans le répertoire Aero :
    • users_32 (People)
    • unlock_32 (Security)
    • tree_32 (Organization)
    Dézippez 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. Pour une application multi-périphérique, déposez un composant TabControl sur le Concepteur de fiches, définissez sa propriété Align sur Client, et ajoutez plusieurs onglets sur le TabControl :
    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
    L'entrée Echelle vide initiale est supposée indiquer une échelle de 1.000.
    Cliquez sur le sélecteur de taille Size, choisissez Taille par défaut et définissez la taille sur 32 x 32 :
    DefaultSize.png

  4. Répétez l'étape suivante pour ajouter les échelles supplémentaires que vous voulez prendre en charge :
    1. Cliquez sur Ajouter un nouvel élément New.bmp.
    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

  5. Cliquez sur le bouton Tout remplir depuis le fichier MResBMPFill.png, naviguez jusqu'au fichier .png que vous voulez utiliser et 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

  6. Fermez l'éditeur MultiResBitmap.
  7. Répétez les étapes 2 à 6 pour chacun des composants Tabitem restants et affectez à chaque Tabitem une image d'icône personnalisée.
  8. Dans la propriété Text, changez le texte de chaque onglet :
    TabItemTextProperty.png

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 une application multi-périphérique, placez un TabControl et dotez-le de quelques éléments onglets (TabItem1, TabItem2 et TabItem3).
  2. Depuis la palette d'outils, ajoutez un TButton à la fiche, puis un composant ActionList :
    iOS :
    PlaceActionListComponentToForm.png

    Android :
    AndroidPlaceActionListComponentToForm.png

  3. Dans le Concepteur de fiches, activez la vue maître. Sélectionnez ensuite le composant Bouton dans l'inspecteur d'objets, puis choisissez 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) :
    iOS :
    CreateNewChangeTabAction.png

    Android :
    AndroidCreateNewChangeTabAction.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 :
    iOS :
    SelectTabPageForChangeTabAction.png

    Android :
    AndroidSelectTabPageForChangeTabAction.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. Changez la taille du bouton pour que le nouveau libellé puisse s'afficher ou changez la propriété CustomText du composant ChangeTabAction1 comme illustré ci-dessous :
    iOS :
    ChangeCustomText.png

    Android :
    AndroidChangeCustomText.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


Par le code source

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

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.

Object Pascal :
  TabControl1.TabIndex := 1;
C++ :
  TabControl1->TabIndex = 1;

Si ChangeTabAction est défini, vous pouvez exécuter une action à partir de votre code

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

  // Call the action
  ChangeTabAction1.Execute;
C++ :
  ChangeTabAction1->Tab = TabItem2;
  ChangeTabAction1->Execute();

Voir aussi