タブで画面を切り替える |
ここではタブで表示を切り替える方法を確認していきます。
タブで画面を切り替えるには「tabHost」クラスを用います。 タブで切替ができるようになるまでの流れとしては以下のようになります。 1.「getTabHost」メソッドを使って「TabHost」インスタンスを取得する。 2.「LayoutInflater」インスタンスを取得し、各タブのレイアウトファイルを読み込む。 3.「newTabSpec」メソッドを使ってタブを生成する。 4.「setIndicator」メソッドを使ってタブのラベルを設定する 5.「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="タブ1のコンテンツ表示部分" /> </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="タブ2のコンテンツ表示部分" /> </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="タブ3のコンテンツ表示部分" /> </LinearLayout> 実行結果 ![]() ![]() ![]() |
6118 views | コメント:0 | 2012-06-09 |
コメント
|
|
まだこの記事にコメントはありません |