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リソース

<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 に置きます

<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 というのを継承させます

サンプルプログラム

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