android 之 TabHost

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));