【android アプリ 開発】 TabWidget 作成 －１

■TabWidget　作成　－１

TabWidgetは Tabを利用して他のviewに移動できるウィジェットです。

まず、TabWidgetの実行結果を見ましょう。

[ TabWidgetの実行結果 ]

１．次のようにEclipseから新しいプロジェクトを生成します。

２．res -> layout -> main.xml を開いて次のように編集します。

<?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@android:id/tabhost"     android:layout_width="fill_parent"     android:layout_height="fill_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">             <TextView                 android:id="@+id/textview1"                 android:layout_width="fill_parent"                 android:layout_height="fill_parent"                 android:text="this is a tab" />             <TextView                 android:id="@+id/textview2"                 android:layout_width="fill_parent"                 android:layout_height="fill_parent"                 android:text="this is another tab" />             <TextView                 android:id="@+id/textview3"                 android:layout_width="fill_parent"                 android:layout_height="fill_parent"                 android:text="this is a third tab" />         </FrameLayout>     </LinearLayout> </TabHost>

TabHost 中に TabWidgetが存在するのが確認できます。


３．src -> my.HelloTabWidget -> HelloTabWidget.java を開いて次のように編集します。

package my.HelloTabWidget; import android.app.TabActivity; import android.os.Bundle; import android.widget.TabHost; public class HelloTabWidget extends TabActivity  {  TabHost mTabHost = null;     /** Called when the activity is first created. */     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.main);            mTabHost = getTabHost();                mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB 1").setContent(R.id.textview1));         mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("TAB 2").setContent(R.id.textview2));         mTabHost.addTab(mTabHost.newTabSpec("tab_test3").setIndicator("TAB 3").setContent(R.id.textview3));                mTabHost.setCurrentTab(0);     } }

上のコードの太字の部分について説明します。

TabHost – Tabで構成されているviewを格納する為のコンテイナー(Container)
addTab() – Tabを追加
newTabSpec() – Tabの Spec( indicator,content,tag )を作成。括弧の中の引数”tab_test1”等がtag。
setCurrentTab() – 現在のタブを決定。 初期値は先頭タブ (インデッス 0)が指定されます。


４．Ctrl + F11 で実行します。

[ ２番目のタブが選択された状態 ]