Android TabLayoutの例

このチュートリアルでは、TabLayoutを使用して4つのタブ（「Android」、「Windows」、「Apple」、「BlackBerry」）をレンダリングする方法を示します。各タブには、簡単なメッセージを表示するテキストビューが含まれています。

P.S This project is developed in Eclipse 3.7, and tested with Android 2.3.3.

1. タブ画像

「res/drawable」フォルダに4つのタブ画像を配置します。このチュートリアルで使用されているタブ画像は、Android icon guidelineに準拠していません。申し訳ありませんが、デザインが苦手です:)。

directory structure

2. XMLのタブ画像

4つのXMファイルを作成して、各タブに使用する画像を指定し、同じ「res/drawable」フォルダーに配置します。

ファイル：icon_android_config.xml

ファイル：icon_apple_config.xml

ファイル：icon_blackberry_config.xml

ファイル：icon_windows_config.xml

3. タブアクティビティ

4つのアクティビティクラスを作成し、タブがクリックされたときに使用するアクティビティを指定します。 4つのクラスすべてが同じことを行い、textviewコンポーネントを表示します。

ファイル：AndroidActivity.java

package com.example.android;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class AndroidActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is Android tab");
        setContentView(textview);
    }
}

ファイル：AppleActivity.java

package com.example.android;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class AppleActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is Apple tab");
        setContentView(textview);
    }
}

ファイル：BlackBerryActivity.java

package com.example.android;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class BlackBerryActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is BlackBerry tab");
        setContentView(textview);
    }
}

ファイル：WindowsActivity.java

package com.example.android;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class WindowsActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is Windows mobile tab");
        setContentView(textview);
    }
}

4. 主な活動

エントリポイントを作成し、TabHost、TabSpecなどの4つのタブアクティビティクラスの上にリンクします。

package com.example.android;

import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class MainActivity extends TabActivity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Resources ressources = getResources();
        TabHost tabHost = getTabHost();

        // Android tab
        Intent intentAndroid = new Intent().setClass(this, AndroidActivity.class);
        TabSpec tabSpecAndroid = tabHost
          .newTabSpec("Android")
          .setIndicator("", ressources.getDrawable(R.drawable.icon_android_config))
          .setContent(intentAndroid);

        // Apple tab
        Intent intentApple = new Intent().setClass(this, AppleActivity.class);
        TabSpec tabSpecApple = tabHost
          .newTabSpec("Apple")
          .setIndicator("", ressources.getDrawable(R.drawable.icon_apple_config))
          .setContent(intentApple);

        // Windows tab
        Intent intentWindows = new Intent().setClass(this, WindowsActivity.class);
        TabSpec tabSpecWindows = tabHost
          .newTabSpec("Windows")
          .setIndicator("", ressources.getDrawable(R.drawable.icon_windows_config))
          .setContent(intentWindows);

        // Blackberry tab
        Intent intentBerry = new Intent().setClass(this, BlackBerryActivity.class);
        TabSpec tabSpecBerry = tabHost
          .newTabSpec("Berry")
          .setIndicator("", ressources.getDrawable(R.drawable.icon_blackberry_config))
          .setContent(intentBerry);

        // add all tabs
        tabHost.addTab(tabSpecAndroid);
        tabHost.addTab(tabSpecApple);
        tabHost.addTab(tabSpecWindows);
        tabHost.addTab(tabSpecBerry);

        //set Windows tab as default (zero based)
        tabHost.setCurrentTab(2);
    }

}

5. Androidレイアウトファイル

ファイル：res / layout / main.xml

6. Androidマニフェスト

最後に、すべてを「AndroidManifest.xml」に入れ、4つのタブアクティビティクラスを定義し、「MainActivity」をエントリポイントとして設定します。

ファイル：AndroidManifest.xml

7. Demo

デフォルトでは、Windowsタブが選択されています。

android tab layout example

[Android]タブをクリックします。

android tab layout example

ソースコードをダウンロード

ダウンロード–Android-TabLayout-Example.zip（23 KB）

TOC

Android TabLayoutの例