如何实现水平滚动的标签？答案

【问题标题】：How to implement horizontally scrollable tabs?如何实现水平滚动的标签？
【发布时间】：2012-03-31 00:34:39
【问题描述】：

我正在尝试实现这个应用程序。目前我已经在上面设计了标签，因为我有超过 7 个标签，它看起来太拥挤了。如何设计它以使 tabwidget 可以水平滚动。我在市场上的少数应用程序上看到过这种设计，但不知道如何在我的应用程序中实现它。

我看到的一个应用程序有一个水平滚动视图，它可以自行滚动，当您按下特定的图像/按钮时，它会显示一些内容。我猜它似乎不是标签。

那么有人知道这个吗？

【问题讨论】：

标签： android android-tabhost tabwidget horizontalscrollview android-tabs

【解决方案1】：

TabLayout 来自 Android 设计库

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

【讨论】：

【解决方案2】：

这是一个很好的使用 HorizontalScrollView 的例子。 http://java.dzone.com/articles/scrolling-tabs-android

【讨论】：

嗨，卡尔文，感谢您的帖子。它对我有用。我为平板电脑开发了一个应用程序。但标签不占用文本的宽度>。希望你明白我的意思它看起来很拥挤我可以为它包含完整文本的选项卡定义一个宽度吗？例如：如果有一个标签显示“用户个人资料”，但它只显示为“用户”

【解决方案3】：

请查看 Jake Wharton 的 ViewPager 应用程序。这正是您所需要的。它是一个库项目，因此您必须将其包含在您的项目中。

JakeWharton / Android-ViewPagerIndicator

【讨论】：

嗨，卡尔文，感谢您的帖子。它对我有用。我为平板电脑开发了一个应用程序。但标签不占用文本的宽度>。希望你明白我的意思它看起来很拥挤我可以为它包含完整文本的选项卡定义一个宽度吗？例如：如果有一个标签显示“用户个人资料”，但它只显示为“用户”
@roses_r 只需从库的 TabPageIndicator 类中删除 onMeasure(int, int) 方法。它有效。

【解决方案4】：

<HorizontalScrollView 
    android:id="@+id/vTabs" 
    android:scrollbars="none" 
    android:layout_width="fill_parent" 
    android:layout_alignParentBottom="true"
    android:layout_height="wrap_content">
    <LinearLayout 
        android:orientation="horizontal" 
        android:background="@color/main_color_gray_dk" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content">
        <Button 
            android:enabled="false" 
            android:id="@+id/tab1" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="@string/popular" />
        <View 
            android:id="@id/view1" 
            android:layout_width="@dimen/pad_1dp" 
            android:layout_height="fill_parent" />
        <Button 
            android:id="@id/tab2" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="@string/newest" />
        <View 
            android:id="@id/view1" 
            android:layout_width="@dimen/pad_1dp" 
            android:layout_height="fill_parent"  />
        <Button 
            android:id="@id/tab3" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="@string/distance" />
        <View 
            android:id="@id/view1" 
            android:layout_width="@dimen/pad_1dp" 
            android:layout_height="fill_parent"  />
        <Button 
            android:id="@+id/tab4" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="@string/minimum"  />
    </LinearLayout>
</HorizontalScrollView>

根据您的喜好更改文本。放置在 relatveLayout 和 alignToParentBottom="true" 希望这会有所帮助

【讨论】：

【解决方案5】：

查看此链接：https://dzone.com/articles/scrolling-tabs-android

用 HorizontalScrollView 包裹你的 TabWidget，标签集将能够扩展到超出屏幕宽度并且用户可以拖动根据需要左右选项卡：

<?xml version="1.0" encoding="utf-8"?><TabHost xmlns:android="http://schemas.android.com/apk/res/android"         android:id="@android:id/tabhost"         android:layout_width="fill_parent"         android:layout_height="fill_parent">  <LinearLayout android:orientation="vertical"                android:layout_width="fill_parent"                android:layout_height="fill_parent">    <HorizontalScrollView android:layout_width="fill_parent"                          android:layout_height="wrap_content"                          android:fillViewport="true"                          android:scrollbars="none">      <TabWidget android:id="@android:id/tabs"                 android:layout_width="fill_parent"                 android:layout_height="wrap_content"/>    </HorizontalScrollView>    <FrameLayout android:id="@android:id/tabcontent"                 android:layout_width="fill_parent"                 android:layout_height="fill_parent" />  </LinearLayout></TabHost>

【讨论】：