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?
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>
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:
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 à: