android基礎知識27：TabHost01——簡單應用

在Android應用中，經常會用到TabHost選項卡，這裡借花獻佛，把apiDemo例子中的使用方法列舉出來，，，
常用的方法有三種：
1. 從一個layout id建立各個tab頁

public class Tabs1 extends TabActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        TabHost tabHost = getTabHost();                LayoutInflater.from(this).inflate(R.layout.tabs1, tabHost.getTabContentView(), true);        tabHost.addTab(tabHost.newTabSpec("tab1")                .setIndicator("tab1")                .setContent(R.id.view1));        tabHost.addTab(tabHost.newTabSpec("tab3")                .setIndicator("tab2")                .setContent(R.id.view2));        tabHost.addTab(tabHost.newTabSpec("tab3")                .setIndicator("tab3")                .setContent(R.id.view3));    }}

2. 動態建立一個view來做為tab頁的內容

public class Tabs2 extends TabActivity implements TabHost.TabContentFactory {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        final TabHost tabHost = getTabHost();        tabHost.addTab(tabHost.newTabSpec("tab1")                .setIndicator("tab1", getResources().getDrawable(R.drawable.star_big_on))                .setContent(this));        tabHost.addTab(tabHost.newTabSpec("tab2")                .setIndicator("tab2")                .setContent(this));        tabHost.addTab(tabHost.newTabSpec("tab3")                .setIndicator("tab3")                .setContent(this));    }    /** {@inheritDoc} */    public View createTabContent(String tag) {        final TextView tv = new TextView(this);        tv.setText("Content for tab with tag " + tag);        return tv;    }}

3. 傳遞一個intent來傳遞參數，並以新啟動的activity做為tab頁的內容，這個應該是比較方便傳遞參數的。。。

public class Tabs3 extends TabActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        final TabHost tabHost = getTabHost();        tabHost.addTab(tabHost.newTabSpec("tab1")                .setIndicator("list")                .setContent(new Intent(this, List1.class)));        tabHost.addTab(tabHost.newTabSpec("tab2")                .setIndicator("photo list")                .setContent(new Intent(this, List8.class)));                // This tab sets the intent flag so that it is recreated each time        // the tab is clicked.        tabHost.addTab(tabHost.newTabSpec("tab3")                .setIndicator("destroy")                .setContent(new Intent(this, Controls2.class)                        .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)));    }}

TabHost的實現有兩種方式，第一種繼承TabActivity，從TabActivity中用getTabHost()方法擷取TabHost。各個Tab中的內容在布局檔案中定義就行了。

mainActivity.xml

private TabHost myTabHost;      @Override      public void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          //setContentView(R.layout.main);         myTabHost = this.getTabHost();          LayoutInflater.from(this).inflate(R.layout.main,                  myTabHost.getTabContentView(), true);          myTabHost.addTab(myTabHost                  .newTabSpec("選項卡1")                  .setIndicator("選項卡1",                          getResources().getDrawable(R.drawable.img01))                  .setContent(R.id.ll01));          myTabHost.addTab(myTabHost                  .newTabSpec("選項卡2")                  .setIndicator("選項卡2",                          getResources().getDrawable(R.drawable.img02))                  .setContent(R.id.ll01));          myTabHost.addTab(myTabHost                  .newTabSpec("選項卡3")                  .setIndicator("選項卡3",                          getResources().getDrawable(R.drawable.img03))                  .setContent(R.id.ll03));      }  

Tab內容布局檔案：

<?xml version="1.0" encoding="utf-8"?>  <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:orientation="vertical" android:layout_width="fill_parent"      android:layout_height="fill_parent">      <LinearLayout android:id="@+id/ll01" android:layout_width="fill_parent"          android:layout_height="fill_parent" android:gravity="center_horizontal"          android:orientation="vertical">          <EditText android:id="@+id/widget34" android:layout_width="fill_parent"              android:layout_height="wrap_content" android:text="EditText"              android:textSize="18sp">          </EditText>          <Button android:id="@+id/widget30" android:layout_width="wrap_content"              android:layout_height="wrap_content" android:text="Button">          </Button>      </LinearLayout>      <LinearLayout android:id="@+id/ll02" android:layout_width="fill_parent"          android:layout_height="fill_parent" android:gravity="center_horizontal"          android:orientation="vertical">          <AnalogClock android:id="@+id/widget36"              android:layout_width="wrap_content" android:layout_height="wrap_content">          </AnalogClock>      </LinearLayout>      <LinearLayout android:id="@+id/ll03" android:layout_width="fill_parent"          android:layout_height="fill_parent" android:gravity="center_horizontal"          android:orientation="vertical">          <RadioGroup android:id="@+id/widget43"              android:layout_width="166px" android:layout_height="98px"              android:orientation="vertical">              <RadioButton android:id="@+id/widget44"                  android:layout_width="wrap_content" android:layout_height="wrap_content"                  android:text="RadioButton">              </RadioButton>              <RadioButton android:id="@+id/widget45"                  android:layout_width="wrap_content" android:layout_height="wrap_content"                  android:text="RadioButton">              </RadioButton>          </RadioGroup>      </LinearLayout>  </FrameLayout>  

第二種方式，不繼承TabActivity，在布局檔案中定義TabHost即可，但是TabWidget的id必須是@android:id/tabs，FrameLayout的id必須是@android:id/tabcontent。

<?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 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 android:id="@android:id/tabs"                 android:orientation="horizontal"                android:layout_width="fill_parent"                android:layout_height="wrap_content">              </TabWidget>                          <FrameLayout android:id="@android:id/tabcontent"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content">                        <TextView android:id="@+id/view1"                          android:layout_width="fill_parent"                          android:layout_height="fill_parent" android:text="Tab1"/>                      <TextView android:id="@+id/view2"                          android:layout_width="fill_parent"                          android:layout_height="fill_parent" android:text="Tab2"/>                      <TextView android:id="@+id/view3"                          android:layout_width="fill_parent"                          android:layout_height="fill_parent" android:text="Tab3"/>               </FrameLayout>                      </LinearLayout>      </TabHost>  </LinearLayout>  

mainActivity

@Override      protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.main);          TabHost tabHost = (TabHost) findViewById(R.id.tabhost);          tabHost.setup();          TabWidget tabWidget = tabHost.getTabWidget();          tabHost.addTab(tabHost                  .newTabSpec("tab1")                  .setIndicator("tab1",                          getResources().getDrawable(R.drawable.img01))                  .setContent(R.id.view1));          tabHost.addTab(tabHost                  .newTabSpec("tab2")                  .setIndicator("tab2",                          getResources().getDrawable(R.drawable.img02))                  .setContent(R.id.view2));          tabHost.addTab(tabHost                  .newTabSpec("tab3")                  .setIndicator("tab3",                          getResources().getDrawable(R.drawable.img03))                  .setContent(R.id.view3));  

執行個體代碼：Tab.rar

參考資料：

Android學習筆記-TabHost選項卡使用

TabHost兩種實現方式

Tab與TabHost