TabLayout 自定义视图对于不同的屏幕尺寸表现不同

Question

由于某种原因，我的选项卡布局对不同屏幕尺寸的反应方式不同。

这是它在小型设备上的外观 -

但这是在更大的设备上的样子 -

如您所见，在较大的选项卡布局中，选项卡布局不会像在较小的选项卡中那样填充中心。

至于代码 -

我有以下 TabLayout -

 <com.google.android.material.tabs.TabLayout
        android:id="@+id/activity_dashboard_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:tabUnboundedRipple="true"
        app:tabGravity="fill"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/activity_dashboard_toolbar"
        app:tabIndicator="@null"
        app:tabMode="auto" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/activity_dashboard_viewpager"
        android:layout_width="match_parent"
        android:layout_height="600dp"
        app:layout_constraintTop_toBottomOf="@+id/activity_dashboard_tablayout" />

使用以下自定义视图 -

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="@font/roboto_medium"
    android:maxLines="1"
    android:paddingStart="10dp"
    android:paddingTop="5dp"
    android:paddingEnd="10dp"
    android:paddingBottom="5dp"
    android:textSize="18sp"
    tools:text="Chats">

</TextView>

这是我的实现 -

private fun initTabLayoutAndViewPager() {
        setSupportActionBar(toolbar)
        supportActionBar?.title = null
        toolbar.overflowIcon = ContextCompat.getDrawable(this,R.drawable.application_toolbar_overflow_resized_size)
        viewpager.adapter = DashboardViewPagerAdapter(this)
        TabLayoutMediator(tabLayout, viewpager, TabLayoutMediator.TabConfigurationStrategy { _, _ -> }).attach()

        val chatsView = View.inflate(this, R.layout.dashboard_activity_custom_tab, null)
        val callsView = View.inflate(this, R.layout.dashboard_activity_custom_tab, null)
        val walletView = View.inflate(this, R.layout.dashboard_activity_custom_tab, null)
        val marketView = View.inflate(this, R.layout.dashboard_activity_custom_tab, null)

        (chatsView as TextView).text = pageTitles[0]
        (callsView as TextView).text = pageTitles[1]
        (walletView as TextView).text = pageTitles[2]
        (marketView as TextView).text = pageTitles[3]

        chatTextView = chatsView
        callsTextView = callsView
        walletTextView = walletView
        marketTextView = marketView


        tabLayout.getTabAt(0)?.customView = chatTextView
        tabLayout.getTabAt(1)?.customView = callsTextView
        tabLayout.getTabAt(2)?.customView = walletTextView
        tabLayout.getTabAt(3)?.customView = marketTextView

        viewpager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {

            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
                when(position) {

                    DashboardTabs.CHATS.type -> {
                        ViewPagerUtils.setSelectedTab(chatTextView, callsView, walletView, marketView)
                    }
                    DashboardTabs.CALLS.type -> {
                        ViewPagerUtils.setSelectedTab(callsView, chatTextView, walletView, marketView)
                    }
                    DashboardTabs.WALLET.type -> {
                        ViewPagerUtils.setSelectedTab(walletView, callsView, chatTextView, marketView)
                    }
                    DashboardTabs.MARKET.type -> {
                        ViewPagerUtils.setSelectedTab(marketView, callsView, walletView, chatTextView)
                    }

                }
            }
        })
    }

我不明白我错过了什么。

无论设备有多大或多小，我都希望我的标签布局填充宽度的中心。

Answer 1

你必须使用 TabLayoutMediator 来设置标签上的自定义标题。

 TabLayoutMediator(your_tab, your_viewPager2) { tab, position ->
     val tabView = LayoutInflater.from(this.context).inflate(R.layout.custom_view, tab_layout, false)
            when (position) {
                0 -> {
                    // you can set your tab text and color here for tab1
                }
                1 -> {
                    // you can set your tab text and color here for tab2
                }
                2 -> {
                    // you can set your tab text and color here for tab3
                }   
            }
}

这样您就可以使用 TabLayoutMediator 设计您的标签标题..