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切换Tab字体的颜色背景颜色改变

private TabHost tabHost;
private TabWidget tabWidget;

//得到TabHost对象实例
tabHost =(TabHost) findViewById(R.id.taskdescribe_buildingmeter_tabhost);
//调用 TabHost.setup()
tabHost.setup();
tabWidget = tabHost.getTabWidget();
//创建Tab标签
tabHost.addTab(tabHost.newTabSpec("one").setIndicator("按单元名").setContent(R.id.buildingmeter_layout_unitname));
tabHost.addTab(tabHost.newTabSpec("two").setIndicator("按安装状态").setContent(R.id.buildingmeter_layout_installstatus));
tabHost.addTab(tabHost.newTabSpec("three").setIndicator("按楼层").setContent(R.id.buildingmeter_layout_storey));
        
//注意这个就是改变Tabhost默认样式的地方，一定将这部分代码放在上面这段代码的下面，不然样式改变不了
for (int i =0; i < tabWidget.getChildCount(); i++) 
{  
    tabWidget.getChildAt(i).getLayoutParams().height = 65;  
    //tabWidget.getChildAt(i).getLayoutParams().width = 65;
    TextView tv = (TextView) tabWidget.getChildAt(i).findViewById(android.R.id.title);
    tv.setTextSize(15);
    tv.setTextColor(this.getResources().getColorStateList(android.R.color.white));
}
        
//设置第一次打开时默认显示的标签
tabHost.setCurrentTab(0);
//初始化Tab的颜色，和字体的颜色
updateTab(tabHost);
//选择监听器
tabHost.setOnTabChangedListener(new tabChangedListener());

/**
     * 更新Tab标签的颜色，和字体的颜色
     * @param tabHost
     */
    private void updateTab(final TabHost tabHost) 
    {
        for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) 
        {
            View view = tabHost.getTabWidget().getChildAt(i);
            TextView tv = (TextView) tabHost.getTabWidget().getChildAt(i).findViewById(android.R.id.title);
            tv.setTextSize(16);
            tv.setTypeface(Typeface.SERIF, 2); // 设置字体和风格
            if (tabHost.getCurrentTab() == i) 
            {
                //选中
                view.setBackground(getResources().getDrawable(R.drawable.tabhost_current));//选中后的背景
                tv.setTextColor(this.getResources().getColorStateList(android.R.color.white));
            } 
            else 
            {
                //不选中
                view.setBackground(getResources().getDrawable(R.drawable.tabhost_default));//非选择的背景
                tv.setTextColor(this.getResources().getColorStateList(android.R.color.black));
            }
        }
    }
    
    /**
     * TabHost选择监听器
     * @author 
     *
     */
    private class tabChangedListener implements OnTabChangeListener {

          @Override
          public void onTabChanged(String tabId) 
          {
              tabHost.setCurrentTabByTag(tabId);
              updateTab(tabHost);
          }
    }

布局文件

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/taskdescribe_buildingmeter_tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white" >

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        
        <TabWidget 
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">  
        </TabWidget>
        <FrameLayout 
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
            <LinearLayout
                android:id="@+id/buildingmeter_layout_unitname" 
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:background="@color/white">
            </LinearLayout>
            <LinearLayout 
                android:id="@+id/buildingmeter_layout_installstatus" 
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:background="@color/white">
            </LinearLayout>
            <LinearLayout 
                android:id="@+id/buildingmeter_layout_storey" 
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:background="@color/white">
            </LinearLayout>
            
        </FrameLayout>
    </LinearLayout>
</TabHost>

TabHost切换Tab页面使用Intent

切换效果

先是layout文件夹中的布局文件，代码如下：

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:background="@drawable/category_bg"
        android:padding="0dp" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="wrap_content"
            android:layout_height="40dp"/>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@drawable/context_bg"
            android:padding="0dp" />
    </LinearLayout>

</TabHost>

java文件

import android.app.TabActivity; 
import android.content.Intent; 
import android.graphics.Typeface; 
import android.os.Bundle; 
import android.view.KeyEvent; 
import android.view.View; 
import android.view.Window; 
import android.view.WindowManager; 
import android.widget.TabHost; 
import android.widget.TabHost.OnTabChangeListener; 
import android.widget.TextView; 
import com.dzdc.R; 
 
@SuppressWarnings("deprecation") 
public class IndexActivity extends TabActivity { 
    private String[] tabMenu = { "热菜", "冷菜", "海鲜", "川菜", "酒饮", "招牌菜" }; 
    private Intent intent0, intent1, intent2, intent3, intent4, intent5; 
    private Intent[] intents = { intent0, intent1, intent2, intent3, intent4, 
            intent5 }; 
    private TabHost.TabSpec tabSpec0, tabSpec1, tabSpec2, tabSpec3, tabSpec4, 
            tabSpec5; 
    private TabHost.TabSpec[] tabSpecs = { tabSpec0, tabSpec1, tabSpec2, 
            tabSpec3, tabSpec4, tabSpec5 }; 
 
    private TabHost tabHost = null; 
 
    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题栏  
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
                WindowManager.LayoutParams.FLAG_FULLSCREEN); 
        setContentView(R.layout.index); 
 
        tabHost = getTabHost(); 
 
        for (int i = 0; i < tabMenu.length; i++) { 
            intents[i] = new Intent(); 
            intents[i].setClass(this, IndexContentActivity.class); 
 
            tabSpecs[i] = tabHost.newTabSpec(tabMenu[i]); 
            tabSpecs[i].setIndicator(tabMenu[i]);// 设置文字  
            tabSpecs[i].setContent(intents[i]);// 设置该页的内容  
 
            tabHost.addTab(tabSpecs[i]);// 将该页的内容添加到Tabhost  
        } 
 
        tabHost.setCurrentTabByTag(tabMenu[0]); // 设置第一次打开时默认显示的标签，  
         
        updateTab(tabHost);//初始化Tab的颜色，和字体的颜色  
         
        tabHost.setOnTabChangedListener(new OnTabChangedListener()); // 选择监听器  
 
 
    } 
 
    class OnTabChangedListener implements OnTabChangeListener { 
 
        @Override 
        public void onTabChanged(String tabId) { 
            tabHost.setCurrentTabByTag(tabId); 
            updateTab(tabHost); 
        } 
    } 
 
 
    @Override 
    public boolean onKeyDown(int keyCode, KeyEvent event) { 
        if (keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) { 
            System.exit(0); 
            return false; 
        } else if (keyCode == KeyEvent.KEYCODE_MENU 
                && event.getRepeatCount() == 0) { 
            return true; // 返回true就不会弹出默认的setting菜单  
        } 
 
        return false; 
    } 
     
    /**
     * 更新Tab标签的颜色，和字体的颜色
     * @param tabHost
     */ 
    private void updateTab(final TabHost tabHost) { 
        for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) { 
            View view = tabHost.getTabWidget().getChildAt(i); 
            TextView tv = (TextView) tabHost.getTabWidget().getChildAt(i).findViewById(android.R.id.title); 
            tv.setTextSize(16); 
            tv.setTypeface(Typeface.SERIF, 2); // 设置字体和风格  
            if (tabHost.getCurrentTab() == i) {//选中  
                view.setBackgroundDrawable(getResources().getDrawable(R.drawable.category_current));//选中后的背景  
                tv.setTextColor(this.getResources().getColorStateList( 
                        android.R.color.black)); 
            } else {//不选中  
                view.setBackgroundDrawable(getResources().getDrawable(R.drawable.category_bg));//非选择的背景  
                tv.setTextColor(this.getResources().getColorStateList( 
                        android.R.color.white)); 
            } 
        } 
    } 
}