Android Tab Layout

Tab Layout

　タブ UI を実現するには、TabHost と TabWidget を使う必要がある

　・TabHost はレイアウトの root node でなければならない

　・TabHost は、タブを表示するための TabWidget とタブの内容を
　　する Framelayout を含む

　

　タブコンテンツの実装方法には2つある
　　
　　1. 同じ Activity で、タブごとに View を切り替える

　　2. タブごとに別々の Activity を割り当てる


　■ 同じ Activity で、タブごとに View を切り替える

　　Tech Booster さんの説明がわかりやすいです。

　　・タブメニューを利用する - Tech Booster -



　■ タブごとに別々の Activity を割り当てる

　
　　1. 各タブの Activity を用意する

public class Tab1Activity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is Tab1");
        setContentView(textview);
    }
}

　　AndroidManifest.xml に <activity> を追加するのを忘れずに！


　　2. タブ用のアイコンを準備する

　　　　タブが選択されたときと、選択されていないときの2種類用意する
　
　　　　用意した2つのアイコンで state-list drawable を定義する

<?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_home_selected"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/ic_tab_home_unselected" />
</selector>

　　　　tab 用のアイコンの作成は簡単なのであれば、
　　　　Android Asset Studio が便利！


　　3. 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>

　　　TabHost は TabWidget を FrameLayout を含まなければならない
　　　さらに、それらの ID は tabs と tabcontent でなければならない
　　　上記のレイアウトでは FrameLayout が空なので、TabHost は
　　　自動的に Activity を割り当てる


　　5. ランチャー Activity が TabActivity を継承するようにする

public class HelloTabWidget extends TabActivity {

　　6. onCreate() の中身を実装する

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    // Resource object to get Drawables
    Resources res = getResources(); 

    // The activity TabHost
    TabHost tabHost = getTabHost();  

    // Resusable TabSpec for each tab
    TabHost.TabSpec spec;

    // Reusable Intent for each tab
    Intent intent;

    // Create an Intent to launch an Activity 
    // for the tab (to be reused)
    intent = new Intent().setClass(this, Tab1Activity.class);

    // Initialize a TabSpec for each tab and 
    // add it to the TabHost
    spec = tabHost.newTabSpec("tab1")
                  .setIndicator("Home", 
                   res.getDrawable(R.drawable.ic_tab_home))
                  .setContent(intent);
    tabHost.addTab(spec);

    // Do the same for the other tabs
    intent = new Intent().setClass(this, Tab2Activity.class);
    spec = tabHost.newTabSpec("tab2")
                  .setIndicator("Camera", 
                   res.getDrawable(R.drawable.ic_tab_camera))
                  .setContent(intent);
    tabHost.addTab(spec);

    intent = new Intent().setClass(this, Tab3Activity.class);
    spec = tabHost.newTabSpec("tab3")
                  .setIndicator("Star", 
                   res.getDrawable(R.drawable.ic_tab_star))
                  .setContent(intent);
    tabHost.addTab(spec);

    tabHost.setCurrentTab(2);
}

　　　getTabHost() で TabHost を取得し、Tab.Spec で生成した
　　　各タブを TabHost.addTab() で TabHost に追加する
　　　setCurrentTab() で初期起動時のタブを設定する