选项卡布局文本在小屏幕尺寸中被截断

Question

我正在使用带有自定义视图的选项卡布局。

我面临的问题如下 -

1) 正如您在此处看到的那样，文本被小屏幕设备截断了 -

小型设备 -

大设备 -

2) 我面临的第二个问题是如您所见，"Chats" 选项卡上的背景没有 wrap content。它通过包装 "Market" 标签标题来实现，因为它更长。我需要它用短文本和长文本来包装质量。

这是我的 xml -

  <androidx.appcompat.widget.Toolbar
        android:id="@+id/activity_dashboard_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="none"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:titleTextColor="@color/transparent">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:src="@drawable/user_default_image"
            app:civ_border_color="@color/black"
            app:civ_border_width="1dp" />

    </androidx.appcompat.widget.Toolbar>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/activity_dashboard_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/activity_dashboard_toolbar"
        app:tabIndicator="@null" />

    <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" />

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

        val chatsView = View.inflate(this, R.layout.dashboard_activity_cusom_tab, null)
        val callsView = View.inflate(this, R.layout.dashboard_activity_cusom_tab, null)
        val walletView = View.inflate(this, R.layout.dashboard_activity_cusom_tab, null)
        val marketView = View.inflate(this, R.layout.dashboard_activity_cusom_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)
                    }

                }
            }
        })
    }

<?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:paddingStart="5dp"
    android:paddingEnd="5dp"
    android:textStyle="bold"
    android:textSize="18sp"
    android:maxLines="1"
    tools:text="Chats">

</TextView>

编辑 -

使用此处提供的答案解决问题后，我遇到了重力问题 -

如何让所有标签都居中？尝试了 gravity 和 layout_gravity 并且 none 帮助了我。

Answer 1

使选项卡布局模式可滚动app:tabMode="scrollable"或app:tabMode="auto"，如下所示

 <com.google.android.material.tabs.TabLayout
        android:id="@+id/activity_dashboard_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        app:layout_constraintTop_toBottomOf="@+id/activity_dashboard_toolbar"
        app:tabIndicator="@null" />

选项卡布局文本在小屏幕尺寸中被截断

tab layout text is being cut off in small screen sizes

android

android-viewpager

android-tablayout