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