かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

Androidでタブを表示させる

Androidでタブを表示するのはちょっとめんどくさいことがわかりました。ということでやり方をメモしておきます。
Androidでタブを表示させるにはTabHost, TabWidget, FrameLayoutを使用します。どんな風に配置するかというと以下のような感じです。

  • TabHost(idは任意)
    • TabWidget(idは@android:id/tabsじゃないとダメ)
    • FrameLayout(idは@android:id/tabcontentじゃないとダメ)
    • 各種タブに表示するアイテム

実際のXMLの定義は以下のようになります。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/layout_root"
	android:layout_width="fill_parent" android:layout_height="fill_parent"
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical">
    <TabHost
        android:id="@+id/host"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TabWidget
        	android:layout_width="fill_parent" 
        	android:layout_height="fill_parent"
            android:id="@android:id/tabs">
        </TabWidget>
        <FrameLayout
        	android:id="@android:id/tabcontent"
        	android:layout_width="fill_parent" 
        	android:layout_height="fill_parent"
        	android:paddingTop="65px">
        	<LinearLayout
        		android:id="@+id/tab1"
        		android:layout_width="fill_parent" 
        		android:layout_height="fill_parent">
        		<TextView
        			android:layout_width="fill_parent"
        			android:layout_height="fill_parent"
        			android:text="Tab1" />
        	</LinearLayout>
        	<LinearLayout
        		android:id="@+id/tab2"
        		android:layout_width="fill_parent" 
        		android:layout_height="fill_parent">
        		<TextView
        			android:layout_width="fill_parent"
        			android:layout_height="fill_parent"
        			android:text="Tab2" />
        	</LinearLayout>
        </FrameLayout>
    </TabHost>
</LinearLayout>

これだけで定義が出来たら凄い楽なんですが、これで実行してもタブとして表示されません・・・。ちょっといけてない感じがします。
上記のようなレイアウトを定義した上でActivityのクラス側でコードでタブを組み立てないといけません。
流れとしては以下のようになります。

  1. TabHostを取得する
  2. TabHost#setupを呼び出す
  3. TabHost#newTabSpecでTabSpecを作成する(TabSpecがタブの1ページのイメージ)
  4. TabSpec#setindicatorでタブに表示する文字列やアイコンを設定
  5. TabSpec#setContentでタブの中身を設定
  6. TabHost#addTabでタブのページを追加する

これを、タブのページの数だけ繰り返さないといけません。さっきのXMLの定義を使うとしたら、以下のようなコードになります。

TabHost host = (TabHost) findViewById(R.id.host);
host.setup();
TabSpec tab1 = host.newTabSpec("tab1");
tab1.setIndicator("tab1", 
		new BitmapDrawable(BitmapFactory.decodeResource(getResources(), R.drawable.tabicon)));
tab1.setContent(R.id.tab1);
host.addTab(tab1);

TabSpec tab2 = host.newTabSpec("tab2");
tab2.setIndicator("tab2", 
		new BitmapDrawable(BitmapFactory.decodeResource(getResources(), R.drawable.tabicon)));
tab2.setContent(R.id.tab2);
host.addTab(tab2);

因みにres/drawableにtabicon.pngという25x25くらいの大きさの画像を置いてます。

実行すると以下のようにタブがきちんと表示されます。

正直ちょっとめんどくさいですね。