【问题标题】:How to set 2 tab takes equal width in tablayout如何在tablayout中设置2个选项卡的宽度相等
【发布时间】:2019-07-10 15:14:55
【问题描述】:

我在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>

【问题讨论】:

  • 你可以试试android:layout_width="0dp"吗? match_parentConstraintLayout 中不受支持。
  • @EugenPechanec :回复坦克,我试过0dp,但仍然得到相同的输出。
  • @Kirmani88 回答正确,只需要添加一行 app:tabMaxWidth="0dp",如果没有,你应该显示整个布局
  • 使用 SlidingTabLayout.

标签: android android-layout android-tablayout android-styles


【解决方案1】:

只需添加以下内容。

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

【讨论】:

    【解决方案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" />
    

    参考

    Full width tablayout

    【讨论】:

      【解决方案3】:

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

      android:layout_width="0dp"
      

      来自official doc

      重要提示:不建议将 MATCH_PARENT 用于包含在 约束布局。类似的行为可以通过使用来定义 MATCH_CONSTRAINT 与对应的左/右或上/下 约束被设置为“父”。

      【讨论】:

        【解决方案4】:

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

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

        【讨论】:

          【解决方案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"/>
          

          【讨论】:

            【解决方案6】:

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

            【讨论】:

              【解决方案7】:
                  <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

              【讨论】:

                猜你喜欢
                • 2020-06-05
                • 1970-01-01
                • 1970-01-01
                • 2017-03-11
                • 2014-02-11
                • 1970-01-01
                • 1970-01-01
                • 2018-04-03
                相关资源
                最近更新 更多