Comment ajouter un indicateur de défilement horizontal pour Android TabLayout

Nov 21 2020

Je cherche à ajouter une vue de défilement horizontal pour un TabLayout Android .

Le TabLayout a plusieurs onglets et peut faire défiler. En raison de plusieurs onglets, certains d'entre eux ne sont pas visibles au premier coup d'œil. Les utilisateurs doivent faire défiler pour accéder aux onglets à l'extrême droite (qui sont généralement masqués) et ainsi ces onglets n'attirent pas l'attention de l'utilisateur.

L'idée est d'avoir un indicateur de défilement horizontal ou une flèche indiquant qu'il y a plus d'onglets à droite afin que les utilisateurs puissent faire défiler pour les trouver / les utiliser.

L'idée de conception est d'avoir un scrollIndicator et non un tabIndicator. J'ai trouvé l'image suivante de Google qui est plus proche de l'idée.

Merci d'avance,

Réponses

6 AgentP Nov 26 2020 at 20:06

Vous pouvez réaliser ce que vous voulez en encapsulant la mise en page de l'onglet dans une vue de défilement horizontal comme celle-ci

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="8dp"
        android:scrollbars="horizontal">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            app:tabGravity="center"
            app:tabIndicator="@color/white"
            app:tabMode="fixed">

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 1"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 2"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 3"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 4"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 5"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 6"/>


            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 7"/>



            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 8"/>



            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 9"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 10"/>
        </com.google.android.material.tabs.TabLayout>

    </HorizontalScrollView>

</LinearLayout>

Il ressemblera à ceci ......

Kuldeep Dec 03 2020 at 06:25

Salut, vous pouvez ajouter une application: tabMode = "scroll"

dans un exemple, utilisez-le comme

<android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scroll"
            app:tabGravity="fill"/>
    </android.support.design.widget.AppBarLayout>