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

Question

我想为一个Android TabLayout添加一个水平滚动视图。

TabLayout中有多个选项卡，可以进行滚动。由于选项卡很多，一些选项卡在第一次浏览时不可见。用户必须滚动才能找到屏幕右侧的选项卡(通常是隐藏的)，因此这些选项卡没有得到用户的关注。

设计思路是使用水平滚动指示器或箭头指示器，提示用户右侧还有更多的选项卡，以便用户可以滚动查找和使用它们。

设计想法是使用一个滚动指示器而不是选项卡指示器。我从Google找到了以下图片，更接近这个想法。

提前感谢您的帮助！

- user3543477

---

水平的RecyclerView怎么样？ - Zain

@Zain 这个想法是关于拥有多个选项卡，就像 Instagram 底部选项卡一样，TabLayout 的实现会很直接。 - user3543477

这个能相关吗？ - Zain

我查看了上面的链接。我正在使用app:tabMode="scrollable"应用程序，因此TabLayout是可滚动的，但没有滚动指示器。上面的链接显示了一个tabIndicator，它指示当前选定的选项卡。 - user3543477

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

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

- AgentP

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

- Kuldeep