选项卡布局文本在小尺寸的屏幕上被切除

Question

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

我面临的问题如下-

1）如使用小屏幕设备截断了文本-

小型设备-

大设备-

2）正如我所看到的，我面临的第二个问题是，“聊天”选项卡上的背景没有显示为wrap content。它较长时会通过包装“市场”标签标题来完成。我需要用短文本和长文本来包装质量。

这是我的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>

Answer 1

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

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