AndroidでTabHostを使う方法｜タブ切り替え画面の実装手順をわかりやすく解説

TabHostとは？

AndroidにおけるTabHostは、複数のタブをまとめて管理するためのコンテナウィジェットです。各タブには、プロジェクトの要件に応じてFragment（フラグメント）やActivity（アクティビティ）を割り当てることができ、ユーザーはタブを左右にスワイプして直感的に画面を切り替えられます。

本記事では、AndroidアプリでTabHostを実際に使用する方法を、サンプルコード付きの手順形式で解説します。

実装手順

ステップ1：新しいプロジェクトを作成する

まず、Android Studioで新しいプロジェクトを作成しましょう。「File」→「New Project」を選択し、必要な項目をすべて入力してプロジェクトを作成します。

ステップ2：activity_main.xml にコードを追加する

res/layout/activity_main.xml に、以下のコードを追加してください。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <TabHost android:id="@+id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <TabWidget android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"/>
            <FrameLayout android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent">
                <LinearLayout
                    android:id="@+id/tab1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <Button
                        android:id="@+id/button"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="tab1"/>
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <Button
                        android:id="@+id/button2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="tab2"/>
                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>
</LinearLayout>

上記のレイアウトでは、FrameLayoutをTabWidgetの子要素として宣言しています。Android公式ドキュメントによると、TabWidgetのコンテンツ領域にはFrameLayoutを使用することが必須となっているためです。

ステップ3：MainActivity.java にコードを追加する

src/MainActivity.java に、以下のコードを追加します。

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.RadioButton;
import android.widget.TabHost;
public class MainActivity extends AppCompatActivity {
    RadioButton radioButton;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TabHost tabs = (TabHost) findViewById(R.id.tabhost);
        tabs.setup();
        TabHost.TabSpec spec = tabs.newTabSpec("tag1");
        spec.setContent(R.id.tab1);
        spec.setIndicator("First");
        tabs.addTab(spec);
        spec = tabs.newTabSpec("tag2");
        spec.setContent(R.id.tab2);
        spec.setIndicator("second");
        tabs.addTab(spec);
    }
}

このコードでは、newTabSpec()でタブを生成し、setContent()で表示内容を紐付け、setIndicator()でタブに表示するラベルを設定したうえで、addTab()によってTabHostへ追加しています。

ステップ4：AndroidManifest.xml の変更は不要

今回のサンプルでは、AndroidManifest.xml ファイルを変更する必要はありません。

アプリを実行して確認しよう

それでは、アプリケーションを実行してみましょう。ここでは、実際のAndroid端末がパソコンに接続されているものとして説明を進めます。Android Studioからアプリを実行するには、プロジェクト内のいずれかのアクティビティファイルを開き、ツールバーにある「Run」アイコンをクリックしてください。表示された選択肢から接続中のモバイルデバイスを選択すると、スマートフォンの画面にアプリが起動します。

次に、2つ目のタブ「Second」をタップしてみてください。以下のように、タブの内容が切り替わって表示されれば成功です。