如何在TabLayout中设置两个选项卡宽度相等

Question

我在TabLayout中添加了2个选项卡，以下是我的代码。

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    style="@style/AppTabLayout"
    android:layout_width="match_parent"
    android:layout_height="30dp"
    android:layout_gravity="center"
    app:tabBackground="@drawable/tab_selector_statistics"
    android:background="@drawable/tab_statistics"
    app:tabContentStart="24dp"
    app:tabGravity="fill"
    app:tabMode="fixed"
    app:tabSelectedTextColor="@color/white"
    app:tabTextColor="@color/black"
    app:layout_constraintBottom_toBottomOf="@+id/view5"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/view5"
    android:layout_alignParentTop="true"
    android:layout_alignParentBottom="true" />

我得到了以下输出。

但是我想要选项卡占据整个屏幕的宽度，如下所示。

以下是我在styles.xml文件中定义的AppTabLayout样式。

<style name="AppTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@null</item>
    <item name="tabIndicatorHeight">1dp</item>
    <item name="tabPaddingStart">16dp</item>
    <item name="tabPaddingEnd">16dp</item>
    <item name="tabSelectedTextColor">@color/white</item>
</style>

- dev90

---

你可以尝试使用android:layout_width="0dp"吗？在ConstraintLayout中不支持match_parent。 - Eugen Pechanec

@EugenPechanec：感谢回复，我尝试了0dp，但仍然得到相同的输出。 - dev90

@Kirmani88的回答是正确的，只需要添加一行代码app:tabMaxWidth="0dp"，否则应该显示整个布局。 - user10539074

你尝试过这个吗：https://dev59.com/ulcP5IYBdhLWcg3w3tqq#44983608 - Paraskevas Ntsounos

使用SlidingTabLayout。 - Stanojkovic

Answer 1

只需添加以下内容。

            android:layout_width="match_parent"
            android:layout_height="30dp"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed"

- Rezaul Karim

Answer 2

使用样式

<style name="MyTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabGravity">fill</item>
    <item name="tabMaxWidth">0dp</item>
</style>

或者

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

参考资料

全宽度选项卡布局

- Jitesh Prajapati

Answer 3

match_parent在ConstraintLayout中不被支持。将宽度设置为0dp以使其与约束匹配。

android:layout_width="0dp"

来自官方文档：

重要提示：不建议在 ConstraintLayout 中使用 MATCH_PARENT 作为小部件的属性。可以通过将相应的左/右或上/下约束设置为“parent”，并使用 MATCH_CONSTRAINT 定义类似的行为。

- Sharath kumar

Answer 4

你应该在表格布局中使用 stretchColumns 属性

<TableLayout
        android:stretchColumns="*">
        <TableRow
            android:layout_width="0dp">
    <TableRow
            android:layout_width="0dp">
</TableLayout>

- Nikhil Vadoliya

Answer 5

只需按照以下步骤操作。这对我很有效。

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

- Vasudev Vyas

Answer 6

您可能还想在TabLayout中使用app:tabIndicatorFullWidth="true"

- Chris River

Answer 7

在我的情况下，我只用这一行代码就成功地获得了接受的输出：app:tabMode="fixed"。

我的TabLayout的完整代码：

<com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            android:paddingBottom="2dp"
            app:tabMode="fixed"
            app:tabTextColor="?titleTextColor"
            android:background="?android:statusBarColor" />

我的代码输出：

- AR Sharif Uddin JUMMAN

Answer 8

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="0dp"
        android:layout_height="34.5dp"
        android:elevation="@dimen/dimen_10"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/overTimeCV"
        app:tabMode="fixed"/>

使用TabLayout和ViewPager进行检查。

- Abraham Mathew