如何为 Android TabLayout 添加水平滚动指示器答案

【问题标题】：How to add a horizontal scroll indicator for Android TabLayout如何为 Android TabLayout 添加水平滚动指示器
【发布时间】：2021-03-04 05:29:14
【问题描述】：

我希望为 Android TabLayout 添加水平滚动视图。

TabLayout 中有多个选项卡并且是可滚动的。由于上面有多个标签，其中一些乍一看是不可见的。用户必须滚动才能到达最右侧的选项卡（通常是隐藏的），因此这些选项卡不会引起用户的注意。

想法是有一个水平滚动指示器或箭头指示右侧有更多选项卡，以便用户可以滚动以查找/使用它们。

设计思路是有一个scrollIndicator，没有一个tabIndicator。我从谷歌找到了下面这张更接近这个想法的图片。

提前致谢，

【问题讨论】：

横向的RecyclerView 怎么样？
@Zain 这个想法是关于拥有多个标签，如 instagram 底部标签，tablayout 很容易实现。
可以this 关联吗？
我查看了上面的链接。我正在使用 app:tabMode="scrollable" 所以 TabLayout 是可滚动的，但没有滚动指示器。上面的链接显示了一个 tabIndicator，它指示当前选择的选项卡。

标签： android android-layout android-tablayout

【解决方案1】：

你可以通过将标签布局封装在这样的水平滚动视图中来实现你想要的

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

它看起来像这样......

【讨论】：

【解决方案2】：

您好，您可以添加 app:tabMode="scroll"

在一个例子中使用它

<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>

【讨论】：