一. TabHost介绍
TabHost组件可以在界面中存放多个选项卡, 很多软件都使用了改组件进行设计;
1. TabHost常用组件
TabWidget : 该组件就是TabHost标签页中上部 或者 下部的按钮, 可以点击按钮切换选项卡;
TabSpec : 代表了选项卡界面, 添加一个TabSpec即可添加到TabHost中;
-- 创建选项卡 : newTabSpec(String tag), 创建一个选项卡;
-- 添加选项卡 : addTab(tabSpec);
2. TabHost使用步骤
a. 定义布局 : 在XML文件中使用TabHost组件, 并在其中定义一个FrameLayout选项卡内容;
b. 继承TabActivity : 显示选项卡组件的Activity继承TabActivity;
c. 获取组件 : 通过调用getTabHost()方法, 获取TabHost对象;
d. 创建添加选项卡 : 通过TabHost创建添加选项卡;
3. 将按钮放到下面
布局文件中TabWidget代表的就是选项卡按钮, Fragement组件代表内容;
设置失败情况 : 如果Fragement组件没有设置 android:layout_weight属性, 那么将TabWidget放到下面, 可能不会显示按钮;
设置权重 : 设置了Fragment组件的权重之后, 就可以成功显示该选项卡按钮;
下面上代码先是main.xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 android:background="#FFFFFF" 6 android:orientation="vertical" > 7 8 <TabHost 9 android:id="@android:id/tabhost" 10 android:layout_width="fill_parent" 11 android:layout_height="fill_parent" > 12 13 <LinearLayout 14 android:layout_width="fill_parent" 15 android:layout_height="fill_parent" 16 android:orientation="vertical" > 17 18 <FrameLayout 19 android:id="@android:id/tabcontent" 20 android:layout_width="fill_parent" 21 android:layout_height="0.0dip" 22 android:layout_weight="1.0" /> 23 24 <TabWidget 25 android:id="@android:id/tabs" 26 android:layout_width="fill_parent" 27 android:layout_height="wrap_content" 28 android:layout_weight="0.0" 29 android:visibility="gone" /> 30 31 <FrameLayout 32 android:layout_width="fill_parent" 33 android:layout_height="wrap_content" > 34 35 <RadioGroup 36 android:id="@+id/main_tab_group" 37 android:layout_width="fill_parent" 38 android:layout_height="wrap_content" 39 android:layout_gravity="bottom" 40 android:gravity="bottom" 41 android:orientation="horizontal" > 42 43 <RadioButton 44 android:id="@+id/guide_home" 45 style="@style/main_tab_bottom" 46 android:checked="true" 47 android:drawableTop="@drawable/guide_home" 48 android:text="首页" /> 49 50 <RadioButton 51 android:id="@+id/guide_store" 52 style="@style/main_tab_bottom" 53 android:drawableTop="@drawable/guide_group" 54 android:text="商城" /> 55 56 <RadioButton 57 android:id="@+id/guide_cart" 58 style="@style/main_tab_bottom" 59 60 android:drawableTop="@drawable/guide_cart" 61 android:text="购物车" /> 62 63 <RadioButton 64 android:id="@+id/guide_ww" 65 style="@style/main_tab_bottom" 66 android:drawableTop="@drawable/guide_setting" 67 android:text="我的" /> 68 </RadioGroup> 69 </FrameLayout> 70 </LinearLayout> 71 </TabHost> 72 73 </LinearLayout>
Activity.main.java 代码
1 package com.example.myapplication; 2 3 import android.app.TabActivity; 4 import android.content.Intent; 5 import android.os.Bundle; 6 import android.view.View; 7 import android.widget.RadioButton; 8 import android.widget.TabHost; 9 10 public class MainActivity extends TabActivity { 11 private RadioButton guide_home, guide_store, guide_cart,guide_ww; 12 private Intent intent1; 13 private Intent intent2; 14 private Intent intent3; 15 private Intent intent4; 16 private String tab="tab0"; 17 private int currIndex = 0; 18 private TabHost tabHost; 19 @Override 20 protected void onCreate(Bundle savedInstanceState) { 21 super.onCreate(savedInstanceState); 22 setContentView(R.layout.activity_main); 23 //初始化四个Activity 24 intent1 = new Intent(this, Main2Activity.class); 25 intent2 = new Intent(this, Main3Activity.class); 26 intent3 = new Intent(this, Main4Activity.class); 27 intent4 = new Intent(this, Main5Activity.class); 28 init(); 29 inittAB(); 30 } 31 32 /** 33 * 初始化组件 34 */ 35 private void init() { 36 guide_home = (RadioButton) findViewById(R.id.guide_home); 37 guide_cart = (RadioButton) findViewById(R.id.guide_cart); 38 guide_ww = (RadioButton) findViewById(R.id.guide_ww); 39 guide_store=(RadioButton) findViewById(R.id.guide_store); 40 //设置点击事件 41 guide_home.setOnClickListener(new MyOnPageChangeListener()); 42 guide_store.setOnClickListener(new MyOnPageChangeListener()); 43 guide_cart.setOnClickListener(new MyOnPageChangeListener()); 44 guide_ww.setOnClickListener(new MyOnPageChangeListener()); 45 } 46 47 //填充TabHost 48 private void inittAB() { 49 tabHost = getTabHost(); 50 //这里tab0是第一个，tab1是第二个窗口，以此类推 51 tabHost.addTab(tabHost.newTabSpec("tab0") 52 .setIndicator("tab0") 53 .setContent(intent1)); 54 tabHost.addTab(tabHost.newTabSpec("tab1") 55 .setIndicator("tab1") 56 .setContent(intent2)); 57 tabHost.addTab(tabHost.newTabSpec("tab3") 58 .setIndicator("tab3") 59 .setContent(intent4)); 60 tabHost.addTab(tabHost.newTabSpec("tab2") 61 .setIndicator("tab2") 62 .setContent(intent3)); 63 if(tab.equalsIgnoreCase("tab0")){ 64 tabHost.setCurrentTabByTag("tab0"); 65 } 66 } 67 68 /** 69 * 点击事件类 70 */ 71 private class MyOnPageChangeListener implements View.OnClickListener { 72 73 @Override 74 public void onClick(View v) { 75 switch (v.getId()) { 76 case R.id.guide_home: 77 currIndex = 0; 78 //切换第一个窗口 79 tabHost.setCurrentTabByTag("tab0"); 80 break; 81 case R.id.guide_cart: 82 currIndex = 3; 83 //切换第二个窗口 84 tabHost.setCurrentTabByTag("tab2"); 85 break; 86 case R.id.guide_store: 87 currIndex = 4; 88 //切换第三个窗口 89 tabHost.setCurrentTabByTag("tab1"); 90 break; 91 case R.id.guide_ww: 92 currIndex = 5; 93 //切换第四个窗口 94 tabHost.setCurrentTabByTag("tab3"); 95 break; 96 } 97 } 98 } 99 }
下面是效果图