AndroidでTab表示

android


AndroidでTabを使う方法は2つある
・Activityを継承した方法
・TabAcitvityをを継承する方法



今回はTabActivityを継承した方法で実装する
■手順
TabActivityを継承
プログラムからTabHostを追加
TabSpecでTabを追加

手順１ プロジェクトの新規作成

アプリ概要
  • Project Name : SampleTabActivity
  • Application Name : SampleTabActivity
  • Package Name : com.example.tab
  • Activity Name : SampleTabActivity

手順２ Activityの変更

継承元をActivityからTabActivityに変更する
  • エラーだらけになるのでimportを変更する
    • Ctrl + Shift + o で自動importされ、エラーがなくなる
ソース変更

SampleTabActivityクラスを変更する

  • setContentView(R.layout.main);を削除
  • TabHostの生成
  • LayoutInflaterを使って、UIを構築
    • LayoutInflaterはActivity上でViewが生成された時に割り込みをかけレイアウトを再構築したり、onCreateViewメソッドを実装したActivityのレイアウト構成を取得したりとかできる。詳しくはググれとしか言えないが、ViewにTabを使うときとか必須
  • 変更後のソース
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TabHost tabHost = getTabHost();
        LayoutInflater.from(this).inflate(R.layout.main, tabHost.getTabContentView(), true);
    }

手順 ３レイアウトの変更

main.xmlを変更する

  • デフォルトで作成されているLinearLayoutを削除
  • FrameLayoutの追加
  • TextViewを３つ追加
    • id:TextView01〜03
    • Text:tab1 no text 〜tab3 no text
    • LayoutHeight:fill_parent
    • Layoutwidth:fill_parent

手順４ Activityの変更２

ソース変更

Tabを変更したときにわかりやすくするため、各TextViewの背景色を設定（赤、緑、青）
TabSpecを３つ生成し、TabHostに追加

  • TabSpec：実際に表示されるTabのこと
  • TabSpec#setIndicator：Tabに表示する文字
  • TabSpec#setContent：Tabが選択された時に表示するView
ソース
package com.example.tab;

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

public class SampleTabActivity extends TabActivity {
	private TextView txt1; // tab1のTextView
	private TextView txt2; // tab2のTextView
	private TextView txt3; // tab3のTextView

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		TabHost tabHost = getTabHost();
		LayoutInflater.from(this).inflate(R.layout.main,
				tabHost.getTabContentView(), true);
		this.txt1 = (TextView) findViewById(R.id.TextView01);
		this.txt1.setBackgroundColor(Color.RED);
		this.txt2 = (TextView) findViewById(R.id.TextView02);
		this.txt2.setBackgroundColor(Color.GREEN);
		this.txt3 = (TextView) findViewById(R.id.TextView03);
		this.txt3.setBackgroundColor(Color.BLUE);

		TabSpec tab1 = tabHost.newTabSpec("tab1");
		tab1.setIndicator("tab1");
		tab1.setContent(R.id.TextView01);

		TabSpec tab2 = tabHost.newTabSpec("tab2");
		tab2.setIndicator("tab2");
		tab2.setContent(R.id.TextView02);

		TabSpec tab3 = tabHost.newTabSpec("tab3");
		tab3.setIndicator("tab3");
		tab3.setContent(R.id.TextView03);

		tabHost.addTab(tab1);
		tabHost.addTab(tab2);
		tabHost.addTab(tab3);
	}
}