Tab を作ってみた

Tab を使うには TabHost と TabWidget を使います
そして TabWidget でTabのコンテンツを表示するのに FrameLayout を使います

Tabのコンテンツとして 任意のViewを表示させるのと, Activityを起動する2種類があるようです

というわけで, Tab を作ってみた

注意するのは id として

• TabHost は @android:id/tabhost
• TabWidget は @android:id/tabs
• メインの FrameLayout は @android:id/tabcotent

というのを指定してあげます

XMLリソース

view plainprint?

1. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"  
2.   android:id="@android:id/tabhost"   
3.   android:layout_width="fill_parent"  
4.   android:layout_height="fill_parent">  
5.   <LinearLayout   
6.     android:orientation="vertical"  
7.     android:layout_width="fill_parent"   
8.     android:layout_height="fill_parent"  
9.     android:padding="5dp">  
10.     <TabWidget   
11.       android:id="@android:id/tabs"  
12.       ... />  
13.     <FrameLayout   
14.       android:id="@android:id/tabcontent"  
15.       android:padding="5dp"  
16.       ... >  
17.       <LinearLayout  
18.         android:id="@+id/content1"   
19.         android:orientation="vertical"  
20.         ... >  
21.         <TextView   
22.           ... />  
23.       </LinearLayout>  
24.       <LinearLayout  
25.         android:id="@+id/content2"   
26.             ・  
27.             ・  
28.             ・  
29.       </LinearLayout>  
30.     </FrameLayout>  
31.   </LinearLayout>  
32. </TabHost>  

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@android:id/tabhost" 
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <LinearLayout 
    android:orientation="vertical"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:padding="5dp">
    <TabWidget 
      android:id="@android:id/tabs"
      ... />
    <FrameLayout 
      android:id="@android:id/tabcontent"
      android:padding="5dp"
      ... >
      <LinearLayout
        android:id="@+id/content1" 
        android:orientation="vertical"
        ... >
        <TextView 
          ... />
      </LinearLayout>
      <LinearLayout
        android:id="@+id/content2" 
            ・
            ・
            ・
      </LinearLayout>
    </FrameLayout>
  </LinearLayout>
</TabHost>

また, Tab が切り替わったときのアイコンの切り替えもXMLで指定できます
以下のように作ってres/drawable に置きます

view plainprint?

1. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
2.   <!-- 選択されたときの画像 -->  
3.   <item android:drawable="@android:drawable/star_big_on"  
4.         android:state_selected="true" />  
5.   <!-- 選択されていないときの画像 -->  
6.   <item android:drawable="@android:drawable/star_big_off" />  
7. </selector>  

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- 選択されたときの画像 -->
  <item android:drawable="@android:drawable/star_big_on"
        android:state_selected="true" />
  <!-- 選択されていないときの画像 -->
  <item android:drawable="@android:drawable/star_big_off" />
</selector>

んで, 本体
ここで Activity でなく TabActivity というのを継承させます

サンプルプログラム

view plainprint?

1. import android.app.TabActivity;  
2. import android.graphics.Color;  
3. import android.os.Bundle;  
4. import android.view.Gravity;  
5. import android.widget.TabHost;  
6. import android.widget.TextView;  
7. import android.widget.TabHost.OnTabChangeListener;  
8.   
9. public class TabTest extends TabActivity  
10.                      implements OnTabChangeListener {  
11.   private static final String TAG[] = {  
12.     "tag1", "tag2", "tag3",  
13.   };  
14.   private static final String LABEL[] = {  
15.     "Label1", "Label2", "Label3",  
16.   };  
17.   
18.   TabHost tabHost;  
19.   TabHost.TabSpec spec;  
20.   TextView textView;  
21.   
22.   @Override  
23.   public void onCreate(Bundle savedInstanceState) {  
24.     super.onCreate(savedInstanceState);  
25.   
26.     setContentView(R.layout.tabtest);  
27.     textView = new TextView(this);  
28.       
29.     // TabHost の取得  
30.     tabHost = getTabHost();  
31.     // Tab が切り替わったときに呼ばれるコールバックを登録  
32.     tabHost.setOnTabChangedListener(this);  
33.   
34.     /********** Tab その1 **********/  
35.     // TabSpec の作成  
36.     spec = tabHost.newTabSpec(TAG[0]);  
37.     // インジケーターの設定  
38.     spec.setIndicator(LABEL[0]);  
39.     // Tab のコンテンツの設定  
40.     spec.setContent(R.id.content1);  
41.     // TabHost に Tab を追加  
42.     tabHost.addTab(spec);  
43.   
44.     /********** Tab その2 **********/  
45.     spec = tabHost.newTabSpec(TAG[1])  
46.     // アイコン付きインジケーターの設定  
47.     .setIndicator(LABEL[1], getResources().getDrawable(R.drawable.icon))  
48.     .setContent(R.id.content2);  
49.     tabHost.addTab(spec);  
50.   
51.     textView.setText("Text");  
52.     textView.setBackgroundColor(Color.DKGRAY);  
53.     textView.setTextColor(Color.RED);  
54.     textView.setGravity(Gravity.CENTER);  
55.   
56.     /********** Tab その3 **********/  
57.     // 起動したいアクティビティのIntent作成  
58.     Intent intent = new Intent().setClass(this, TabTest.class);  
59.       
60.     spec = tabHost.newTabSpec(TAG[2])  
61.     // インジケーターに任意のビューを設定  
62.     .setIndicator(textView)  
63.     // Intent を設定  
64.     .setContent(intent);  
65.     tabHost.addTab(spec);  
66.   
67.     // 現在の Tab を設定  
68.     tabHost.setCurrentTab(0);  
69.   }  
70.   // Tab が切り替わったときの動作 (引数はTag)  
71.   public void onTabChanged(String tabId) {  
72.     if (tabId == TAG[2])  
73.       textView.setBackgroundColor(Color.LTGRAY);  
74.     else  
75.       textView.setBackgroundColor(Color.DKGRAY);  
76.   }  
77. }  

import android.app.TabActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.TabHost;
import android.widget.TextView;
import android.widget.TabHost.OnTabChangeListener;

public class TabTest extends TabActivity
                     implements OnTabChangeListener {
  private static final String TAG[] = {
    "tag1", "tag2", "tag3",
  };
  private static final String LABEL[] = {
    "Label1", "Label2", "Label3",
  };

  TabHost tabHost;
  TabHost.TabSpec spec;
  TextView textView;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.tabtest);
    textView = new TextView(this);
    
    // TabHost の取得
    tabHost = getTabHost();
    // Tab が切り替わったときに呼ばれるコールバックを登録
    tabHost.setOnTabChangedListener(this);

    /********** Tab その1 **********/
    // TabSpec の作成
    spec = tabHost.newTabSpec(TAG[0]);
    // インジケーターの設定
    spec.setIndicator(LABEL[0]);
    // Tab のコンテンツの設定
    spec.setContent(R.id.content1);
    // TabHost に Tab を追加
    tabHost.addTab(spec);

    /********** Tab その2 **********/
    spec = tabHost.newTabSpec(TAG[1])
    // アイコン付きインジケーターの設定
    .setIndicator(LABEL[1], getResources().getDrawable(R.drawable.icon))
    .setContent(R.id.content2);
    tabHost.addTab(spec);

    textView.setText("Text");
    textView.setBackgroundColor(Color.DKGRAY);
    textView.setTextColor(Color.RED);
    textView.setGravity(Gravity.CENTER);

    /********** Tab その3 **********/
    // 起動したいアクティビティのIntent作成
    Intent intent = new Intent().setClass(this, TabTest.class);
    
    spec = tabHost.newTabSpec(TAG[2])
    // インジケーターに任意のビューを設定
    .setIndicator(textView)
    // Intent を設定
    .setContent(intent);
    tabHost.addTab(spec);

    // 現在の Tab を設定
    tabHost.setCurrentTab(0);
  }
  // Tab が切り替わったときの動作 (引数はTag)
  public void onTabChanged(String tabId) {
    if (tabId == TAG[2])
      textView.setBackgroundColor(Color.LTGRAY);
    else
      textView.setBackgroundColor(Color.DKGRAY);
  }
}

これでOK!

プログラムを実行すると...

こんな感じ!

今回は Intent で自分自身を読んでます
当たり前ですが何回も呼ぶとオーバーフローして落ちます

Tab で TabActivity を呼べば多段の Tab ができそう!

参考サイト
http://developer.android.com/intl/ja/resources/tutorials/views/hello-tabwidget.html
http://developer.android.com/intl/ja/reference/android/widget/TabHost.html
http://developer.android.com/intl/ja/reference/android/widget/TabWidget.html