タブで画面を切り替える Goodroid - Androidアプリ開発奮闘記１年生 -

タブで画面を切り替える

ここではタブで表示を切り替える方法を確認していきます。

タブで画面を切り替えるには「tabHost」クラスを用います。
タブで切替ができるようになるまでの流れとしては以下のようになります。

１．「getTabHost」メソッドを使って「TabHost」インスタンスを取得する。
２．「LayoutInflater」インスタンスを取得し、各タブのレイアウトファイルを読み込む。
３．「newTabSpec」メソッドを使ってタブを生成する。
４．「setIndicator」メソッドを使ってタブのラベルを設定する
５．「addTab」メソッドで「TabHost」にタブを追加する。

TabsActivity.java

package goodroid.sample.tab;

import android.app.TabActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class TabsActivity extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // TabHostインスタンスを取得
        TabHost tabHost = getTabHost();

        // LayerInflaterインスタンスを取得
        LayoutInflater inflater = getLayoutInflater();

        // tabHostを親としてtab1.xmlレイアウトを読み込み
        inflater.inflate(R.layout.tab1, tabHost.getTabContentView(), true);

        // tabHostを親としてtab2.xmlレイアウトを読み込み
        inflater.inflate(R.layout.tab2, tabHost.getTabContentView(), true);

        // tabHostを親としてtab3.xmlレイアウトを読み込み
        inflater.inflate(R.layout.tab3, tabHost.getTabContentView(), true);

        // 1つ目のタブを生成
        TabSpec tab1 = tabHost.newTabSpec("tab1");

        // 1つ目のタブのラベルを設定
        tab1.setIndicator("Tab1 Label");

        // 選択時にはtab1.xmlにあるR.id.sample1の内容を表示
        tab1.setContent(R.id.sample1);

        // 2つ目のタブを生成
        TabSpec tab2 = tabHost.newTabSpec("tab2");

        // 2つ目のタブのラベルを設定
        tab2.setIndicator("Tab2 Label");

        // 選択時にはtab2.xmlにあるR.id.sample2の内容を表示
        tab2.setContent(R.id.sample2);

        // 3つ目のタブを生成
        TabSpec tab3 = tabHost.newTabSpec("tab3");

        // 3つ目のタブのラベルを設定
        tab3.setIndicator("Tab3 Label");

        // 選択時にはtab3.xmlにあるR.id.sample3の内容を表示
        tab3.setContent(R.id.sample3);

        // tabHostに生成したタブを追加
        tabHost.addTab(tab1);
        tabHost.addTab(tab2);
        tabHost.addTab(tab3);

    }
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/tab1" >
    </LinearLayout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/tab2" >
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/tab3" >
    </LinearLayout>

</LinearLayout>

★レイアウトファイル

tab1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:id="@+id/sample1" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="タブ１のコンテンツ表示部分"
    />

</LinearLayout>

tab2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:id="@+id/sample2" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="タブ２のコンテンツ表示部分" />

</LinearLayout>

tab3.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:id="@+id/sample3" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="タブ３のコンテンツ表示部分" />

</LinearLayout>

実行結果

4544 views | コメント：0 | 2012-06-09

コメント
まだこの記事にコメントはありません

GoodroidはAndroidアプリ開発のための情報をコラムやブログで紹介するサイトです。

アクセスカウンター

記事検索

ツリーメニュー

最新備忘録記事

書籍紹介