一.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创建添加选项卡;
布局文件中TabWidget代表的就是选项卡按钮, Fragement组件代表内容;
二. TabHost布局文件
1. 根标签及id
设置Android自带id : XML布局文件中, 可以使用 标签设置, 其中的id 需要引用 android的自带id : android:id=@android:id/tabhost ;
getHost()获取前提 : 设置了该id之后, 在Activity界面可以使用 getHost(), 获取这个TabHost 视图对象;
<tabhost android:id="@android:id/tabhost" android:layout_height="match_parent" android:layout_width="match_parent"></tabhost>
2. TabWidget组件
选项卡切换 : 该组件是选项卡切换按钮, 通过点击该组件可以切换选项卡;
设置android自带id : 这个组件的id要设置成android的自带id : android:id=@android:id/tabs ;
TabHost必备组件 : 该组件与FrameLayout组件是TabHost组件中必备的两个组件;
切换按钮下方显示 : 如果想要将按钮放到下面, 可以将该组件定义在下面, 但是注意,FrameLayout要设置android:layout_widget = 1;
设置TabWidget大小 : 如果想要设置该按钮组件的大小, 可以设置该组件与FrameLayout组件的权重;
示例 :
<tabwidget
android:id="@android:id/tabs"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal/">
</tabwidget>
3. FrameLayout组件
组件作用 : 该组件中定义的子组件是TabHost中每个页面显示的选项卡, 可以将TabHost选项卡显示的视图定义在其中;
设置android自带id : 这个组件的id要设置成android的自带的id : android:id=@android:id/tabcontent ;
示例 :
<framelayout
android:id="@android:id/tabcontent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_width="fill_parent">
</framelayout>
二. Activity方法
1. 获取TabHost
获取方法 : getHost();
前提 : 调用getHost()方法获取TabHost组件的方法的前提是在布局文件中,
设置了android自带的id android:id=@android:id/tabhost 才可以;
2. 创建选项卡
创建选项卡 : 调用TabHost组件的newTabHost(tag), 其中的tag是字符串, 即在选项卡的
唯一标识;
设置选项卡 :
-- 设置按钮名称 : setIndicator(“”);
-- 设置选项卡内容 : setContent(), 可以设置视图组件, 可以设置Activity, 也可以
设置Fragement;
添加选项卡 : tabHost.add(tag), 传入的参数是创建选项卡的时候定义的唯一标识;
三 代码
XML布局文件 :
<!--?xml version=1.0 encoding=utf-8?-->
<tabhost android:id="@android:id/tabhost" android:layout_height="match_parent" android:layout_width="match_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical">
<tabwidget android:id="@android:id/tabs" android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="horizontal/">
<framelayout android:id="@android:id/tabcontent" android:layout_height="fill_parent" android:layout_weight="1" android:layout_width="fill_parent">
<linearlayout android:id="@+id/alwayswet" android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical">
<imageview android:layout_height="fill_parent" android:layout_width="fill_parent" android:scaletype="fitXY" android:src="@drawable/alwayswet/">
</imageview></linearlayout>
<linearlayout android:id="@+id/isanimal" android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical">
<imageview android:layout_height="fill_parent" android:layout_width="fill_parent" android:scaletype="fitXY" android:src="@drawable/isanimal/">
</imageview></linearlayout>
<linearlayout android:id="@+id/nezha" android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical">
<imageview android:layout_height="fill_parent" android:layout_width="fill_parent" android:scaletype="fitXY" android:src="@drawable/nazha/">
</imageview></linearlayout>
</framelayout>
</tabwidget></linearlayout>
</tabhost>
Activity主界面代码 :
package shuliang.han.tabhost_test;
import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
public class MainActivity extends TabActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tabhost);
TabHost tabHost = getTabHost();
TabSpec page1 = tabHost.newTabSpec(tab1)
.setIndicator("tab1")
.setContent(R.id.isanimal);
tabHost.addTab(page1);
TabSpec page2 = tabHost.newTabSpec(tab2)
.setIndicator("tab2")
.setContent(R.id.alwayswet);
tabHost.addTab(page2);
TabSpec page3 = tabHost.newTabSpec(tab3)
.setIndicator("tab3")
.setContent(R.id.nezha);
tabHost.addTab(page3);
}
}
三.用groupradio代替Tabweight功能
xml文件：
<TabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/bitmap" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tabStripEnabled="false"
android:visibility="gone" >
</TabWidget>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RadioGroup
android:id="@+id/mineradio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/localtab"
android:orientation="horizontal" >
<RadioButton
android:id="@+id/radio_travel"
style="@style/tab_button_bottom"
android:layout_marginLeft="35dp"
android:layout_marginTop="11dp"
android:background="@drawable/btn_travel"
android:checked="true" />
<RadioButton
android:id="@+id/radio_mood"
style="@style/tab_button_bottom"
android:layout_marginLeft="42dp"
android:layout_marginTop="11dp"
android:background="@drawable/btn_mood" />
</RadioGroup>
</FrameLayout>
</LinearLayout>
</TabHost>
其中，将TabWidget设置属性，android:tabStripEnabled="false" android:visibility="gone"
然后将frameLayout中的groupradio代替选项卡选择效果，并在activity中为groupradio设置
监听。
activity文件如下：
public class MineActivity extends TabActivity implements OnCheckedChangeListener {
private TabHost tabHost;
@SuppressWarnings("deprecation")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mine);
tabHost = getTabHost();//获得tabhost
initSpec();//初始化选项卡
((RadioGroup) findViewById(R.id.mineradio))
.setOnCheckedChangeListener (this);// 为radiogroup注册监听
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.mine, menu);
return true;
}
@Override
public void onCheckedChanged(RadioGroup radiogroup, int checkedId) {
switch (checkedId) {
case R.id.radio_travel:
tabHost.setCurrentTabByTag("mine_travel");//通过相应的标记来找到选项卡
break;
case R.id.radio_mood:
tabHost.setCurrentTabByTag("mine_mood");
break;
default:
break;
}
}
public void initSpec(){
tabHost.addTab(this.buildTagSpec("mine_travel", null,
R.drawable.btn_travel,R.id.mytravel ));//R.drawable.btn_travel为另外设置的该选项卡对应的图片，内容后面附上。
tabHost.addTab(this.buildTagSpec("mine_mood", null,
R.drawable.btn_mood, R.id.mymood));
}
/**
* 自定义创建标签项的方法
*
* @param tagName
* 标签标识
* @param tagLable
* 标签文字
* @param icon
* 标签图标
* @param content
* 标签对应的内容
* @return
*/
public TabHost.TabSpec buildTagSpec(String tagName, String tagLable, //选项卡标识符，选项卡外部显示标签，对应的图片，对应的选项卡内容
int icon, int mylayout) {
return tabHost.newTabSpec(tagName)
.setIndicator(tagLable, getResources().getDrawable(icon))
.setContent(mylayout);
}
}
//groupradio监听
public void onCheckedChanged(RadioGroup radiogroup, int checkedId) {
switch (checkedId) {
case R.id.radio_view:
mTabHost.setCurrentTabByTag("mine_travel");//如果选中第一个选项卡，设置选项卡标识符为mine_travel的选项卡内容
break;
case R.id.radio_food:
mTabHost.setCurrentTabByTag("mine_mood");
break;
default:
break;
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.local, menu);
return true;
}
btn_travel.xml:(在文件夹drawable中)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/food1" android:state_checked="false"></item>
<item android:drawable="@drawable/food2" android:state_checked="true"></item>
</selector>