【Android】FragmentTabHostを使用したタブの作成

FragmentTabHostはFragmentをタブで切り替えるためのViewです。

タブの作成は以前TabActivityを使っていましたが、現在は非推奨になっているのでFragmentTabHostの使用をおすすめします。

また、Android 1.6から利用することができるものとなっています。

今回はFragmentにタブを表示する方法と、Fragment内での子Fragmentにタブを表示する方法を書きます。

Fragmentにタブを表示

---

レイアウトの作成

<android.support.v4.app.FragmentTabHost
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TabWidget
        android:id="@android:id/tabs"
        android:layout_alignParentBottom="true"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

        <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="0dp"
        android:layout_height="0dp"/>

        <FrameLayout
        android:id="@+id/content"
        android:layout_alignParentTop="true"
        android:layout_above="@android:id/tabs"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>
    </RelativeLayout>
</android.support.v4.app.FragmentTabHost>

Activityの追加

public class MainActivity extends FragmentActivity {

    .
    .
    .

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        /* ---------- START 追加部分 ----------  */
        FragmentTabHost host = (FragmentTabHost) findViewById(android.R.id.tabhost);
        host.setup(this, getSupportFragmentManager(), R.id.content);
 
        TabSpec tabSpec1 = host.newTabSpec("tab1");
        Button button1 = new Button(this);
        button1.setBackgroundResource(R.drawable.tab_left);
        tabSpec1.setIndicator(button1);
        Bundle bundle1 = new Bundle();
        bundle1.putString("name", "Tab1");
        host.addTab(tabSpec1, SampleFragment.class, bundle1);
         
        TabSpec tabSpec2 = host.newTabSpec("tab2");
        Button button2 = new Button(this);
        button2.setBackgroundResource(R.drawable.tab_center);
        tabSpec2.setIndicator(button2);
        Bundle bundle2 = new Bundle();
        bundle2.putString("name", "Tab2");
        host.addTab(tabSpec2, SampleFragment.class, bundle2);
         
        TabSpec tabSpec3 = host.newTabSpec("tab3");
        Button button3 = new Button(this);
        button3.setBackgroundResource(R.drawable.tab_right);
        tabSpec3.setIndicator(button3);
        Bundle bundle3 = new Bundle();
        bundle3.putString("name", "Tab3");
        host.addTab(tabSpec3, SampleFragment.class, bundle3);
        /* ---------- END 追加部分 ----------  */
    }

    .
    .
    .

}

Fragment内での子Fragmentにタブを表示

---

レイアウトは上記のものと変わらないのですが、Fragmentに追加するコードのhost.setup( ... );の部分一行を変更する必要があります。

getActivity()とgetChildFragmentManager()を使用します。

Fragmentの追加

public class BlankFragment extends Fragment {
    
    .
    .
    .

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_blank, container, false);

        /* ---------- START 追加部分 ----------  */
        FragmentTabHost host = (FragmentTabHost) view.findViewById(android.R.id.tabhost);
        // 「getActivity()」、「getChildFragmentManager()」を使用
        host.setup(getActivity(), getChildFragmentManager(), R.id.content);

        TabSpec tabSpec1 = host.newTabSpec("tab1");
        Button button1 = new Button(this);
        button1.setBackgroundResource(R.drawable.tab_left);
        tabSpec1.setIndicator(button1);
        Bundle bundle1 = new Bundle();
        bundle1.putString("name", "Tab1");
        host.addTab(tabSpec1, SampleFragment.class, bundle1);
         
        TabSpec tabSpec2 = host.newTabSpec("tab2");
        Button button2 = new Button(this);
        button2.setBackgroundResource(R.drawable.tab_center);
        tabSpec2.setIndicator(button2);
        Bundle bundle2 = new Bundle();
        bundle2.putString("name", "Tab2");
        host.addTab(tabSpec2, SampleFragment.class, bundle2);
         
        TabSpec tabSpec3 = host.newTabSpec("tab3");
        Button button3 = new Button(this);
        button3.setBackgroundResource(R.drawable.tab_right);
        tabSpec3.setIndicator(button3);
        Bundle bundle3 = new Bundle();
        bundle3.putString("name", "Tab3");
        host.addTab(tabSpec3, SampleFragment.class, bundle3);
        /* ---------- END 追加部分 ----------  */

        return view;
    }

    .
    .
    .

}

---

参考サイト：

Android Tips #38 FragmentTabHost を使って Fragment をタブで切り替える ｜ Developers.IO