Tab Layoutの使い方のメモ。ちょっと未来の自分のために(^_^;
内容は
Android Developers の Tutorial と同じ。これを自分に分かりやすく（日本語で）書いたもの。
タブを使うときのレイアウトは以下のような構成になる。
TabHost <- root node, 一番上の親
LinearLayout <- 以下の子を縦に配置する
TabWidget <- タブが表示される領域
FrameLayout <- タブによって切り替えられたコンテンツが表示される領域
まず最初に、メインのレイアウトファイル main.xml を以下の様につくろう。
<?xml version="1.0" encoding="utf-8"?>
<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"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>
ポイントは LinearLayout の orientation を "vertical" にすること、また TabWidget の id は "@android:id/tabs"、コンテンツを表示する FrameLayout の id は "@android:id/tabcontent" とする必要がある。これはこの id を使って親の TabHost がこれらを認識するため。
このサンプルでは3つの Activity をタブによって切り替える。外観は次の様になる。
お次はこれらの Activity を作ろう。
Activityは
- ArtistsActivity
- AlbumsActivity
- SongsActivity
それぞれのソースコードは
ArtistsActivity.java:
package test.hellotabwidget;
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class ArtistsActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView textview = new TextView(this);
textview.setText("This is the Artists tab");
setContentView(textview);
}
}
AlbumsActivity.java:
package test.hellotabwidget;
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class AlbumsActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView textview = new TextView(this);
textview.setText("This is the Albums tab");
setContentView(textview);
}
}
SongsActivity.java:
package test.hellotabwidget;
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class SongsActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView textview = new TextView(this);
textview.setText("This is the Songs tab");
setContentView(textview);
}
}
それぞれの内容はほとんど同じで、表示する文字列だけが異なる。またこれらの Activity はここでは簡単のためにレイアウトファイル（*.xml）は使わない。直接 TextView を生成してコンテンツとして設定している。
次はタブに表示するアイコン。これは先のTutorialからコピーしたものを用いる。面倒なので3つのタブ全て同じアイコンとする。実際にはそれぞれに別のアイコンを用意する。
 |
| タブが選択されたときのアイコン(ic_tab_artists_grey.png) |
 |
| 非選択時のアイコン(ic_tagb_artists_white.png) |
これらのアイコンを res/drawable/ に保存する。
さらに以下の xml ファイルを同じ res/drawable/に保存し、タブの選択・非選択時のアイコン画像を指定する。
ArtistsActivityのタブには
ic_tab_artists.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="@drawable/ic_tab_artists_grey"
android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="@drawable/ic_tab_artists_white" />
</selector>
同様に AlbumActivity には ic_tab_albums.xmlを、SongsActivity には ic_tab_songs.xml 用意する。内容はic_tab_artists.xml とまったく同じでよい（実際にはそれぞれに使用するアイコンを別に指定する）。
次はユーザーがアプリ起動時に呼び出す一番上の Activity を作成する。
HelloTabWidget.java:
package test.hellotabwidget;
import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;
public class HelloTabWidget extends TabActivity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Resources res = getResources(); // Resource object to get Drawables
TabHost tabHost = getTabHost(); // The activity TabHost
TabHost.TabSpec spec; // Resusable TabSpec for each tab
Intent intent; // Reusable Intent for each tab
// Create an Intent to launch an Activity for the tab (to be reused)
intent = new Intent().setClass(this, ArtistsActivity.class);
// Initialize a TabSpec for each tab and add it to the TabHost
spec = tabHost.newTabSpec("artists").setIndicator("Artists",
res.getDrawable(R.drawable.ic_tab_artists))
.setContent(intent);
tabHost.addTab(spec);
// Do the same for the other tabs
intent = new Intent().setClass(this, AlbumsActivity.class);
spec = tabHost.newTabSpec("albums").setIndicator("Albums",
res.getDrawable(R.drawable.ic_tab_albums))
.setContent(intent);
tabHost.addTab(spec);
intent = new Intent().setClass(this, SongsActivity.class);
spec = tabHost.newTabSpec("songs").setIndicator("Songs",
res.getDrawable(R.drawable.ic_tab_songs))
.setContent(intent);
tabHost.addTab(spec);
tabHost.setCurrentTab(2);
}
}
ここでは通常の Activity ではなく TabActivity を継承する。
getTabHost() で TabHost を取得し、 newTabSpec(String) で TabHost.TabSpec を作成しそれぞれのタブの特性を設定する。そして addTab(TabSpec) でそれぞれのタブを追加していく。
最後にsetCurrentTab(int)で最初に表示されるタブをインデックスで指定する。
最後にManifestにこれらのActivityを追加するのを忘れないこと。
AndroidManifest.xml:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="test.hellotabwidget"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:minSdkVersion="6" />
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".HelloTabWidget"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".ArtistsActivity" />
<activity android:name=".AlbumsActivity" />
<activity android:name=".SongsActivity" />
</application>
</manifest>
