Android之TabHost实现Tab切换

2022-05-26 00:47:39

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

            }

        }

    }

}

码农公寓

实现方式有两种：

方法一：继承TabActivity

方法二：继承Activity类

TabHost切换Tab字体的颜色背景颜色改变

TabHost切换Tab页面使用Intent

相关文章