使用TabHost布局主界面

最近接手了一个项目是使用TabHost对主界面进行布局。实现界面tab之间的切换，接下来就仔细来看看。

先看一下界面效果图：

这是一个非常常见的手机界面布局。

TabHost的一个XML文件，TabHost标签必须包含FrameLayout跟TabWidget两个组件。这里需要注意的是这两个组件的ID写法跟普通的ID写法有所不同，好了，直接看代码吧。

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
        <!-- TabHost必须包含一个 TabWidget和一个FrameLayout-->
        <TabHost
            android:id="@android:id/tabhost"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent">


                <!-- FrameLayout的id属性必须为 @android:id/tabcontent-->
                <FrameLayout
                    android:id="@android:id/tabcontent"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:layout_gravity="center"
                    >
                    <TextView
                        android:id="@+id/index"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="首页"
                        android:gravity="center"
                        android:textSize="18sp"
                        />
                    <TextView
                        android:id="@+id/vedio"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="视频"
                        android:gravity="center"
                        android:textSize="18sp"
                        />
                    <TextView
                        android:id="@+id/find"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="发现"
                        android:gravity="center"
                        android:textSize="18sp"
                        />

                    <TextView
                        android:id="@+id/mine"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="我的"
                        android:gravity="center"
                        android:textSize="18sp"
                        />

                </FrameLayout>


                <!-- TabWidget的id属性必须为 @android:id/tabs-->
                <TabWidget
                    android:id="@android:id/tabs"
                    android:orientation="horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>
        </TabHost>
    </LinearLayout>

java文件内容：

package mTestv1.example.application;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TabHost;

public class Tabhostv1Page extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tabhostv1page_activity);
        // 获取TabHost对象
        TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost);
        // 如果没有继承TabActivity时，通过该种方法加载启动tabHost
        tabHost.setup();
        tabHost.addTab(tabHost.newTabSpec("index_tab").setIndicator("首页")
                .setContent(R.id.index));

        tabHost.addTab(tabHost.newTabSpec("vedio_tab").setIndicator("视频")
                .setContent(R.id.vedio));

        tabHost.addTab(tabHost.newTabSpec("find_tab").setIndicator("发现")
                .setContent(R.id.find));

        tabHost.addTab(tabHost.newTabSpec("mine_tab").setIndicator("我的")
                .setContent(R.id.mine));
    }
}

通过这部分代码可以实现上面的点击切换效果，在这个实际的项目里面，他们是使用RadioButton实现TabWidget的功能，后面再继续分享。