Android Ajouter un TabLayout


Exemple

TabLayout fournit une disposition horizontale pour afficher les onglets, et est couramment utilisée en conjonction avec un ViewPager .

Assurez-vous que la dépendance suivante est ajoutée au fichier build.gradle votre application sous les dépendances:

compile 'com.android.support:design:25.3.1'

Vous pouvez maintenant ajouter des éléments à un TabLayout dans votre mise en page à l'aide de la classe TabItem .

Par exemple:

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

    <android.support.design.widget.TabItem
        android:text="@string/tab_text_1"
        android:icon="@drawable/ic_tab_1"/>

    <android.support.design.widget.TabItem
        android:text="@string/tab_text_2"
        android:icon="@drawable/ic_tab_2"/>

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

Ajoutez un OnTabSelectedListener à notifier lorsqu'un onglet de l'onglet TabLayout est sélectionné / non sélectionné / resélectionné:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        int position = tab.getPosition();
        // Switch to view for this tab
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});

Des onglets peuvent également être ajoutés / supprimés de TabLayout programmation.

TabLayout.Tab tab = tabLayout.newTab();
tab.setText(R.string.tab_text_1);
tab.setIcon(R.drawable.ic_tab_1);
tabLayout.addTab(tab);

tabLayout.removeTab(tab);
tabLayout.removeTabAt(0);
tabLayout.removeAllTabs();

TabLayout a deux modes, fixe et défilable.

tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

Celles-ci peuvent également être appliquées en XML:

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed|scrollable" />

Remarque: les modes TabLayout sont mutuellement exclusifs, ce qui signifie qu'un seul peut être actif à la fois.

La couleur de l'indicateur d'onglet correspond à la couleur d'accent définie pour votre thème Conception de matériaux.
Vous pouvez remplacer cette couleur en définissant un style personnalisé dans styles.xml , puis en appliquant le style à votre onglet TabLayout:

<style name="MyCustomTabLayoutStyle" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@color/your_color</item>
</style>

Vous pouvez ensuite appliquer le style à la vue en utilisant:

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        style="@style/MyCustomTabLayoutStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>