詳解Android應用中使用TabHost組件進行布局的基本方法_Android

TabHost布局檔案

我們先來瞭解一下布局檔案的基本內容：
1. 根標籤及id

設定Android內建id : XML布局檔案中, 可以使用 標籤設定, 其中的id 需要引用 android的內建id :

android:id=@android:id/tabhost ;

getHost()擷取前提 : 設定了該id之後, 在Activity介面可以使用 getHost(), 擷取這個TabHost 視圖對象;

樣本 :

複製代碼 代碼如下:

<tabhost android:id="@android:id/tabhost" android:layout_height="match_parent" android:layout_width="match_parent"></tabhost>

2. TabWidget組件

選項卡切換 : 該組件是選項卡切換按鈕, 通過點擊該組件可以切換選項卡;

設定android內建id : 這個組件的id要設定成android的內建id : android:id=@android:id/tabs ;

TabHost必備組件 : 該組件與FrameLayout組件是TabHost組件中必備的兩個組件;

切換按鈕下方顯示 : 如果想要將按鈕放到下面, 可以將該組件定義在下面, 但是注意,FrameLayout要設定android:layout_widget = 1;

設定TabWidget大小 : 如果想要設定該按鈕組件的大小, 可以設定該組件與FrameLayout組件的權重;

樣本 :

複製代碼 代碼如下:

<tabwidget android:id="@android:id/tabs" android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="horizontal/"></tabwidget>

3. FrameLayout組件

組件作用 : 該組件中定義的子組件是TabHost中每個頁面顯示的選項卡, 可以將TabHost選項卡顯示的視圖定義在其中;

設定android內建id : 這個組件的id要設定成android的內建的id : android:id=@android:id/tabcontent ;

樣本 :

複製代碼 代碼如下:

<framelayout android:id="@android:id/tabcontent" android:layout_height="fill_parent" android:layout_weight="1" android:layout_width="fill_parent"></framelayout>

樣本

上圖為最終效果圖
代碼結構圖

main.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:id="@+id/hometabs"  android:orientation="vertical"  android:layout_width="fill_parent"  android:layout_height="fill_parent">  <!-- TabHost必須包含一個 TabWidget和一個FrameLayout-->  <TabHost android:id="@+id/tabhost"   android:layout_width="fill_parent"   android:layout_height="wrap_content"   >   <LinearLayout    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <!-- TabWidget的id屬性必須為 @android:id/tabs-->       <TabWidget android:id="@android:id/tabs"     android:orientation="horizontal"     android:layout_width="fill_parent"     android:layout_height="wrap_content">    </TabWidget>    <!-- FrameLayout的id屬性必須為 @android:id/tabcontent-->     <FrameLayout android:id="@android:id/tabcontent"      android:layout_width="fill_parent"      android:layout_height="fill_parent">      <TextView android:id="@+id/view1"       android:layout_width="fill_parent"       android:layout_height="fill_parent"/>      <TextView android:id="@+id/view2"       android:layout_width="fill_parent"       android:layout_height="fill_parent"/>      <TextView android:id="@+id/view3"       android:layout_width="fill_parent"       android:layout_height="fill_parent"/>     </FrameLayout>       </LinearLayout>  </TabHost> </LinearLayout> 

java代碼如下

package cn.com.tagHost.test;  import android.app.Activity; import android.os.Bundle; import android.widget.TabHost; import android.widget.TabWidget;  public class TagHostTest2 extends Activity {  @Override  public void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   setContentView(R.layout.main);   // 擷取TabHost對象   TabHost tabHost = (TabHost) findViewById(R.id.tabhost);   // 如果沒有繼承TabActivity時，通過該種方法載入啟動tabHost   tabHost.setup();   tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("第一個標籤",     getResources().getDrawable(R.drawable.icon)).setContent(     R.id.view1));    tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("第三個標籤")     .setContent(R.id.view3));    tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("第二個標籤")     .setContent(R.id.view2));  } } 

運行得到正確的結果。
廢話連篇：這裡需要注意的是
第一：布局檔案的格式。以及TabWidget和FrameLayout的id屬性值。
第二：TabWidget代表的是標籤部分，FrameLayout代表的點擊標籤後看到的內容部分。FrameLayout裡面聲明的組件意為具備成為標籤內容的資格，具體的還要在代碼中具體指定。
你是否也想要這種結果呢。讓標籤在下部分顯示

那麼你只需要給main.xml進行下布局修改就可以了。

main.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:id="@+id/hometabs" android:orientation="vertical"  android:layout_width="fill_parent" android:layout_height="fill_parent">  <!-- TabHost必須包含一個 TabWidget和一個FrameLayout-->  <TabHost android:id="@+id/tabhost" android:layout_width="fill_parent"   android:layout_height="wrap_content">   <LinearLayout android:orientation="vertical"    android:layout_width="fill_parent" android:layout_height="fill_parent">     <!-- FrameLayout的id屬性必須為 @android:id/tabcontent-->    <FrameLayout android:id="@android:id/tabcontent"     android:layout_width="fill_parent" android:layout_height="fill_parent">     <TextView android:id="@+id/view1" android:layout_width="fill_parent"      android:layout_height="fill_parent"      android:text="hello baby!"      />     <TextView android:id="@+id/view2" android:layout_width="fill_parent"      android:layout_height="fill_parent" />     <TextView android:id="@+id/view3" android:layout_width="fill_parent"      android:layout_height="fill_parent" />    </FrameLayout>    <RelativeLayout android:layout_width="fill_parent"     android:layout_height="fill_parent">      <!-- TabWidget的id屬性必須為 @android:id/tabs-->     <TabWidget android:id="@android:id/tabs"      android:orientation="horizontal" android:layout_width="fill_parent"      android:layout_height="wrap_content"      android:layout_alignParentBottom="true"      android:paddingBottom="0dp"      >     </TabWidget>    </RelativeLayout>   </LinearLayout>  </TabHost> </LinearLayout> 

為了讓標籤和父容器底部持平，我們使用了android:layout_alignParentBottom="true"，該屬性只有在RelativeLayout布局中才會存在哦、這也是為什麼我們將tabWidget放入一個RelativeLayout中的原因。
此外，在lineaerLayout布局中，TabWidget和FrameLayout的位置可是調換了哦。