TechBooster

Androidでタブを使う方法について紹介します。
タブ(Tab)を簡単に使う仕組みとして専用のActivity「TabActivity」が用意されています。

※2010/11/14 yanzmさんよりご指摘いただき、内容を修正しました。ありがとうございました！

TabActivityで、タブの内容として表示できるのはView、Activity（IntentによるTabActivity内起動）、
動的にコンテンツを生成できるTabHost.TabContentFactoryです。

レイアウト構成の制限

TabActivityではレイアウトファイルについて、名前上の制限があります。

• TabWidgetのidが android:id=”@android:id/tabs” であること
• FrameLayoutのidが android:id=”@android:id/tabcontent”であること

上記の2つは、タブを使う上で固定のidとなっています。

続きはサンプルの res/layout/main.xml です。アウトラインは以下のような構成です。

res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost">
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical">
	<TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" />
	<FrameLayout android:id="@android:id/tabcontent" android:layout_width="wrap_content" android:layout_height="wrap_content" >

		<LinearLayout android:id="@+id/first_content" android:layout_width="fill_parent" android:layout_height="fill_parent">
			<TextView android:text="first_tab"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content" />
		</LinearLayout>

		<LinearLayout android:id="@+id/second_content" android:layout_width="fill_parent" android:layout_height="fill_parent">
			<TextView android:text="second_tab"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content" />
		</LinearLayout>
	</FrameLayout>

</LinearLayout>
</TabHost>

レイアウト上の注意

タブのレイアウトを考える上では、以下の構成に注意してください。
※2010/11/14 yanzmさんよりご指摘いただき下記内容を修正しました。ありがとうございました！

<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical">
	<TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" />
	<FrameLayout android:id="@android:id/tabcontent" android:layout_width="wrap_content" android:layout_height="wrap_content" >

LinearLayout で TabWidgetとFrameLayoutをくくって「android:orientation=”vertical”」を指定してください。
縦配置でタブ(TabWidget)の下に表示したい項目(FrameLayout)を並べます。

TabActivityの作成

TabActivityでは、TabHostとTabSpecがタブ作成のための重要な要素になります。順を追って

• 標準的なTabの追加方法
• TabにIconを設定する
• Tabを動的に生成する

について、説明します。
まずは、TabActivityとTabHostについてサンプルコードを抜粋しました。

public class tabAct extends TabActivity  implements TabHost.TabContentFactory {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

		//TabActivityでは、getTabHostメソッドが使えます
		TabHost tabHost = getTabHost();

		･･･省略･･･

		// 初期表示設定
		tabHost.setCurrentTabByTag("First");	//tabHost.setCurrentTab(0)でもOK

通常は、extends Activityですが、今回はTabActivityを継承しています。TabActivityでは、タブ情報を持っているTabHostをgetTabHostメソッドで取得できます。

タブの追加方法

onCreateメソッド内部で処理します。tabHost.newTabSpecメソッドを使い、タブの詳細情報を設定します。

		setContentView(R.layout.main);
		・・・省略・・・

		//子となるタブの設定
		TabSpec firstTab = tabHost.newTabSpec("First");
		firstTab.setIndicator("firstTab");			//タブ上の文字列
		firstTab.setContent(R.id.first_content);	//表示するView
		tabHost.addTab(firstTab);

6行目でタブに表示される文字列、7行目で内容のViewを設定しています。

タブにアイコンを設定する

setIndicatorメソッドに、drawableを指定すればアイコンがタブに表示されます。
(タブの高さは固定で、アイコンの有無では変わりません)

		//画像を使う場合
		TabSpec secondTab = tabHost.newTabSpec("Second");
		secondTab.setIndicator("secondTab", getResources().getDrawable(android.R.drawable.ic_menu_agenda));      // タブに表示する文字列と画像
		secondTab.setContent(R.id.second_content); //表示するView
		tabHost.addTab(secondTab);

タブを動的に生成する

最後はタブの中身を動的に生成します。
TabHost.TabContentFactoryを利用することで簡単に作れます。

public class tabAct extends TabActivity  implements TabHost.TabContentFactory {

タブの設定時での違いは、setContentメソッドの引数がリソースではなく、TabActivityになるところ(4行目)です

		//タブコンテンツのファクトリーを使う場合
		TabSpec thirdTab = tabHost.newTabSpec("Third");
		thirdTab.setIndicator("thirdTab");		//タブ上の文字列
		thirdTab.setContent(this); 				//TabContentFactoryを設定、タブ選択時に表示するビューを生成
		tabHost.addTab(thirdTab);

追加で、 TabHost.TabContentFactoryのcreateTabContentメソッドを実装します。
返値は、表示するViewです。サンプルではTextViewにタブのTag(名前)を設定して返しています。

	public View createTabContent(String tag) {
        TextView textView = new TextView(this);
        textView.setText("Content for tab with tag " + tag);
        return textView;
	}

おつかれさまでした。