かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

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くらいの大きさの画像を置いてます。

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

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