Android中的TabHost

介紹 

有時，我們想在一個window中顯示多個視圖，這時就需要用到Tab容器。在Android裡它叫TabHost。

使用TabHost有兩種方式：

1. 在相同的activity中使用TabHost導航多個視圖
2. 使用TabHost導航多個Activity(通過intents)

Tab應用的結構TabHost的Activity的結構如下:先看個樣本：layout檔案：

<?xml version="1.0" encoding="utf-8"?>    <TabHost android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:id="@+id/tabHost"    xmlns:android="http://schemas.android.com/apk/res/android"    >    <TabWidget    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:id="@android:id/tabs"    />     <FrameLayout     android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:id="@android:id/tabcontent"     >     <LinearLayout     android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:id="@+id/tab1"    android:orientation="vertical"    android:paddingTop="60px"     >     <TextView      android:layout_width="fill_parent"     android:layout_height="100px"     android:text="This is tab1"    android:id="@+id/txt1"    />             </LinearLayout>          <LinearLayout     android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:id="@+id/tab2"    android:orientation="vertical"    android:paddingTop="60px"     >     <TextView      android:layout_width="fill_parent"     android:layout_height="100px"     android:text="This is tab 2"    android:id="@+id/txt2"    />        </LinearLayout>           <LinearLayout     android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:id="@+id/tab3"    android:orientation="vertical"    android:paddingTop="60px"     >     <TextView      android:layout_width="fill_parent"     android:layout_height="100px"     android:text="This is tab 3"    android:id="@+id/txt3"    />        </LinearLayout>     </FrameLayout>        </TabHost>

Activity代碼：

public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);TabHost tabHost=(TabHost)findViewById(R.id.tabHost);tabHost.setup();TabSpec spec1=tabHost.newTabSpec("Tab 1");spec1.setContent(R.id.tab1);spec1.setIndicator("Tab 1");TabSpec spec2=tabHost.newTabSpec("Tab 2");spec2.setIndicator("Tab 2");spec2.setContent(R.id.tab2);TabSpec spec3=tabHost.newTabSpec("Tab 3");spec3.setIndicator("Tab 3");spec3.setContent(R.id.tab3);tabHost.addTab(spec1);tabHost.addTab(spec2);tabHost.addTab(spec3);}

1. 這裡通過TabSpecs類建立Tab
2. 使用setIndicator方法設定tab的文字
3. 使用setContent設定tab的內容
4. 如果你使用TabActivity作為你的Activity的基類，你不用調用TabHost.Setup()方法。

運行後看起來是這樣的：同時還可以指定indicator為一個view：

TabSpec spec1=tabHost.newTabSpec("Tab 1");spec1.setContent(R.id.tab1);TextView txt=new TextView(this);txt.setText("Tab 1");txt.setBackgroundColor(Color.RED);spec1.setIndicator(txt);

設定tab的內容上面的例子展示了使用tab顯示不同的layout資源。如果我們需要通過tab導航到不同的Activity，該怎麼辦？這種情況，我們需要有一個activity作為應用的根activity。這個Activity包含TabHost，通過intents導航不同的activity。注意：根Activity必須繼承TabActivity。代碼如下：Layout：

<?xml version="1.0" encoding="utf-8"?>    <TabHost android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:id="@android:id/tabhost"    xmlns:android="http://schemas.android.com/apk/res/android"    >    <TabWidget    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:id="@android:id/tabs"    />     <FrameLayout     android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:id="@android:id/tabcontent"     >     </FrameLayout>    </TabHost>

Activity：

public class TabDemo extends TabActivity {    /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);        TabHost tabHost=getTabHost();        // no need to call TabHost.Setup()                        //First Tab        TabSpec spec1=tabHost.newTabSpec("Tab 1");        spec1.setIndicator("Tab 1",getResources().getDrawable(R.drawable.sun));        Intent in1=new Intent(this, Act1.class);        spec1.setContent(in1);                TabSpec spec2=tabHost.newTabSpec("Tab 2");        spec2.setIndicator("Tab 2",getResources().getDrawable(R.drawable.chart));        Intent in2=new Intent(this,Act2.class);        spec2.setContent(in2);        tabHost.addTab(spec2);        tabHost.addTab(spec3);    }}

運行效果

在運行時添加Tab 在運行時我們可以通過調用TabSepc.setContent(TabContentFactory)方法添加Tab。

TabSpec spec1=tabHost.newTabSpec("Tab 1");        spec1.setIndicator("Tab 1",getResources().getDrawable(R.drawable.sun));        spec1.setContent(new TabContentFactory() {      @Override   public View createTabContent(String tag) {    // TODO Auto-generated method stub        return (new AnalogClock(TabDemo.this));   }  });