Android開発 - TabActivityでタブ画面の作成

2011/07/12 00:43Update
TAGS: Android | TabActivity | タブ | TabHost | TabWidget

本文はAndroidアプリ開発におけるタブ画面の作成方法について解説します。

タブ画面作成概要


タブ画面作成の手順として
1)レイアウト定義:tab.xml(任意名前でよい)
  ※各タブに格納する内容を定義
2)TabActivityを継承したActivityを作成
  ※タブを生成
  例:
        //タブの格納容器
        TabHost tabHost = getTabHost();
        //レイアウト
        LayoutInflater.from(this).inflate(
                R.layout.tab,     //レイアウト
                tabHost.getTabContentView(), true);
        //タブを追加
        tabHost.addTab(tabHost.newTabSpec("tab1")   //
                .setIndicator("ホーム")   //タブタイトル
                .setContent(R.id.tabBody1)); //タブの内容



Tab関連クラス


■TabActivity

Androidでタブ画面を作るには、TabActivityというActivityが提供されています。
◇TabActivity主なメソッド
  public TabHost getTabHost ()  TabActivityのTabHostを取得
  public TabWidget getTabWidget () TabActivity のTabWidgetを取得

  public void setDefaultTab (String tag) タグ名からデフォルトタブを設定
  public void setDefaultTab (int index)  indexからデフォルトタブを設定


■TabHost:名前の通り、Tabを格納(Host)する容器
TabActivity.getTabHostメソッドで取得できる
TabHostクラスに3つのインナークラスやインタフェースがあります。
TabHost.TabSpec    :タブをあらわすクラス
TabHost.TabContentFactory:タブコンテンツを生成するファクトリ(Interface)
TabHost.OnTabChangeListener:タブが変更されたリスナー。このインタフェースを実装することで、タブが変更された時の処理を行うことができます。


◇TabHostの主なメソッド
  public void addTab (TabHost.TabSpec tabSpec) タブを追加、例えば、
  public void clearAllTabs () すべてのタブを削除
  public int getCurrentTab ()    現在のタブのindex値を取得
  public String getCurrentTabTag ()    現在のタブのタグ名を取得
  public View getCurrentTabView ()    現在のタブのViewを取得
  public View getCurrentView ()    現在のViewを取得
  public FrameLayout getTabContentView () Tab ContentのFrameLayoutを取得
  public TabWidget getTabWidget ()    TabWidgetを取得
  public void setCurrentTab (int index)       現在のタブを設定
  public void setCurrentTabByTag (String tag) 現在のタブを設定
  public void setOnTabChangedListener (TabHost.OnTabChangeListener l) Tabが変更された時のイベントリスナー設定


◇TabHost.TabSpecの主なメソッド
  public String getTag ()
  //Content:Tabに格納する内容(中身)
  public TabHost.TabSpec setContent(int viewId)
  public TabHost.TabSpec setContent(Intent intent)
  public TabHost.TabSpec setContent(TabContentFactory factory)
  //Indicator:タブ上に表示される文字やアイコンを表すもの
  public TabHost.TabSpec setIndicator(CharSequence label)
  public TabHost.TabSpec setIndicator(CharSequence label, Drawable icon)
  public TabHost.TabSpec setIndicator(View view)


レイアウト定義


tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent" android:layout_height="match_parent">
    <LinearLayout android:layout_height="wrap_content" android:id="@+id/tabBody1" android:layout_width="match_parent" android:orientation="vertical">
        <CheckBox android:text="CheckBox" android:id="@+id/checkBox1" android:layout_width="wrap_content" android:layout_height="wrap_content"></CheckBox>
        
        <TextView android:text="タブ1です" android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
    </LinearLayout>
    <LinearLayout android:layout_height="wrap_content" android:id="@+id/tabBody2" android:layout_width="match_parent">
        <Button android:text="Button" android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
        <TextView android:text="タブ2です" android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
    </LinearLayout>
</LinearLayout>



Activityクラス



MyTabActivity.java
package com.syboos.android;

import android.app.TabActivity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TextView;

public class MyTabActivity extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.main);    //コメントアウト
        
        TabHost tabHost = getTabHost();
        LayoutInflater.from(this).inflate(
                R.layout.tab,     //レイアウト
                tabHost.getTabContentView(), true);
        
        tabHost.addTab(tabHost.newTabSpec("tab1")   
                .setIndicator("ホーム")  
                .setContent(R.id.tabBody1));
        
        tabHost.addTab(tabHost.newTabSpec("tab2")   
                .setIndicator("このアプリについて")   
                .setContent(R.id.tabBody2));
        
        tabHost.addTab(tabHost.newTabSpec("tab3")   
                .setIndicator("動的なタブ")
                .setContent(new MyTabContentFactory(this)));
        
    }
    
    
    /**
     * タブの内容を生成するクラス(Factory)
     *
     */
    class MyTabContentFactory implements TabHost.TabContentFactory {
        private Context context;
        
        public MyTabContentFactory(Context context) {
            this.context = context;
        }
        
        public View createTabContent(String tag) {
                    
            //テキスト
            TextView textView = new TextView(context);
            textView.setText("テキスト");
                        
            return textView;
        }
    }
}


結果確認


こんな感じです。

有关作者
Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。

Sponsored Link


Comments

用户名 (required)

Email (will not be published) (required)

URL

Evaluation