web-dev-qa-db-fra.com

Comment TabItem est-il utilisé lorsqu'il est placé dans le XML de mise en page?

La TabLayout documentation donne un exemple d'imbrication de TabItem directement dans TabLayout comme ceci:

<Android.support.design.widget.TabLayout
     Android:layout_height="wrap_content"
     Android:layout_width="match_parent">

    <Android.support.design.widget.TabItem
         Android:text="@string/tab_text"/>

    <Android.support.design.widget.TabItem
         Android:icon="@drawable/ic_Android"/>

</Android.support.design.widget.TabLayout>

Mais cela ne donne aucun exemple de la façon dont cela pourrait être utilisé dans la pratique, et la documentation de TabItem indique:

Cette vue n’est pas réellement ajoutée à TabLayout, c’est juste un mannequin qui permet de définir le texte, les icônes et la disposition personnalisée des éléments d’onglet. 

Alors à quoi sert TabItem? Après une longue recherche sur Google, je ne trouve aucun exemple de définition de TabItems dans XML. Existe-t-il un moyen de configurer une activité à onglet en utilisant TabItem dans le fichier de ressources comme indiqué ci-dessus? 

androidandroid-layoutandroid-tabsandroid-tablayout
19
Nathan Fig

Cela semble être un ajout relativement récent à la bibliothèque de conception, apparemment ajouté dans la version 23.2.0, bien que cela ne soit pas mentionné dans l'historique des révisions . Sa fonctionnalité est assez basique, et les seuls attributs qu’il semble utiliser sont les trois donnés dans ses docs : text, icon et layout.

D'après les tests, il semble qu'il s'agisse essentiellement d'un raccourci XML permettant de créer une nouvelle variable Tab et de définir son texte, son icône et sa variable View personnalisée, comme on le ferait habituellement dans le code. Quand il est écrit "Cette vue n'est pas réellement ajoutée à TabLayout", je pense que cela signifie que ce n'est pas une View au sens habituel du fait que vous ne pouvez définir aucun attribut de disposition standard, comme layout_width ou background . Cela sert simplement à amener la TabLayout à créer une nouvelle Tab pour chaque TabItem et à appeler setText(), setIcon() et setCustomView() en conséquence.

Par exemple, pour ajouter un Tab dans le code, nous ferions généralement quelque chose comme ceci:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);

// Add Tab
TabLayout.Tab tab = tabLayout.newTab();

tab.setCustomView(R.layout.tab);
tab.setText("Tab 1");
tab.setIcon(R.drawable.ic_launcher);

tabLayout.addTab(tab);

Alors que maintenant nous pouvons tout remplacer après le commentaire ci-dessus en ajoutant un TabItem dans la mise en page.

<Android.support.design.widget.TabLayout
    Android:id="@+id/tab_layout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

    <Android.support.design.widget.TabItem
        Android:layout="@layout/tab"
        Android:text="Tab 1"
        Android:icon="@drawable/ic_launcher" />

</Android.support.design.widget.TabLayout>

Notez que les mêmes exigences pour la disposition personnalisée View s'appliquent toujours. Autrement dit, la TextView du texte doit avoir l'ID de ressource système @Android:id/text1 et la ImageView de l'icône doit avoir l'ID @Android:id/icon. Par exemple, le R.layout.tab d'en haut:

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:gravity="center_vertical">

    <ImageView Android:id="@Android:id/icon"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" />

    <TextView Android:id="@Android:id/text1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" />

</LinearLayout>
30
Mike M.

Ajout rapide à la réponse très utile de @Mikes:

Android Studio dispose désormais d'un modèle sur la manière d'utiliser une configuration TabLayout avec TabItem dans une présentation XML. Créez tous les fichiers nécessaires avec "Nouveau> Activité> Activité à onglets" et choisissez "Onglets de la barre d'action (avec ViewPager)" comme indiqué dans la capture d'écran:

 Configure Tabbed Activity Template in Android Studio

Si vous souhaitez ajuster l'apparence de la TabItem sans vue personnalisée: utilisez les actifs vectoriels white comme onglet Android:icon et tint avec un sélecteur (fournissant des couleurs différentes basées sur Android:state_selected) 

La couleur de la ligne sous l'onglet sélectionné est définie comme app:tabIndicatorColor sur la balise TabLayout.

Il m'a fallu un certain temps pour que cela fonctionne, alors toutes les étapes sont devenues une réponse si longue que je ne veux pas les copier ici. Vous pouvez trouver ma réponse plus détaillée avec le code complet à:

https://stackoverflow.com/a/49603559/414581

1
sunadorer