Android组件的使用：TabHost

Android中TabHost(选项卡)的使用

1、TabHost使用

1.1、一个简单的TabHost

1）、建立一个布局文件：

<?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" >      <LinearLayout        android:id="@+id/tab1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:orientation="vertical" >        <TextView            android:id="@+id/tb_tabcontent1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="第1个选项卡的内容" />    </LinearLayout>    <LinearLayout        android:id="@+id/tab2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:orientation="vertical" >        <TextView            android:id="@+id/tb_tabcontent2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="第2个选项卡的内容" />    </LinearLayout>    <LinearLayout        android:id="@+id/tab3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:orientation="vertical" >        <TextView            android:id="@+id/tb_tabcontent3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="第3个选项卡的内容" />    </LinearLayout></TabHost>

2）、选项卡由三个布局构成，每个布局里面的TextView是选项卡的内容。

建立一个Activity类，此类继承自TabActivity类，初始化选项卡。

package com.example.highcomponent;import android.app.TabActivity;import android.os.Bundle;import android.view.LayoutInflater;import android.widget.TabHost;public class TabDemo1Activity extends TabActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//取得TabHost对象TabHost tabHost = this.getTabHost();//获取布局文件LayoutInflater.from(TabDemo1Activity.this).inflate(R.layout.tab1,tabHost.getTabContentView(), true);//添加选项卡标识、选项卡标题、选项卡内容、tabHost.addTab(tabHost.newTabSpec("tag1").setIndicator("选项卡1").setContent(R.id.tab1));tabHost.addTab(tabHost.newTabSpec("tag2").setIndicator("选项卡2").setContent(R.id.tab2));tabHost.addTab(tabHost.newTabSpec("tag3").setIndicator("选项卡3").setContent(R.id.tab3));}}

3）、运行结果：

但是此选项卡比较单一，接下来使用RadioGroup和TabHost完成两者都有的优点。

2.1、TabHost小实例，RadioGroup和TabHost结合使用

1）、TabHost显示时默认在手机顶部，TabWidget内容切换在下部分，而内容切换部分是由FrameLayout完成，因此修改显示结构，把FrameLayout放于布局文件的上面，选项卡放于下部分。但是选项卡没有居于手机底部，如何才能让选项卡基于底部呢？那就是给FrameLayout一个权值，但是发现FrameLayout没有权值这个属性，这时就需要在FrameLayout和TabWidget外包裹一个LinearLayout，发现包裹之后有权值属性，加了权值之后，FrameLayout占据了其余的部分，而TabWidget只占据它自己内容的大小。在TabHost里面，每个组件有自己的id,id必须为系统提供的。TabHost的id为tabhost，内容部分的id为tabcontent,TabWidget的id为tabs。

布局结构为：

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

在布局视图下面显示效果为：

2）、RadioGroup可以加入想要的图片和文字信息，而且可以方便的加入事件操作。

现在就在布局文件中加入RadioGroup组件，然后隐藏TabWidget，让RadioGroup完成TabWidget显示效果，所以看起来似乎就是TabWidget效果。

修改TabWidget属性，添加android:visibility="gone"，该属性是隐藏TabWidget组件，但是不占用位置。

<?xml version="1.0" encoding="utf-8"?><TabHost     xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@android:id/tabhost"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical" >        <FrameLayout            android:id="@android:id/tabcontent"            android:layout_width="match_parent"            android:layout_height="0dp"            android:layout_weight="1" >        </FrameLayout>        <TabWidget            android:id="@android:id/tabs"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:visibility="gone" >        </TabWidget>        <RadioGroup            android:id="@+id/rg_tab"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="horizontal" >            <RadioButton                android:id="@+id/rb_tab1"                android:layout_width="0dp"                android:layout_height="wrap_content"                android:layout_weight="1"                android:button="@null"                android:drawableTop="@drawable/baozi1"                android:gravity="center"                android:text="选项卡1" />            <RadioButton                android:id="@+id/rb_tab2"                android:layout_width="0dp"                android:layout_height="wrap_content"                android:layout_weight="1"                android:button="@null"                android:drawableTop="@drawable/baozi2"                android:gravity="center"                android:text="选项卡2" />            <RadioButton                android:id="@+id/rb_tab3"                android:layout_width="0dp"                android:layout_height="wrap_content"                android:layout_weight="1"                android:button="@null"                android:drawableTop="@drawable/baozi3"                android:gravity="center"                android:text="选项卡3" />        </RadioGroup>    </LinearLayout></TabHost>

显示效果为：

接下来使用程序用RadioGroup替换TabWidget功能。就是使用RadioGroup实现TabWidget功能，但是TabWidget被隐藏了。

package com.example.highcomponent;import android.app.TabActivity;import android.content.Intent;import android.os.Bundle;import android.widget.RadioButton;import android.widget.RadioGroup;import android.widget.TabHost;public class TabDemoActivity extends TabActivity {//声明组件private RadioGroup rg_tab = null;private RadioButton rb_tab1 = null;private RadioButton rb_tab2 = null;private RadioButton rb_tab3 = null;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);super.setContentView(R.layout.tab_layout);//实例化组件rg_tab = (RadioGroup) super.findViewById(R.id.rg_tab);rb_tab1 = (RadioButton) super.findViewById(R.id.rb_tab1);rb_tab2 = (RadioButton) super.findViewById(R.id.rb_tab2);rb_tab3 = (RadioButton) super.findViewById(R.id.rb_tab3);//定义TabHostfinal TabHost tabHost = this.getTabHost();//给TabHost增加3个选项卡，tag1、tag2、tag3是选项卡标识，//Intent中表示内容显示为其他Activity的内容tabHost.addTab(tabHost.newTabSpec("tag1").setContent(new Intent(TabDemoActivity.this,SeekBarDemoActivity.class)).setIndicator("选项卡1"));tabHost.addTab(tabHost.newTabSpec("tag2").setContent(new Intent(TabDemoActivity.this, MainActivity.class)).setIndicator("选项卡2"));tabHost.addTab(tabHost.newTabSpec("tag3").setContent(new Intent(TabDemoActivity.this,ProgressBarDemoActivity.class)).setIndicator("选项卡3"));//给RadioGroup增加事件，//switch中表示如果是某一个RadioButton的话，则设置选项卡，这样就替换了原来的TabWidget效果rg_tab.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {switch (checkedId) {case R.id.rb_tab1:tabHost.setCurrentTabByTag("tag1");break;case R.id.rb_tab2:tabHost.setCurrentTabByTag("tag2");break;case R.id.rb_tab3:tabHost.setCurrentTabByTag("tag3");break;default:break;}}});}}

程序运行效果：