在 Tablayout 视图中更改字体

Question

我想更改选项卡上的字体系列，具体取决于选择的选项卡。我想为选定的选项卡设置粗体，为未选定的选项卡设置浅色字体我的包里有这个字体 /font

Answer 1

您只能通过编程方式更改 selected/unselected 选项卡的字体系列。您可以使用 TabLayout.OnTabSelectedListener 和 onTabSelected(TabLayout.Tab tab) 回调来收听选择和取消选择哪个选项卡，您可以更改所选标签的字体和在 onTabUnselected（TabLayout.Tab 标签） 回调中，您可以更改未选中标签（上一个所选标签）的字体。

这可以通过如下代码实现：

tabLayout = findViewById(R.id.tabLayout);

//initial selected Tab
TabLayout.Tab selectedTab = tabLayout.getTabAt(0);
setTabTypeface(selectedTab, ResourcesCompat.getFont(this, R.font.roboto_mono));

//add OnTabSelectedListener
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){
   @Override
   public void onTabSelected(TabLayout.Tab tab) {
      setTabTypeface(tab, ResourcesCompat.getFont(tab.view.getContext(), R.font.roboto_mono));
   }

   @Override
   public void onTabUnselected(TabLayout.Tab tab) {
      setTabTypeface(tab, ResourcesCompat.getFont(tab.view.getContext(), R.font.extra_light_italic));
  }

  @Override
  public void onTabReselected(TabLayout.Tab tab) {
  }
});

使用辅助函数 setTabTypeface(TabLayout.Tab tab, Typeface typeface) 来更改 Tab 的字体，如下所示：

private void setTabTypeface(TabLayout.Tab tab, Typeface typeface){

        for(int i=0; i<tab.view.getChildCount(); i++)
        {
            View tabViewChild = tab.view.getChildAt(i);
            if (tabViewChild instanceof TextView)
                ((TextView) tabViewChild).setTypeface(typeface);
        }
    }

当然，您必须为所有选项卡设置 initial/default 状态（未选择的字体系列），这可以在 xml 中使用 app:tabTextAppearance TabLayout 的属性，如下例所示：

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:tabTextAppearance="@style/MyCustomTextAppearance"
        app:tabGravity="fill"
        app:tabIndicatorColor="@android:color/holo_orange_light"
        app:tabSelectedTextColor="@android:color/holo_red_dark"
        app:tabTextColor="@android:color/holo_blue_dark" >

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

其中 @style/MyCustomTextAppearance 是您自定义的所有标签的初始 TextAppearance 样式，如下所示：

<style name="MyCustomTextAppearance" parent="@android:style/TextAppearance.Widget.TabWidget">
    <item name="android:textSize">16sp</item>
    <item name="android:textAllCaps">true</item>
    <item name="fontFamily">@font/extra_light_italic</item>
    <item name="android:fontFamily">@font/extra_light_italic</item>
</style>

要同时更改 selected/unselected 选项卡的文本颜色，您可以使用 xml 属性 app:tabSelectedTextColor 和 app： TabLayout 的 tabTextColor。

以上示例的结果如下所示。我为选定的选项卡设置了 Roboto Mono 字体，为从 Font 文件夹中检索到的未选定的选项卡设置了 Extra Light Italic 字体。

在 Tablayout 视图中更改字体

Change font in Tablayout view

fonts

android

view