时间戳

首页 > 解决方案 > 带有多行文本描述的 Android TabLayout

android - 带有多行文本描述的 Android TabLayout

问题描述

我需要在我的标签图标下方显示多行文本描述（实际上我需要两行但试图概括地描述它）。

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

此外，将TextView其用作选项卡布局的自定义视图只是感觉不对。

我尝试为选项卡项进行自定义布局并使用它，但由于某种原因，中间出现了断词。

是否有任何选项可以显示选项卡描述但不是单行

标签： androidandroid-tablayoutandroid-tabs

解决方案

使用自定义布局和 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>

我的 setTabs 和方法：

    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();
}

推荐阅读