Android TabLayout多行文字说明

问题描述

我需要在标签图标下方显示多行文字说明（实际上，我需要两行，但通常尝试对其进行描述）。

使用一个单词的描述会损害可读性，并且我不想使用可滚动的选项卡布局，因为我只需要显示4个选项即可。

此外，将textView用作选项卡布局的自定义视图只是一种感觉。

我试图为选项卡项目做一个自定义布局并使用它，但是由于某种原因，中间出现断行。

是否可以显示选项卡描述，但不能单行显示？

谢谢。

解决方法

通过自定义布局和OnTabSelectedListener解决。

我的自定义布局（tab_item.xml）：

<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<ImageView
    android:id="@+id/tab_item_icon"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_marginTop="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/some_icon_drawable" />

<TextView
    android:id="@+id/tab_item_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:autoText="false"
    android:breakStrategy="simple"
    android:singleLine="false"
    android:text="Two Lines Text View"
    android:textAlignment="center"
    android:textAllCaps="true"
    android:textSize="10sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tab_item_icon" /></androidx.constraintlayout.widget.ConstraintLayout>

我的setTab和方法：

    private void setTabs(){
    TabLayout tabLayout = view.findViewById(R.id.tabLayout);

    icons.add(R.drawable.some_drawable_1);
    icons.add(R.drawable.some_drawable_2);
    icons.add(R.drawable.some_drawable_3);
    icons.add(R.drawable.some_drawable_4);

    tabsNames.add(getString(R.string.some_tab_name_1));
    tabsNames.add(getString(R.string.some_tab_name_2));
    tabsNames.add(getString(R.string.some_tab_name_3));
    tabsNames.add(getString(R.string.some_tab_name_4));

    new TabLayoutMediator(tabLayout,viewPager,(tab,position) -> tab.setCustomView(R.layout.tab_item)
    ).attach();

    for(int currTab = 0; currTab < tabsNames.size() ; currTab++){
        tabTextView = (tabLayout.getTabAt(currTab).getCustomView().findViewById(R.id.tab_item_text));
        tabImageView = (tabLayout.getTabAt(currTab).getCustomView().findViewById(R.id.tab_item_icon));
        tabTextView.setText(tabsNames.get(currTab));
        tabImageView.setImageDrawable(getResources().getDrawable(icons.get(currTab),null));
    }

    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            tabTextView = (tabLayout.getTabAt(tab.getPosition()).getCustomView().findViewById(R.id.tab_item_text));
            tabImageView = (tabLayout.getTabAt(tab.getPosition()).getCustomView().findViewById(R.id.tab_item_icon));
            tabTextView.setTextColor(getResources().getColor(R.color.colorPrimary));
            tabImageView.setColorFilter(getResources().getColor(R.color.colorPrimary));
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            tabTextView = (tabLayout.getTabAt(tab.getPosition()).getCustomView().findViewById(R.id.tab_item_text));
            tabImageView = (tabLayout.getTabAt(tab.getPosition()).getCustomView().findViewById(R.id.tab_item_icon));
            tabTextView.setTextColor(getResources().getColor(R.color.colorPrimaryDark));
            tabImageView.setColorFilter(getResources().getColor(R.color.colorPrimaryDark));
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
            tabTextView = (tabLayout.getTabAt(tab.getPosition()).getCustomView().findViewById(R.id.tab_item_text));
            tabImageView = (tabLayout.getTabAt(tab.getPosition()).getCustomView().findViewById(R.id.tab_item_icon));
            tabTextView.setTextColor(getResources().getColor(R.color.colorPrimary));
            tabImageView.setColorFilter(getResources().getColor(R.color.colorPrimary));
        }
    });

    tabLayout.getTabAt(0).select();
}