TabLayout標籤樣式

Question

我使用com.android.support:design庫中的新TabLayout。我想更改選定/未選中選項卡的背景。 我看源代碼，發現只有tabBackground屬性，改變所有標籤的顏色，並不控制選定的標籤顏色。

如何控制選定/未選中的選項卡背景？

Answer 1

定義：

<style name="AppTabLayout" parent="Widget.Design.TabLayout"> 
     <item name="tabMaxWidth">@dimen/tab_max_width</item> 
     <item name="tabIndicatorColor">?attr/colorAccent</item> 
     <item name="tabIndicatorHeight">4dp</item> 
     <item name="tabPaddingStart">6dp</item> 
     <item name="tabPaddingEnd">6dp</item> 
     <item name="tabBackground">?attr/selectableItemBackground</item> 
     <item name="tabTextAppearance">@style/AppTabTextAppearance</item> 
     <item name="tabSelectedTextColor">@color/range</item> 
    </style> 

    <!-- for text --> 
    <style name="AppTabTextAppearance" parent="TextAppearance.Design.Tab"> 
     <item name="android:textSize">12sp</item> 
     <item name="android:textColor">@color/orange</item> 
     <item name="textAllCaps">false</item> 
    </style> 

應用：

<android.support.design.widget.TabLayout 
    style="@style/AppTabLayout" 
    app:tabTextAppearance="@style/AppTabTextAppearance" 
    android:layout_width="match_parent" 
    .... /> 

Answer 2

我讀How to Style ActionBar, tab background on selected tab並找出該怎麼做。這實在是類似的問題，但是我發現真棒解決方案專爲TabLayout：

<android.support.design.widget.TabLayout 
    android:id="@+id/tabs" 
    android:layout_width="match_parent" 
    android:layout_height="48dp" 
    android:background="@color/tab_layout_color" 
    app:tabIndicatorHeight="48dp" 
    app:tabIndicatorColor="@color/selected_tab_color" 
    /> 

注意layout_height和tabIndicatorHeight具有相同的高度。所以你用這種方式獲得漂亮的過渡動畫。

Answer 3

我也遇到了這個問題。我只是在整個項目搜索tabIndicatorColor，發現一些R.java下面的代碼：

 @see #TabLayout_tabBackground 
     @see #TabLayout_tabContentStart 
     @see #TabLayout_tabGravity 
     @see #TabLayout_tabIndicatorColor 
     @see #TabLayout_tabIndicatorHeight 
     @see #TabLayout_tabMaxWidth 
     @see #TabLayout_tabMinWidth 
     @see #TabLayout_tabMode 
     @see #TabLayout_tabPadding 
     @see #TabLayout_tabPaddingBottom 
     @see #TabLayout_tabPaddingEnd 
     @see #TabLayout_tabPaddingStart 
     @see #TabLayout_tabPaddingTop 
     @see #TabLayout_tabSelectedTextColor 
     @see #TabLayout_tabTextAppearance 
     @see #TabLayout_tabTextColor 

所以，問題就解決了。願這對你有所幫助。
即我用IDEA

Answer 4

如果你看看TabLayout.class你會發現對標籤的實際佈局內TabView.class。它與isSelected屬性的佈局相同。選擇標籤也會對這種影響，因此所有你需要做的是創造選擇背景繪製像

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:state_selected="true" android:drawable="@color/tab_bg_selected"/> 
<item android:drawable="@color/tab_bg_unselected"/></selector> 

並將其連接到tabBackground屬性如在XML像

<android.support.design.widget.TabLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:tabBackground="@drawable/tab_bg" 
      app:tabIndicatorHeight="4dp"/>