玩转Android---UI篇---TabWidget（切换卡）

原址：http://hualang.iteye.com/category/143855

Tab选项卡类似与电话本的界面，通过多个标签切换不同的内容，要实现这个效果，首先要知道TabHost，它是一个用来存放多个Tab标签的容器，每一个Tab都可以对应自己的布局，比如，电话本中的Tab布局就是一个线性布局

 

要使用TabHost，首先要通过getTabHost方法获取TabHost的对象，然后通过addTab方法来向TabHost中添加Tab，当然每个Tab在切换时都会产生一个事件，要捕捉这个事件，需要设置TabActivity的事件监听setOnTabChangedListener

 

下面是个小例子：

TabTest.java

Java代码  

1. package org.hualang.tab;  
2.   
3. import android.app.Activity;  
4. import android.app.TabActivity;  
5. import android.graphics.Color;  
6. import android.os.Bundle;  
7. import android.widget.TabHost;  
8. import android.widget.Toast;  
9. import android.widget.TabHost.OnTabChangeListener;  
10.   
11. public class TabTest extends TabActivity {  
12.     /** Called when the activity is first created. */  
13.     TabHost tabhost;  
14.     @Override  
15.     public void onCreate(Bundle savedInstanceState) {  
16.         super.onCreate(savedInstanceState);  
17.         setContentView(R.layout.main);  
18.         //取得TabHost对象  
19.         tabhost = getTabHost();  
20.         //为TabHost添加标签  
21.         //新建一个newTabSpec(newTabSpec)  
22.         //设置其标签和图标（setIndicator）  
23.         //设置内容（setContent）  
24.         tabhost.addTab(tabhost.newTabSpec("tab1")  
25.                 .setIndicator("TAB 1",getResources().getDrawable(R.drawable.img1))  
26.                 .setContent(R.id.text1));  
27.         tabhost.addTab(tabhost.newTabSpec("tab2")  
28.                 .setIndicator("TAB 2",getResources().getDrawable(R.drawable.img2))  
29.                 .setContent(R.id.text2));  
30.         tabhost.addTab(tabhost.newTabSpec("tab3")  
31.                 .setIndicator("TAB 3",getResources().getDrawable(R.drawable.img3))  
32.                 .setContent(R.id.text3));  
33.         //设置TabHost的背景颜色  
34.         //tabhost.setBackgroundColor(Color.argb(150,22,70,150));  
35.         //设置TabHost的背景图片资源  
36.         tabhost.setBackgroundResource(R.drawable.bg0);  
37.         //设置当前显示哪个标签  
38.         tabhost.setCurrentTab(0);  
39.         //标签切换事件处理，setOnTabChangedListener  
40.         tabhost.setOnTabChangedListener(new OnTabChangeListener()  
41.         {  
42.             public void onTabChanged(String tabId)  
43.             {  
44.                 Toast toast=Toast.makeText(getApplicationContext(), "现在是"+tabId+"标签", Toast.LENGTH_SHORT);  
45.                 toast.show();  
46.             }  
47.         });  
48.           
49.     }  
50. }  

 main.xml

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@android:id/tabhost"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent">  
6.     <LinearLayout  
7.         android:orientation="vertical"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="fill_parent">  
10.         <TabWidget  
11.             android:id="@android:id/tabs"  
12.             android:layout_width="fill_parent"  
13.             android:layout_height="wrap_content" />  
14.         <FrameLayout  
15.             android:id="@android:id/tabcontent"  
16.             android:layout_width="fill_parent"  
17.             android:layout_height="fill_parent">  
18.             <TextView   
19.                 android:id="@+id/text1"  
20.                 android:layout_width="fill_parent"  
21.                 android:layout_height="fill_parent"   
22.                 android:text="选项卡1" />  
23.             <TextView   
24.                 android:id="@+id/text2"  
25.                 android:layout_width="fill_parent"  
26.                 android:layout_height="fill_parent"   
27.                 android:text="选项卡2" />  
28.             <TextView   
29.                 android:id="@+id/text3"  
30.                 android:layout_width="fill_parent"  
31.                 android:layout_height="fill_parent"   
32.                 android:text="选项卡3" />  
33.         </FrameLayout>  
34.     </LinearLayout>  
35. </TabHost>  

 运行效果如下：