android - 我们如何为固定可见数量的可滚动选项卡配置 TabLayout？

Question

在一个项目中，我们将 Material Design 组件的 TabLayout 与 ViewPager 结合使用。有 14 个选项卡，我们希望其中 7 个选项卡在 TabLayout 中一次可见。选项卡内容足够窄，我们确信 7 个选项卡不会太多，而且设计团队希望无论屏幕宽度如何，显示的选项卡数量都一致(选项卡代表一周中的几天)。

似乎没有一个预定义的选项卡模式与此匹配:

• MODE_FIXED 和 MODE_AUTO 控制可见选项卡的数量...通过显示所有选项卡
• MODE_SCROLLABLE 允许选项卡滚动...但我们无法控制可见选项卡的数量

是否有一种方法可以实现此目的，并且不涉及不可维护的黑客行为，例如使用反射在运行时修补 tabPaddingStart，或者迭代选项卡小部件并调整其 LayoutParams ？

我见过this question ，但缺乏解释 - 特别是，不清楚如何使用 app:tabMaxWidth 来获取运行时的动态值。另外，这个问题与旧的设计支持库有关，它可能与 MDC 的实现有所不同。

Answer 1

有几种方法可以显示固定数量的选项卡，而不管屏幕宽度如何，但所需的功能实际上已被锁定。最值得注意的是，如果 TabLayout 中的 getTabMinWidth() 不是私有(private)的，一个简单的解决方案是在自定义 TabLayout View 中重写该方法。

以下内容是按照 Eugen Pechanec 在上面的评论中建议的方式(也许正是)，其中涉及选项卡的自定义 View 。

首先是基本布局。

activity_main.xml

tabMinWidth、tabPaddingEnd 和 tabPaddingStart 均设置为 0dp。 tabMinWidth 的默认值对于我们的需求来说可能太大了。填充可以设置为非零，但我宁愿在选项卡的自定义 View 中处理它。

ViewPager 没有真正发生任何事情。

<androidx.appcompat.widget.LinearLayoutCompat 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:tabMinWidth="0dp"
            app:tabMode="scrollable"
            app:tabPaddingEnd="0dp"
            app:tabPaddingStart="0dp" />
    </androidx.viewpager.widget.ViewPager>
</androidx.appcompat.widget.LinearLayoutCompat>

custom_tab.xml

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Tab x"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2" />

<!--    If an icon is needed. -->
<!--    <ImageView-->
<!--        android:id="@android:id/icon"-->
<!--        android:layout_width="48dp"-->
<!--        android:layout_height="48dp"-->
<!--        android:scaleType="centerCrop"-->
<!--        android:src="@drawable/ic_launcher_foreground" />-->
</LinearLayout>

MainActivity.kt

选项卡被加载到 TabLayout 中，一一设置自定义 View 。自定义 View 的最小宽度设置为 TabLayout 宽度的 1/7。设置最小宽度就足够了，因为假定所需的宽度始终小于或等于总宽度的 1/7。

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val tabLayout = findViewById<TabLayout>(R.id.tabs)
        tabLayout.doOnLayout {
            val tabWidth = tabLayout.width / 7
            for (i in 1..14) {
                tabLayout.newTab().run {
                    setCustomView(R.layout.custom_tab)
                    customView?.minimumWidth = tabWidth
                    setText("Tab $i")
                    tabLayout.addTab(this)
                }
            }
        }

    }
}

如果无论如何使用自定义选项卡，我认为这是一个合理的解决方案。但是，它比迭代 TabLayout 子项并设置宽度好不了多少(IMO)。

最后放几张图: