如何在使用tabLayout時更改選定選項卡的文本樣式？

Question

我想讓所選標籤的文字爲粗體。我可以通過xml或java代碼來做到這一點，無論哪種方式更簡單。

Answer 1

有加大膽編程使用Tab鍵CustomView，加載一個TextView成CustomView和TextView的應用樣式的方式：

private TabLayout mTabLayout; 
protected void onCreate(Bundle savedInstanceState) { 
    ... 
    mTabLayout = (TabLayout) findViewById(R.id.tablayout); 
    mTabLayout.setOnTabSelectedListener(new OnTabSelectedListener()); 
    int tabCount = mTabLayout.getTabCount(); 
    for (int i = 0; i < tabCount; i++) { 
     TabLayout.Tab tab = mTabLayout.getTabAt(i); 
     if (tab != null) { 
      TextView tabTextView = 
       (TextView) LayoutInflater.from(this).inflate(R.layout.tab_item, mTabLayout, false); 
      tabTextView.setText(tab.getText()); 
      // First tab is the selected tab, so if i==0 then set Tabs_Selected style 
      tabTextView.setTextAppearance(getAppContext(), i == 0 ? R.style.TextAppearance_Tabs_Selected 
               : R.style.TextAppearance_Tabs); 
      tab.setCustomView(tabTextView); 
     } 
    } 
} 
class OnTabSelectedListener implements TabLayout.OnTabSelectedListener { 

    public void onTabSelected(TabLayout.Tab selectedTab) { 
     int tabCount = mTabLayout.getTabCount(); 
     for (int i = 0; i < tabCount; i++) { 
      TabLayout.Tab tab = mTabLayout.getTabAt(i); 
      View tabView = tab != null ? tab.getCustomView() : null; 
      if (tabView instanceof TextView) { 
       ((TextView) tabView).setTextAppearance(getAppContext(), selectedTab.equals(tab) 
                  ? R.style.TextAppearance_Tabs_Selected 
                  : R.style.TextAppearance_Tabs); 
      } 
     } 
    } 

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

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

這裏是在styles.xml中的條目：

<style name="TextAppearance.Tabs" parent="TextAppearance.Design.Tab"> 
    <item name="android:textSize">12sp</item> 
    <item name="android:textColor">@android:color/white</item> 
</style> 

<style name="TextAppearance.Tabs.Selected"> 
    <item name="android:textStyle">bold</item> 
</style> 

這裏是佈局tab_item：

<?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:id="@+id/tab_textview" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    tools:text="Tab 1" /> 

Answer 2

我改變了答案建議上面有點，它對我很好，沒有額外的.xml文件需要，希望它會有所幫助。

for (int i = 0; i < tabLayout.getTabCount(); i++) { 

    TabLayout.Tab tab = tabLayout.getTabAt(i); 
    if (tab != null) { 

     TextView tabTextView = new TextView(this); 
     tab.setCustomView(tabTextView); 

     tabTextView.getLayoutParams().width = ViewGroup.LayoutParams.WRAP_CONTENT; 
     tabTextView.getLayoutParams().height = ViewGroup.LayoutParams.WRAP_CONTENT; 

     tabTextView.setText(tab.getText()); 

     // First tab is the selected tab, so if i==0 then set BOLD typeface 
     if (i == 0) { 
      tabTextView.setTypeface(null, Typeface.BOLD); 
     } 

    } 

} 

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 

    @Override 
    public void onTabSelected(TabLayout.Tab tab) { 
     viewPager.setCurrentItem(tab.getPosition()); 

     TextView text = (TextView) tab.getCustomView(); 

     text.setTypeface(null, Typeface.BOLD); 
    } 

    @Override 
    public void onTabUnselected(TabLayout.Tab tab) { 
     TextView text = (TextView) tab.getCustomView(); 

     text.setTypeface(null, Typeface.NORMAL); 
    } 

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

    } 

}); 

Answer 3

如果使用默認TabLayout（不customView），您可以通過使用getChildAt（）方法獲取標籤的TextView的。

.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
     @Override 
     public void onTabSelected(TabLayout.Tab tab) { 
      LinearLayout tabLayout = (LinearLayout)((ViewGroup) mMainTabs.getChildAt(0)).getChildAt(tab.getPosition()); 
      TextView tabTextView = (TextView) tabLayout.getChildAt(1); 
      tabTextView.setTypeface(tabTextView.getTypeface(), Typeface.BOLD); 
     } 

     @Override 
     public void onTabUnselected(TabLayout.Tab tab) { 
      LinearLayout tabLayout = (LinearLayout)((ViewGroup) mMainTabs.getChildAt(0)).getChildAt(tab.getPosition()); 
      TextView tabTextView = (TextView) tabLayout.getChildAt(1); 
      tabTextView.setTypeface(tabTextView.getTypeface(), Typeface.NORMAL); 
     } 

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