TabLayout：タブごとにカスタムカラーを設定する

Question

選択した（アクティブな）タブと選択されていない（非アクティブな）タブの色を別々に設定する方法について多くの質問がありました。私はまた、これを達成するためにGoogleがvoid setTabTextColors (int normalColor, int selectedColor)を提供していることを知っています。

私の要件は少し異なりますが、TabLayoutとCardViewのクイズアプリで作業しています。 TabLayoutを使用すると、ユーザーは質問間を移動でき、CardViewは質問を表示するために使用されます。

ユーザーが既に回答を選択しているタブの色を、ユーザーがまだ回答していない色とは異なるように設定する必要があります。デフォルトではTextColorは黒ですが、ユーザーが回答を選択した場合、タブカラーは青色に変わります（例：）。ユーザーが終了するまでそのままにしてください。私はSelectというint配列を持っています。この配列は、ユーザーが選択したオプションの値を保持します（値の範囲は1〜4）。配列Selectを割り当てている間は、-1で初期化します。私はループを設定し、配列が-1のままの場合は、タブをそのままにするか、またはタブカラーを青に設定します。

どうすればこの機能を実現できますか？

Answer 1

この子を照会してTextViewsを手動で変更することで、TabLayout内部で作業することができます。あなたが別のサポートライブラリのバージョンにアップグレードするとき、これはあなたのコードを破ることができますが、限り、あなたはトラックと更新テストを保つよう、それが動作するはずです：

private void updateTabTextColors() { 
    LinearLayout tabsContainer = (LinearLayout) mTabLayout.getChildAt(0); 
    for (int i = 0; i < mTabLayout.getTabCount(); i++) { 
     LinearLayout item = (LinearLayout) tabsContainer.getChildAt(i); 
     TextView tv = (TextView) item.getChildAt(1); 
     tv.setTextColor(Select[i] == -1 ? Color.BLACK : Color.BLUE); 
    } 
} 

Answer 2

この機能にライブラリを使用することに興味がある場合は、このライブラリがうまく機能します。

https://github.com/astuetz/PagerSlidingTabStrip

Answer 3

docgetTabTextColors() -> Gets the text colors for the different states (normal, selected) used for the tabs.のようにタブのみ2つの状態を有することができます。 Tabクラスを継承し、新しい状態を追加する場合は、tabAlreadyVisitedのようなものを実現する唯一の方法です。次に、 tabAlreadyVisited属性値に基づいて背景色を変更する描画方法。 setTabTextColors

Answer 4

をジャスト各タブにカスタム背景をサポートするために@Marcelo Liberatoの答えを強化します項目。

LinearLayout tabsContainer = (LinearLayout) mTabLayout.getChildAt(0); 
    LinearLayout childLayout1 = (LinearLayout)tabsContainer.getChildAt(2); 
    LinearLayout childLayout2 = (LinearLayout)tabsContainer.getChildAt(3); 

    LinearLayout tabView = (LinearLayout) childLayout1.getChildAt(0).getParent(); 
    tabView.setBackgroundResource(R.drawable.ic_blue_selector); 

    tabView = (LinearLayout) childLayout2.getChildAt(0).getParent(); 
    tabView.setBackgroundResource(R.drawable.ic_red_selector); 

カスタムXMLファイル：

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout 
    android:id="@+id/ll_tab_icon_title_holder" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

    <ImageView 
     android:id="@+id/tab_icon" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_horizontal" 
     android:scaleType="fitCenter" /> 

    <TextView 
     android:id="@+id/tab_title" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_horizontal" 
     android:textAppearance="@style/lasuCustomTabText" /> 
</LinearLayout> 

<TextView 
    android:id="@+id/tab_only_title" 
    android:layout_width="match_parent" 
    android:layout_height="56dp" 
    android:textAllCaps="true" 
    android:textSize="12sp" 
    android:layout_gravity="center" 
    android:gravity="center" 
    android:textColor="@drawable/ic_tab_text_color_selector" /> 

出力：