TabHost使用详解（实现滑动切换选项卡）

TabHost主要实现底部导航功能。

1. TabHost使用步骤

a. 定义布局 : 在XML文件中使用TabHost组件, 并在其中定义一个FrameLayout选项卡内容;

b. 继承TabActivity : 显示选项卡组件的Activity继承TabActivity;

c. 获取组件 : 通过调用getTabHost()方法, 获取TabHost对象;

d. 创建添加选项卡 : 通过TabHost创建添加选项卡;

a.定义布局

<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"
>

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="60dp">
</FrameLayout>

<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#aaaaaa"
android:layout_gravity="bottom"
android:fadingEdge="none"
android:showDividers="none"
android:fadeScrollbars="false"
android:fadingEdgeLength="0.0px"
android:focusable="false"
android:focusableInTouchMode="false"
>
</TabWidget>

</TabHost>

注意：TabHost，TabWidget，FrameLayout的id需要引用 android的自带id

主程序代码

public class MainActivity extends TabActivity {
private TabHost tabHost;
private int[] imgtrue = new int[] { R.drawable.host_magazine_true,
R.drawable.host_music_menu_true, R.drawable.host_ringbox_true,
R.drawable.host_user_true };
private int[] imgfalse = new int[] { R.drawable.host_magazine_false,
R.drawable.host_music_menu_false, R.drawable.host_ringbox_false,
R.drawable.host_user_false };
private String[] textreg = new String[] { "杂志", "信使", "音乐", "用户" };
/**
* 当前页面索引
*/
int i = 0;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabHost = getTabHost();
// 动态为TabWidget添加图片、文字和对应的intent
addTabSpec(new int[] { 0, 1, 2, 3 }, imgfalse, textreg, getintent());
// 默认选中第一个
tabHost.setCurrentTab(0);
// 为选中的第一个添加点击效果
changeimg(0);
// TabWidget改变监听
tabHost.setOnTabChangedListener(new OnTabChangeListener() {

@Override
public void onTabChanged(String tabId) {
// TODO Auto-generated method stub

int pos = Integer.parseInt(tabId);
Log.d("xx", pos + "");
// 给当前图片文字添加点击效果
changeimg(pos);
}

});
}

/**
* 根据tabid为图片、文字添加点击效果
* */
protected void changeimg(int pos) {
TabWidget tabWidget = getTabWidget();
for (int i = 0; i < tabWidget.getChildCount(); i++) {
View v = tabWidget.getChildAt(i);
TextView t = (TextView) v.findViewById(R.id.tabtext);
ImageView img = (ImageView) v.findViewById(R.id.tabimg);
if (i == pos) {
t.setTextColor(Color.parseColor("#cc3333"));
img.setBackgroundResource(imgtrue[i]);
} else {
t.setTextColor(Color.parseColor("#00ff33"));
img.setBackgroundResource(imgfalse[i]);
}
}
i = pos;
}

/**
* 动态为TabWidget添加图片、文字和对应的intent
*
* */
private void addTabSpec(int[] is, int[] imgfalse2, String[] textreg2,
Intent[] getintent) {
for (int i = 0; i < is.length; i++) {
View v = View.inflate(MainActivity.this, R.layout.tab, null);
TextView tabtext = (TextView) v.findViewById(R.id.tabtext);
ImageView tabimg = (ImageView) v.findViewById(R.id.tabimg);
tabtext.setText(textreg2[i]);
tabimg.setBackgroundResource(imgfalse2[i]);
tabHost.addTab(tabHost.newTabSpec(is[i] + "").setIndicator(v)
.setContent(getintent[i]));
}
}

/**
* 获取intent
*
* */

private Intent[] getintent() {
// TODO Auto-generated method stub
Intent intent1 = new Intent(MainActivity.this, TaboneActivity.class);
Intent intent2 = new Intent(MainActivity.this, Tabtwo.class);
Intent intent3 = new Intent(MainActivity.this, Tabthree.class);
Intent intent4 = new Intent(MainActivity.this, Tabfour.class);

e1cb
return new Intent[] { intent1, intent2, intent3, intent4 };
}

/**
* 手势监听
*/
@SuppressWarnings("deprecation")
private GestureDetector gestureDetector = new GestureDetector(
new GestureDetector.SimpleOnGestureListener() {
public boolean onFling(android.view.MotionEvent e1,
android.view.MotionEvent e2, float velocityX,
float velocityY) {
if ((e2.getRawX() - e1.getRawX()) > 80) {
showNext();
return true;
}

if ((e1.getRawX() - e2.getRawX()) > 80) {
showPre();
return true;
}
return super.onFling(e1, e2, velocityX, velocityY);
}

});

@Override
public boolean onTouchEvent(MotionEvent event) {
gestureDetector.onTouchEvent(event);
return super.onTouchEvent(event);
}

/**
* 显示下一个页面
*/
protected void showNext() {
// 三元表达式控制4个页面的循环.
// 三元表达式控制4个页面的循环.
// 布尔表达式?a:b
// 布尔表达式为true结果为a，表达式为false结果为b

// x++和++x作为一条独立语句执行时，等价于x=x+1 执行结果相同
// x++和++x作为表达式的一部分使用，就会存在差别。
// ++x表示先将变量x的值加1，然后x再参与表达式运算
// x++表示先用x的值参与表达式运算，然后再将x的值加1
// 例：x=1； a=x++；这里a结果是1；x是2；
// x=1；a=++x； 这里a结果是2， x结果也是2

tabHost.setCurrentTab(i = i == 3 ? i = 0 : ++i);
Log.i("kennet", i + "");

}

/**
* 显示前一个页面
*/
protected void showPre() {
// 三元表达式控制4个页面的循环.
tabHost.setCurrentTab(i = i == 0 ? i = 3 : --i);

}

}

选项卡布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_marginTop="5dp"
android:id="@+id/tabimg"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="@+id/tabtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_below="@id/tabimg"
android:textColor="#00ff33"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>

显示或者隐藏选项卡

getParent().findViewById(android.R.id.tabs).setVisibility(View.VISIBLE);
getParent().findViewById(android.R.id.tabs).setVisibility(View.GONE);

Demo下载地址：

http://download.csdn.net/detail/yy471101598/9177569