新人成長記録21th

最近は便利なレイアウトがないか、時間がある時に探しているのですが、
TabHostというレイアウトが便利かと思いましたので紹介します

tabhost

TabHostとは

タブ付きのウィンドウビューのコンテナを提供してくれます
シンプルで、実装も比較的に簡単です

実装方法ですが、TabHostはTabWidgetとFrameLayoutの2つが含まれている必要がありますので以下のようにします

<?xml version="1.0" encoding="utf-8"?>
<TabHost
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >
        </FrameLayout>
    </LinearLayout>
</TabHost>

FrameLayouの部分がコンテンツを表示する箇所となります

固定のレイアウトを表示させるのならば、以下のようにFrameLayoutに表示したいレイアウト分の記述すれば大丈夫です

<FrameLayout
    android:id="@android:id/tabcontent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <LinearLayout
        android:id="@+id/frame1"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="tab1"
            />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/frame2"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="tab2"
            />
    </LinearLayout>
</FrameLayout>

1つ目のタブはframe1、2つ目のタブはframe2となります

プログラムに関しては以下のようになります

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		TabHost host = (TabHost) findViewById(R.id.tabhost);
		host.setup();

		TabHost.TabSpec spec1 = host.newTabSpec("tab1");
		spec1.setIndicator("tab1");
		spec1.setContent(R.id.frame1);
		host.addTab(spec1);

		TabHost.TabSpec spec2 = host.newTabSpec("tab2");
		spec2.setIndicator("tab2");
		spec2.setContent(R.id.frame2);
		host.addTab(spec2);

		host.setOnTabChangedListener(this);
	}

	@Override
	public void onTabChanged(String tabId) {
		Log.d("debug", tabId);
	}

findViewByIdでTabHostを取得する場合には、タブを追加する前にsetup()を実行しないとエラーが発生します
findViewById以外では、extendsでTabActvityに拡張してgetTabHost()で取得できます
ただTabActivityは、deprecatedとなっているので、使うべきではないと思います

TabSpecを取得する時に使用するnewTabSpecの引数は、そのタブの認識に使います
setIndicatorでは、タブに表示される文字列を引数としています
setContentでは、FrameLayout内に記述したレイアウトのIDを指定します

onTabChangedは、タブが切り替わるときに呼ばれるコールバックです
TabHost.OnTabChangeListenerを実装することでOverrideできます
ログ上では、newTabSpecで設定した値が、取得できることを確認できます

終わりに

今回のような便利で知らないレイアウトはまだあると思いますので、今後も探して開発に反映していきたいです

火曜日担当:poppy



アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833(平日 10:00~17:00)

お問い合わせフォーム