如何在 Android Tab 布局中提供溢出分页？

Question

根据 Material Design 指南，在 android.support.design.widget.TabLayout 中，当有许多选项卡无法适应屏幕尺寸时，我们可以使用溢出分页功能，提供一个右箭头，点击后将通过水平滚动显示所有剩余的选项卡。如何实现？

[这是指南中给出的相同图像]

- Siddarth G

Answer 1

该模式位于“桌面选项卡”部分，因此不受TabLayout支持，TabLayout专门针对“移动选项卡”部分。

- ianhanniballake

---

如果您希望看到添加此功能，请随时在b.android.com提交功能请求！ - ianhanniballake

嗨，谢谢你的答复，我不知道TabLayout不支持这个。我也想知道在移动手机上有大约8个选项卡的设计实践是否不好，因为一次只能显示4个选项卡宽度。 - Siddarth G

滚动选项卡（例如您需要8个选项卡）通常最适合将内容按照一些兄弟姐妹的方式进行分类（例如音乐类型等）。我不会使用8个选项卡来浏览您的应用程序 - 这在导航抽屉中更为合适，因为它可以更好地扩展到更多项目。 - ianhanniballake

我认为当出现溢出时，箭头支持是必要的。这将帮助用户知道还有更多内容可以查看。 - Sayem

Answer 2

你需要在XML文件中将tabMode设置为scrollable

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

- Terrel Lewis

Answer 3

无法添加分页箭头，但可以在选项卡视图中添加滚动：

将您的选项卡视图包围在HorizontalScrollView和LinearLayout中：

<HorizontalScrollView
                    android:id="@+id/scrollView1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fillViewport="true"
                    android:layout_weight="1"
                    android:fadingEdgeLength="20dp"
                    android:scrollbars="none" >
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">
                    <android.support.design.widget.TabLayout
                        android:id="@+id/tabLayout"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:minHeight="?actionBarSize"
                        app:tabGravity="fill"
                        app:tabIndicatorColor="@color/white"
                        app:tabIndicatorHeight="4dp"
                        app:tabBackground="@color/colorPrimary"
                        app:tabMode="scrollable"
                        android:overScrollMode="never"
                        android:visibility="visible">
                    </android.support.design.widget.TabLayout>
                    </LinearLayout>
                </HorizontalScrollView>

- WhiteWolfza