タブ画面作成方法(Android3.x以上)

複数の画面をタブで切り替える方法にActionBarとFragmentを組み合わせて使う方法があります。

ただし、このタブ作成の方法はAPIレベルが13以上で有効です。

フラグメントのレイアウト設定

フラグメントとはタブ切り替えで表示される画面のことでその画面の数だけレイアウト用のxmlファイルが必要になります。

ここでは2つのタブを作りたいので2つxmlファイルを用意します。たとえばfragment1.xmlのような名前などをつけ、次のようなファイルを作成します。

fragment1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" >
    
    <TextView
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Fragment1" 
        android:textSize="30sp" />

</LinearLayout>

ここではフラグメントにテキストビューを作成しています。もう1つのフラグメントもこれと同じような内容を書いてfragment2.xmlのような名前で保存します。

では、次に作成したレイアウトから作られるフラグメントのソースコードを書きます。

たとえば、Fragment1.javaなどのような名前を付け次のようにフラグメントを定義します。

Fragment1.java

package com.MyApp.myapp;

import android.os.Bundle;
import android.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

//Fragmentクラスを拡張して独自のクラスを作る。
public class Fragment1 extends Fragment
{
    public View onCreateView(LayoutInflater inflater,ViewGroup container,
                                        Bundle savedInstanceState) 
    {
        return inflater.inflate(R.layout.fragment1, container, false);
            //レイアウトファイルからフラグメント画面を作成
    }
}

Fragmentクラスを拡張してFragment1クラスを定義しています。fragment2.xmlに対応するソースコードも同様に作ります。

アクションバーにタブを追加する

ここまででタブに追加するフラグメントを作ったので、次にそれらをActionBarクラスを使ってアクティビティに追加します。

アクティビティクラスのコードは以下のようになります。

MainActivity.java

package com.MyApp.myapp;

import android.app.ActionBar;
import android.app.Activity;
import android.app.FragmentTransaction;
import android.app.ActionBar.Tab;
import android.app.ActionBar.TabListener;
import android.app.Fragment;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity 
{

    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        final ActionBar actionBar = getActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        
        //バーにタブを追加する。
        actionBar.addTab(actionBar
            .newTab()
            .setText("Tab_1")        //タブに表示する題名
            .setTabListener(
                new MainTabListener<Fragment1>(this, "f1", Fragment1.class)
            )
        );

        //2つめのタブの作成
        actionBar.addTab(actionBar
            .newTab()
            .setText("Tab_2")
            .setTabListener(
                new MainTabListener<Fragment2>(this, "f2", Fragment2.class)
            )
        );
    }

    //独自のタブリスナーの定義
    public static class MainTabListener 
                                implements TabListener
    {
        private Fragment fragment;
        private final Activity activity;
        private final String tag;
        private final Class<T> cls;
        
        public MainTabListener(Activity activity, String tag, Class<T> cls)
        {
            this.activity = activity;
            this.tag = tag;
            this.cls = cls;
        }
        
        //タブが2度押しされたときの処理
        public void onTabReselected(Tab tab, FragmentTransaction ft){}
        
        //タブが選択(クリック)されたときの処理
        public void onTabSelected(Tab tab, FragmentTransaction ft)
        {
            if(fragment == null){
                /*フラグメントが未設定ならアクティビティに設置する。*/

                fragment = Fragment.instantiate(activity, cls.getName());
                ft.add(android.R.id.content, fragment, tag);
            }else{
                /*既にアクティビティに設置されているならattachメソッドで表示するだけでOK*/
                ft.attach(fragment);
            }
        }
        
        //タブの選択が解除されたときの処理
        public void onTabUnselected(Tab tab, FragmentTransaction ft)
        {
            //フラグメントが未設置でなければアクティビティからフラグメントを離す。
            if(fragment != null){
                ft.detach(fragment);
            }
        }
    }
    
}

onCreateメソッド内で次のように標準のアクションバーを取得しています。

        final ActionBar actionBar = getActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

そしてそのバーにタブを追加しているのが次のコードです。

        //バーにタブを追加する。
        actionBar.addTab(actionBar
            .newTab()
            .setText("Tab_1")        //タブに表示する題名
            .setTabListener(
                new MainTabListener<Fragment1>(this, "f1", Fragment1.class)
            )
        );

addTabメソッドでアクションバーにタブを追加し、そのタブで表示したいフラグメントをsetTabListenerを使って指定しています。

setTablistenrに渡したMainTabListenerはTabListenerクラスを拡張したものでタブのイベントを処理します。

この例ではMainTabListenerクラスでタブが押されたときと選択が解除されたときの処理を定義しています。

タブがクリックされると指定したフラグメントがアクティビティ内に表示されるようになります。