Android开发中用tabhost实现tab选项卡的切换

 TabHost是整个Tab的容器，包含TabWidget和FrameLayout两个部分，TabWidget是每个Tab的表情，FrameLayout是Tab内容。

实现方式有两种：

1、继承TabActivity

2、继承Activity类

方法一：继承TabActivity

从TabActivity中用getTabHost()方法获取TabHost，然后设置标签内容

布局：

1、TabHost　　　　必须设置android:id为@android:id/tabhost
2、TabWidget　　　必须设置android:id为@android:id/tabs
3、FrameLayout　  必须设置android:id为@android:id/tabcontent

否则将出现类似报错:

xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@android:id/tabhost"
     >
    
<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    
    <TabWidget 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@android:id/tabs"
        >TabWidget>
    
    <FrameLayout 
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@android:id/tabcontent"
        >
        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/widget_layout_red"
            android:background="#ff0000"
            android:orientation="vertical"
            >LinearLayout>
        
         <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/widget_layout_yellow"
            android:background="#FCD209"
            android:orientation="vertical"
            >LinearLayout>
        
    FrameLayout>
LinearLayout>
TabHost>

继承TabActivity

public class MainActivity extends TabActivity {
private TabHost tabhost;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.demo);
        
        //从TabActivity上面获取放置Tab的TabHost
        tabhost = getTabHost();

        tabhost.addTab(tabhost
                 //创建新标签one
                .newTabSpec("one")
                //设置标签标题
                .setIndicator("红色")
                //设置该标签的布局内容
                .setContent(R.id.widget_layout_red));
        tabhost.addTab(tabhost.newTabSpec("two").setIndicator("黄色").setContent(R.id.widget_layout_yellow));
    }


}

其中创建标签的方法：

 tabhost.addTab(tabhost
 .newTabSpec("one")
 .setIndicator("红色")
 .setContent(R.id.widget_layout_red));

也可以拆分写成：

 TabHost.TabSpec tab1 = tabhost.newTabSpec("one");
 tab1.setIndicator("红色");
 tab1.setContent(R.id.widget_layout_red);       
 tabhost.addTab(tab1);

预览：

点击"黄色"标签

 

 点击"红色"标签 

 

 方法二：继承Activity类

布局：

1、TabHost　　　　可自定义id
2、TabWidget　　　必须设置android:id为@android:id/tabs
3、FrameLayout　  必须设置android:id为@android:id/tabcontent

public class MainActivity extends Activity{
private TabHost tabhost;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.demo);
        
        //得到TabHost对象实例
        tabhost =(TabHost) findViewById(R.id.mytab);
        //调用 TabHost.setup()
        tabhost.setup();
        //创建Tab标签
        tabhost.addTab(tabhost.newTabSpec("one").setIndicator("红色").setContent(R.id.widget_layout_red));
        tabhost.addTab(tabhost.newTabSpec("two").setIndicator("黄色").setContent(R.id.widget_layout_yellow));
    
    }


}

 

注意的是：

在使用TabHost切换activity时出现Did you forget to call 'public void setup..

改用第一种方法吧

另外tabhost的常用监听事件为：setOnTabChangedListener(new OnTabChangeListener() {

@Override
public void onTabChanged(String tabId) {
// TODO Auto-generated method stub
Toast.makeText(MainActivity.this, "当前选项卡："+tabId, Toast.LENGTH_SHORT).show();
}
})

另外，也可以用布局填充器（LayoutInflater）来进行添加选项卡的内容

        //创建一个布局填充器来给tabHost的Content添加内容
        LayoutInflater inflater = LayoutInflater.from(this);
        //tabItem1和tabItem2分别是两个xml布局文件，作为填充内容
        inflater.inflate(R.layout.tabItem1, tabHost.getTabContentView());
        inflater.inflate(R.layout.tabItem2, tabHost.getTabContentView());
        //内容填充之后，需要给相应的内容绑定一下选项卡
        tabHost.addTab(tabHost.newTabSpec("tab01").setIndicator("未接电话").setContent(R.id.LinearLayout01));
        tabHost.addTab(tabHost.newTabSpec("tab02").setIndicator("已接电话").setContent(R.id.LinearLayout02));