如何让 TabLayout 占据整个屏幕的宽度？答案

【问题标题】：How to make TabLayout take up full width of the screen?如何让 TabLayout 占据整个屏幕的宽度？
【发布时间】：2017-01-24 13:45:16
【问题描述】：

我在TabLayout 上的标签占据了屏幕的中心，即使按照Adam John's answer 添加tabMaxWidth = "0dp" 后也没有填满整个宽度

那是我希望通过标签扩展到填充屏幕，如下所示：

但我得到的是：

我的 XML 如下所示：

<android.support.design.widget.TabLayout
            android:id="@+id/tl_contact_type"
            style="@style/tabWidgetLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed"/>

tabWidgetLayout 的 style.xml

<style name="tabWidgetLayout" parent="Widget.Design.TabLayout">
            <item name="tabIndicatorColor">@color/colorTealAccent</item>
            <item name="tabIndicatorHeight">@dimen/default_corner_radius_medium</item>
            <item name="tabBackground">?attr/selectableItemBackground</item>
            <item name="android:background">@color/colorBrandPrimaryDark</item>
            <item name="tabSelectedTextColor">@color/color_tab_selected_text</item>
            <item name="tabTextAppearance">@style/tabWidgetLayoutTextAppearance</item>
        </style>

非常感谢任何解决此问题的帮助。

【问题讨论】：

从截图看来你是在平板电脑上运行它。在普通的安卓手机上试一试
@VivekMishra 感谢您的建议。但是，这些是库存图片，我添加它们只是为了强调我的布局是如何呈现的。我一直在尝试使用普通的 android 手机 (HTC)，标签并没有占据整个宽度。
删除maxWidth 仍然保持不变？
你能在问题中发布tabWidgetLayout你的style吗？？
@Vucko 是的。还是一样。

标签： android android-layout android-styles android-tablayout

【解决方案1】：

更改 android:layout_width="match_parent" 或在此属性上设置自定义大小

<android.support.v4.view.ViewPager
        android:id="@+id/viewTab"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_editor_absoluteX="8dp"
        app:layout_editor_absoluteY="8dp">

    </android.support.v4.view.ViewPager>

【讨论】：

【解决方案2】：

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

告诉我这是否解决了你的问题。

很乐意提供帮助。

【讨论】：

感谢您的建议！但这并没有解决问题。这是我最初的布局。根据我附加到问题的链接，我添加了tabMaxWidth 参数。

【解决方案3】：

我认为问题在于您没有扩展 android:Widget 尝试将此添加到您的styles.xml：

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabBackground">@drawable/tab_background</item>
    <item name="tabIndicatorColor">@color/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
</style>

然后在你的布局中：

<android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                style="@style/Base.Widget.Design.TabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabGravity="fill"
                app:tabMode="fixed" />

编辑：这是我很久以前在另一个问题中发现的（我不记得了），它对我有用

【讨论】：

【解决方案4】：

<android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"
            app:tabSelectedTextColor="@color/ColorPrimary"
            app:tabIndicatorColor="@color/ColorPrimary"
            app:tabTextColor="#000"
            app:tabBackground="@color/cardview_light_background"/>

用这个替换你的代码。

【讨论】：

【解决方案5】：

试试下面的sn-p

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed" />

【讨论】：

【解决方案6】：

值得关注@style/tabWidgetLayout 及其父布局的内边距和边距值。

【讨论】：

我重新访问了使用选项卡布局的应用程序。看起来这是选项卡的默认行为。在我的手机上，标签占据纵向的整个宽度，但不占据横向。你试过在 sw600 上运行吗？