Andorid TabWidget をカスタマイズする

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


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

view plainprint?

1. public class CustomTabContentView extends FrameLayout {  
2.     LayoutInflater inflater = (LayoutInflater) getApplicationContext()  
3.             .getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
4.   
5.     public CustomTabContentView(Context context) {  
6.         super(context);  
7.     }  
8.     
9.     public CustomTabContentView(Context context, String title, int icon) {  
10.         this(context);  
11.         View childview1 = inflater.inflate(R.layout.tabwidget1, null);  
12.         TextView tv1 = (TextView) childview1.findViewById(R.id.textview);  
13.         ImageView iv1 = (ImageView) childview1.findViewById(R.id.imageview);  
14.         tv1.setText(title);  
15.         iv1.setImageResource(icon);  
16.         addView(childview1);  
17.    }  
18. }  

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 にカスタムビューを指定します。

view plainprint?

1. @Override  
2. public void onCreate(Bundle savedInstanceState) {  
3.     super.onCreate(savedInstanceState);  
4.     setContentView(R.layout.main);  
5.   
6.     TabHost tabHost = getTabHost();  
7.   
8.     tabHost.setCurrentTab(1);  
9.   
10.     View childview1 = new CustomTabContentView(this, "First", R.drawable.ic_tab_home);  
11.   
12.     TabSpec firstTab = tabHost.newTabSpec("First");  
13.     firstTab.setIndicator(childview1);  
14.     firstTab.setContent(R.id.first_content);  
15.     tabHost.addTab(firstTab);  
16.   
17.     View childview2 = new CustomTabContentView(this, "Second", R.drawable.ic_tab_star);  
18.   
19.     TabSpec secondTab = tabHost.newTabSpec("Second");  
20.     secondTab.setIndicator(childview2);  
21.     secondTab.setContent(R.id.second_content);  
22.     tabHost.addTab(secondTab);  
23.   
24.     View childview3 = new CustomTabContentView(this, "Third", R.drawable.ic_tab_camera);  
25.   
26.     TabSpec thirdTab = tabHost.newTabSpec("Third");  
27.     thirdTab.setIndicator(childview3);  
28.     thirdTab.setContent(R.id.third_content);  
29.     tabHost.addTab(thirdTab);  
30. }  

@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

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.  android:orientation="vertical"  
4.  android:layout_width="fill_parent"   
5.  android:layout_height="fill_parent"   
6.  android:background="@drawable/tabwidget_bg"  
7.  android:gravity="center"  
8.  >  
9.  <TextView   
10.   android:id="@+id/textview"  
11.      android:layout_width="wrap_content"  
12.      android:layout_height="wrap_content" />  
13.   
14.  <ImageView  
15.   android:id="@+id/imageview"  
16.   android:layout_width="wrap_content"  
17.   android:layout_height="wrap_content" />  
18.   
19. </LinearLayout>  

<?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>