Andorid TabWidget をカスタマイズする

Android reference http://developer.android.com/resources/tutorials/views/hello-tabwidget.html では、setIndicator の引数でタイトル用の文字列とアイコンのリソースIDを渡していましたが、View を引数に指定することで、TabWidget をカスタマイズすることが可能です。


TabWidget 用の独自 View を作ります。

public class CustomTabContentView extends FrameLayout {
    LayoutInflater inflater = (LayoutInflater) getApplicationContext()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    public CustomTabContentView(Context context) {
        super(context);
    }
  
    public CustomTabContentView(Context context, String title, int icon) {
        this(context);
        View childview1 = inflater.inflate(R.layout.tabwidget1, null);
        TextView tv1 = (TextView) childview1.findViewById(R.id.textview);
        ImageView iv1 = (ImageView) childview1.findViewById(R.id.imageview);
        tv1.setText(title);
        iv1.setImageResource(icon);
        addView(childview1);
   }
}

ここでは FrameLayout を継承して、res/layout/tabwidget1.xml で指定されたレイアウトから LinearLayout, TextView ,ImageView を生成し、引数で渡された文字列と画像のリソースIDをそれぞれ TextView と ImageView に設定しています。


setIndicator にカスタムビューを指定します。

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    TabHost tabHost = getTabHost();

    tabHost.setCurrentTab(1);

    View childview1 = new CustomTabContentView(this, "First", R.drawable.ic_tab_home);

    TabSpec firstTab = tabHost.newTabSpec("First");
    firstTab.setIndicator(childview1);
    firstTab.setContent(R.id.first_content);
    tabHost.addTab(firstTab);

    View childview2 = new CustomTabContentView(this, "Second", R.drawable.ic_tab_star);

    TabSpec secondTab = tabHost.newTabSpec("Second");
    secondTab.setIndicator(childview2);
    secondTab.setContent(R.id.second_content);
    tabHost.addTab(secondTab);

    View childview3 = new CustomTabContentView(this, "Third", R.drawable.ic_tab_camera);

    TabSpec thirdTab = tabHost.newTabSpec("Third");
    thirdTab.setIndicator(childview3);
    thirdTab.setContent(R.id.third_content);
    tabHost.addTab(thirdTab);
}

tabwidget1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:background="@drawable/tabwidget_bg"
 android:gravity="center"
 >
 <TextView 
  android:id="@+id/textview"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content" />

 <ImageView
  android:id="@+id/imageview"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />

</LinearLayout>