Androidプログラマへの道 〜 Moonlight 明日香 〜 - タブ画面を作成する
タブ画面を作成する方法は2通りある.



TabActivityを継承する

  • res/layout/main.xml
    • TabHost要素を定義する. このとき, idは"@android:id/tabhost"とする.
    • TabWidget要素を定義する. このとき, idは"@andorid:id/tabs"とする.
    • FrameLayout要素を定義する. このとき, idは"@android:id/tabcontent"とする.
    • 各タブ画面のレイアウトを記述する.
<?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"
  >
  <TabWidget android:id="@android:id/tabs"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />
  <FrameLayout android:id="@android:id/tabcontent"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:paddingTop="5px"
    >
    // <!-- タブ画面1のレイアウト -->
    <LinearLayout android:id="@+id/sheet01_id"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      >
      <TextView android:id="@+id/textview01_id"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Tab sheet01"
        />
    </LinearLayout>
    <!-- タブ画面2のレイアウト -->
    <LinearLayout android:id="@+id/sheet02_id"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      >
      <TextView android:id="@+id/textview02_id"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Tab sheet02"
        />
    </LinearLayout>
    <!-- タブ画面3のレイアウト -->
    <LinearLayout android:id="@+id/sheet03_id"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      >
      <TextView android:id="@+id/textview03_id"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Tab sheet03"
        />
    </LinearLayout>
  </FrameLayout>
</TabHost>
  • TabSheet01.java
    • getTabHostメソッドで, TabHostのインスタンスを取得する.
    • LayoutInflaer.from().inflateメソッドで, レイアウトを設定する.
    • タブシートを設定する.
    • 初期表示のタブ画面を設定する.
package com.moonlight_aska.android.tabsheet01;

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

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

    // TabHostのインスタンスを取得
    TabHost tabs = getTabHost();
    // レイアウトを設定
    LayoutInflater.from(this).inflate(R.layout.main, tabs.getTabContentView(), true);
    // タブシートの設定
    TabSpec tab01 = tabs.newTabSpec("TabSheet1");
    tab01.setIndicator("TabSheet1");
    tab01.setContent(R.id.sheet01_id);
    tabs.addTab(tab01);
    TabSpec tab02 = tabs.newTabSpec("TabSheet2");
    tab02.setIndicator("TabSheet2");
    tab02.setContent(R.id.sheet02_id);
    tabs.addTab(tab02);
    TabSpec tab03 = tabs.newTabSpec("TabSheet3");
    tab03.setIndicator("TabSheet3");
    tab03.setContent(R.id.sheet03_id);
    tabs.addTab(tab03);
    // 初期表示のタブ設定
    tabs.setCurrentTab(0);
  }
}

Activityを継承する

また, 別の機会に....