タブ表示を独自のものにする

「今僕たちに必要な買い物」のカタログ編集画面では、左の画像のように、カテゴリごとにタブを分けて表示しています。
このタブ表示は独自に定義したレイアウトで行っていますが、その方法がなかなかネット上で見つからなかったので、ここに記録。

タブ表示はTabActivityを使うのが一般的のようです。
その方法は検索したらいっぱい出てきました。
が、しかし、それらのサンプルは「タブの背景画像が標準のまま」であって、文字列やアイコンは設定できるものの、タブの背景画像を自分の好きな表示に変える方法がなかなか見つからなかった。
デフォルトのままだと、全体の雰囲気と合わないし、表示領域がでかすぎるので、どうしても変えたい。

世の中に出回っているアプリはよく、タブの背景を変えている。
絶対変えられるはずだと、APIリファレンスを見て試したところ、怪しいのがあったので試したら成功。
以下、やり方。


TabActivityを継承した自分のActivityのonCreate(Bundle)の中で、TabSpecを生成する部分を次のコードのようにした。

for (Iterator itr = list.iterator(); itr.hasNext();) {
     String categoryName = itr.next();

     // 独自のタブ用レイアウト生成
     ViewGroup tabView = (ViewGroup)((LayoutInflater)getSystemService(LAYOUT_INFLATER_SERVICE)).inflate(
         R.layout.tab_view, null);

     // タブに表示するテキストの設定
     TextView text = (TextView)tabView.findViewById(R.id.tabText);
     text.setText(categoryName);

     // TabSpec生成
     TabSpec tab = tabs
         .newTabSpec(categoryName)
         .setContent(new Intent(this, ItemListActivity.class).setIndicator(tabView);
     tabs.addTab(tab);
 }

ポイントは、LayoutInflater#inflate(int, ViewGroup)で生成したViewGroupインスタンスを、TabSpec#setIndicator(View)でタブに設定しているところ。

TabSpecはsetIndicator()をオーバーロードで3つ持っていて、

1. setIndicator(CharSequence)
2. setIndicator(CharSequence, Drawable)
3. setIndicator(View)

がある。
1.は標準のタブにテキストを表示する時に使用。2.はテキストとアイコンを表示するとき。
そして3.は独自の表示にするときに使用する。

このTabSpec#setIndicator(View)を使えば、自由にカスタマイズ可能。
今回は次のようなレイアウトにしました。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="wrap_content" android:background="@drawable/tab_indicator"
 android:layout_height="50dip">
 <TextView android:layout_width="wrap_content"
  android:layout_height="wrap_content" android:id="@+id/tabText"
  android:textAppearance="?android:attr/textAppearanceMedium"
  android:minWidth="60dip" android:gravity="center"
  android:duplicateParentState="true" android:textColor="@color/tab_text_color"></TextView>
</FrameLayout>

ちなみに、FrameLayoutのandroid:backgroundとTextViewのandroid:textColorは、selectorを使って表示を切り替えています。