Androidでタブを表示するのはちょっとめんどくさいことがわかりました。ということでやり方をメモしておきます。
Androidでタブを表示させるにはTabHost, TabWidget, FrameLayoutを使用します。どんな風に配置するかというと以下のような感じです。
- TabHost(idは任意)
実際の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のクラス側でコードでタブを組み立てないといけません。
流れとしては以下のようになります。
- TabHostを取得する
- TabHost#setupを呼び出す
- TabHost#newTabSpecでTabSpecを作成する(TabSpecがタブの1ページのイメージ)
- TabSpec#setindicatorでタブに表示する文字列やアイコンを設定
- TabSpec#setContentでタブの中身を設定
- 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くらいの大きさの画像を置いてます。