TabLaoyoutの各タブに異なるタイトル色をつけたい


# やりたいこと
* Android Support Libraryが23になってから、Indicatorの色をタブ毎に切り替えられる様になりました。方法は下記を参照ください
	* 詳しくは[TabLayoutのTab毎に異なるIndicator色を設定したい](http://qiita.com/kengoscal/items/eaed681c3d086ab49351)を参照ください
* Indicator色を変えられるなら、各タブにも色を変えたいと思いました。

# 問題
* XML内にapp:tabSelectedTextColorを指定してやれば、選択されたタブのタイトル色は設定できます

```
<android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        style="@style/MyTabLayout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabSelectedTextColor="@color/red"/>
```

* ですが、これだけだと全タブのタイトル色は統一されてしまいます
* 又、動的に変えようにも、tabLayoutにtabSelectedTextColorメソッドは見つかりませんでした

## 色が統一されたタブタイトル

![8月 28, 2015 23:22.gif](https://qiita-image-store.s3.amazonaws.com/0/59166/2dcf3ec0-fe26-95bb-d621-a8ed83b302d8.gif "8月 28, 2015 23:22.gif")

# 解決方法

* Tablayoutに適用するstyleを若干カスタマイズします
* Spannableを使います

## ステップ1: TabLayoutに適用するstyleをカスタマイズする
* TabLayoutに適用されるデフォルトのTextAppearance属性では、textAllCapsがtrueになっているので、これをfalseにします。


```styles.xml
    <style name="MyTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabMode">fixed</item>
        <item name="tabIndicatorHeight">4dp</item>
        <item name="tabTextAppearance">@style/NonCapTextAppearance</item>
    </style>

    <style name="NonCapTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="textAllCaps">false</item>
    </style>
```

## ステップ2: Spannableを使って色をsetText()する
* ForegroundColorspanをSpannableに埋め込み、setOnTabSelectedListener内でtab.setText()する

```TabActivity.java
mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
     @Override
     public void onTabSelected(TabLayout.Tab tab) {
         Spannable sb = new SpannableString(tab.getText());
         int colorId = getResources().getColor(R.color.blue);
         switch (tab.getPosition()) {
             case 0:
                 colorId = getResources().getColor(R.color.blue);
                 break;
             case 1:
                 colorId = getResources().getColor(R.color.red);
                 break;
             case 2:
                 colorId = getResources().getColor(R.color.green);
                 break;
             default:
                 break;
         }

         ForegroundColorSpan colorSpan = new ForegroundColorSpan(colorId);
         sb.setSpan(colorSpan, 0, tab.getText().length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
         // ForegroundColorSpanを設定したspannableをsetText()
         tab.setText(sb);
         
         // Indicator色も変える
         mTabLayout.setSelectedTabIndicatorColor(colorId);
     }

     @Override
     public void onTabUnselected(TabLayout.Tab tab) {
         // 非選択状態になったタイトル色をグレーっぽくする
         SpannableString sb = new SpannableString(tab.getText());
         ForegroundColorSpan colorSpan = new ForegroundColorSpan(getResources().getColor(R.color.material_blue_grey_800));
         sb.setSpan(colorSpan, 0, tab.getText().length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
         tab.setText(sb);
     }

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

     }
});
```

# 結果
* タブごとにタイトル色を設定できるようになりました。
* マテリアルデザインっぽさでいうと、あまりそれっぽくないかもしれないです。

![8月 28, 2015 23:46.gif](https://qiita-image-store.s3.amazonaws.com/0/59166/da6dbe8a-5f72-dde0-4bfc-4e883ed48377.gif "8月 28, 2015 23:46.gif")