在 TabLayout Android 中选择/取消选择时更改标签字体大小答案

【问题标题】：Change tab font size when selected/unselected in TabLayout Android在 TabLayout Android 中选择/取消选择时更改标签字体大小
【发布时间】：2021-06-17 20:00:01
【问题描述】：

我想在像这样选择或取消选择时更改我的标签文本大小。

我的标签布局

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/toolbar"


    android:overScrollMode="never"

    app:tabGravity="fill"
    app:tabMaxWidth="0dp"
    app:tabMode="scrollable"

    app:tabRippleColor="@null"

    app:tabTextAppearance="@style/MyCustomTabText"

    app:tabIndicatorHeight="0dp"

    />

我的自定义样式

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyCustomTabText">
    <item name="android:textSize">16sp</item>
</style>
<resources>

我对文本大小使用自定义样式，但我不知道在选择/取消选择时如何更改。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： android android-tablayout

【解决方案1】：

要根据选定/未选定状态更改选项卡字体大小，您必须使用自定义选项卡视图并使用TabLayout.OnTabSelectedListener 更改选定/未选定选项卡的大小。

1.xml中的TabLayout可以如下：

<com.google.android.material.tabs.TabLayout
  android:id="@+id/tabLayout"
  android:layout_width="match_parent"
  android:layout_height="60dp"
  app:tabGravity="fill"
  app:tabIndicatorColor="@android:color/holo_orange_light">

     <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tab 1" />

     <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tab 2" />

     <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tab 3" />

</com.google.android.material.tabs.TabLayout>

2. 使用setCustomView 方法为每个选项卡初始化一个CustomView，并使用TabLayout.OnTabSelectedListener 来监听当前选择了哪个选项卡，现在取消选择了哪个选项卡，并更改文本大小，如下所示：

//get each tab from tabLayout
TabLayout.Tab tab0 = tabLayout.getTabAt(0);
TabLayout.Tab tab1 = tabLayout.getTabAt(1);
TabLayout.Tab tab2 = tabLayout.getTabAt(2);

//and set for each one a custom View
tab0.setCustomView(createCustomTabView("Tab 0", 30, android.R.color.holo_green_light)); //initially this tab is selected
tab1.setCustomView(createCustomTabView("Tab 1", 15, android.R.color.black));
tab2.setCustomView(createCustomTabView("Tab 2", 15, android.R.color.black));

//add OnTabSelectedListener
 tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){
  @Override
  public void onTabSelected(TabLayout.Tab tab) {
     setTabTextSize(tab, 30, android.R.color.holo_green_light);
  }
  @Override
  public void onTabUnselected(TabLayout.Tab tab) {
     setTabTextSize(tab, 15, android.R.color.black);
  }
  @Override
  public void onTabReselected(TabLayout.Tab tab) {
  }
});

使用以下辅助函数来创建 Tab CustomView 并根据选中/未选中状态更改文本大小：

private View createCustomTabView(String tabText, int tabSizeSp, int textColor){

  View tabCustomView = getLayoutInflater().inflate(R.layout.tab_customview, null);
  TextView tabTextView = tabCustomView.findViewById(R.id.tabTV);
  tabTextView.setText(tabText);
  tabTextView.setTextSize(tabSizeSp);           
  tabTextView.setTextColor(ContextCompat.getColor(tabCustomView.getContext(), textColor)); 
  return tabCustomView;
}

private void setTabTextSize(TabLayout.Tab tab, int tabSizeSp, int textColor){

    View tabCustomView = tab.getCustomView();
    TextView tabTextView = tabCustomView.findViewById(R.id.tabTV);
    tabTextView.setTextSize(tabSizeSp);
    tabTextView.setTextColor(ContextCompat.getColor(tabCustomView.getContext(), textColor));
 }

3.自定义Tab布局R.layout.tab_customview可以是这样的：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools">

    <TextView
        android:id="@+id/tabTV"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:textSize="15sp"
        android:textAlignment="center"
        android:textColor="@android:color/black"
        android:maxLines="1"
        tools:text="Tab"/>

</RelativeLayout>

结果：

【讨论】：