Android开发学习笔记：浅谈Tab选项卡

Tab选项卡是一个非常方便的组件。

一.使用Tab组件的步骤：

1.在布局文件中使用FrameLayout列出Tab组件以及Tab中的内容组件

2.Activity要继承TabActivity

3.调用TabActivity的getTabHost( )方法来获得TabHost对象

4.通过TabHost创建Tab选项

二.实现不同Tab里面的内容有两种方式：

1.切换不同的Tab时候，不同Tab里面的内容在同一个Activity显示，主要是通过修改布局文件里面的id来实现的。下面是一个具体的例子：

MainActivity.java

1. package com.android.tab.activity;  
2.  
3. import android.app.TabActivity;  
4. import android.os.Bundle;  
5. import android.view.LayoutInflater;  
6. import android.widget.TabHost;  
7.  
8. public class MainActivity extends TabActivity {  
9.     @Override 
10.     public void onCreate(Bundle savedInstanceState) {  
11.         super.onCreate(savedInstanceState);  
12.          //获得TabHost对象       
13.         TabHost tah = getTabHost();  
14.           
15.         // from(this)从TabActivity获取LayoutInflater  
16.         // R.layout.main 存放Tab布局  
17.         // 通过TabHost获得存放Tab标签页内容的FrameLayout  
18.         // 是否将inflate 加到根布局元素上  
19.         LayoutInflater.from(this).inflate(R.layout.main, tah.getTabContentView(), true);  
20.           
21.         //设置Tab标签的内容和显示内容  
22.         tah.addTab(tah.newTabSpec("tab1").setIndicator("图片1").setContent(R.id.TextView01));  
23.         tah.addTab(tah.newTabSpec("tab2").setIndicator("图片2").setContent(R.id.TextView02));  
24.         tah.addTab(tah.newTabSpec("tab3").setIndicator("图片3").setContent(R.id.TextView03));                        
25.     }  
26. } 

main.xml

1. <?xml version="1.0" encoding="utf-8"?> 
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
3.     android:id="@+id/FrameLayout01"   
4.     android:layout_width="wrap_content"   
5.     android:layout_height="wrap_content" 
6.     >     
7.     <TabHost   
8.         android:id="@+id/TabHost01" 
9.         android:layout_width="wrap_content"   
10.         android:layout_height="wrap_content"   
11.         /> 
12.     <TextView   
13.         android:id="@+id/TextView01"   
14.         android:background="@drawable/pic1" 
15.         android:layout_width="wrap_content"   
16.         android:layout_height="wrap_content"   
17.         />    
18.     <TextView   
19.         android:id="@+id/TextView02"   
20.         android:background="@drawable/pic2" 
21.         android:layout_width="wrap_content"   
22.         android:layout_height="wrap_content"   
23.         />    
24.     <TextView   
25.         android:id="@+id/TextView03"   
26.         android:background="@drawable/pic3" 
27.         android:layout_width="wrap_content"   
28.         android:layout_height="wrap_content"   
29.         />    
30. </FrameLayout> 
31.  
32.  

效果图：

 1.切换不同的Tab时候，不同Tab里面的内容在不同的Activity显示

 先创建三个类FirstActivity.java，SecondActivity.java，ThirdActivity.java，都是继承Activity

FirstActivity.java

1. package com.android.tabtest.activity;  
2.  
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.widget.TextView;  
6.  
7. public class FirstActivity extends Activity {  
8.     public void onCreate(Bundle savedInstanceState) {  
9.        super.onCreate(savedInstanceState);  
10.        TextView textview = new TextView(this);  
11.        textview.setText("这是Tab1");  
12.        setContentView(textview);  
13.     }  
14. }  

SecondActivity.java

1. package com.android.tabtest.activity;  
2.  
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.widget.TextView;  
6.  
7. public class SecondActivity extends Activity {  
8.     public void onCreate(Bundle savedInstanceState) {  
9.         super.onCreate(savedInstanceState);  
10.         TextView textview = new TextView(this);  
11.         textview.setText("这是Tab2");  
12.         setContentView(textview);  
13.     }  
14.  
15. }  

ThirdActivity.java

1. package com.android.tabtest.activity;  
2.  
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.widget.TextView;  
6.  
7. public class ThirdActivity extends Activity {  
8.     public void onCreate(Bundle savedInstanceState) {  
9.            super.onCreate(savedInstanceState);  
10.            TextView textview = new TextView(this);  
11.            textview.setText("这是Tab3");  
12.            setContentView(textview);  
13.         }  
14.  
15. }  

在layout文件夹中对main.xml进行修改

1. <?xml version="1.0" encoding="utf-8"?> 
2. <TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent" 
3.     android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> 
4.     <LinearLayout 
5.         android:orientation="vertical" 
6.         android:layout_width="fill_parent" 
7.         android:layout_height="fill_parent" 
8.         > 
9.         <TabWidget   
10.             android:id="@android:id/tabs" 
11.             android:layout_width="fill_parent"   
12.             android:layout_height="wrap_content" 
13.             /> 
14.         <FrameLayout 
15.             android:id="@android:id/tabcontent" 
16.             android:layout_width="fill_parent" 
17.             android:layout_height="fill_parent" 
18.             android:padding="5dp"   
19.             /> 
20.     </LinearLayout> 
21. </TabHost> 

新建一个测试Tab的类TabDemo.java，继承于TabActivity类

1. package com.android.tabtest.activity;  
2.  
3. import android.app.TabActivity;  
4. import android.content.Intent;  
5. import android.content.res.Resources;  
6. import android.os.Bundle;  
7. import android.widget.TabHost;  
8. import android.widget.TabHost.TabSpec;  
9.    
10. public class TabDemo extends TabActivity {  
11.     /** Called when the activity is first created. */ 
12.     @Override 
13.     public void onCreate(Bundle savedInstanceState) {  
14.         super.onCreate(savedInstanceState);  
15.         setContentView(R.layout.main);//这里使用了上面创建的xml文件（Tab页面的布局）  
16.         Resources res = getResources(); // Resource object to get Drawables  
17.         TabHost tabHost = getTabHost();  // The activity TabHost  
18.         TabSpec spec;  
19.         Intent intent;  // Reusable Intent for each tab  
20.    
21.       //第一个Tab  
22.         intent = new Intent(this,FirstActivity.class);//新建一个Intent用作Tab1显示的内容  
23.         spec = tabHost.newTabSpec("tab1")//新建一个 Tab  
24.         .setIndicator("Tab1", res.getDrawable(android.R.drawable.ic_media_play))//设置名称以及图标  
25.         .setContent(intent);//设置显示的intent，这里的参数也可以是R.id.xxx  
26.         tabHost.addTab(spec);//添加进tabHost  
27.    
28.         //第二个Tab  
29.         intent = new Intent(this,SecondActivity.class);//第二个Intent用作Tab1显示的内容  
30.         spec = tabHost.newTabSpec("tab2")//新建一个 Tab  
31.         .setIndicator("Tab2", res.getDrawable(android.R.drawable.ic_menu_edit))//设置名称以及图标  
32.         .setContent(intent);//设置显示的intent，这里的参数也可以是R.id.xxx  
33.         tabHost.addTab(spec);//添加进tabHost  
34.           
35.        //第三个Tab  
36.         intent = new Intent(this,SecondActivity.class);//第二个Intent用作Tab1显示的内容  
37.         spec = tabHost.newTabSpec("tab2")//新建一个 Tab  
38.         .setIndicator("Tab3", res.getDrawable(android.R.drawable.ic_menu_help))//设置名称以及图标  
39.         .setContent(intent);//设置显示的intent，这里的参数也可以是R.id.xxx  
40.         tabHost.addTab(spec);//添加进tabHost  
41.    
42.         tabHost.setCurrentTab(0);//设置当前的选项卡,这里为Tab1  
43.     }   
44. } 

在AndroidManifest.xml里加入9~29行的声明代码

1. <?xml version="1.0" encoding="utf-8"?> 
2. <manifest xmlns:android="http://schemas.android.com/apk/res/android" 
3.       package="com.android.tabtest.activity" 
4.       android:versionCode="1" 
5.       android:versionName="1.0"> 
6.     <uses-sdk android:minSdkVersion="10" /> 
7.  
8.     <application android:icon="@drawable/icon" android:label="@string/app_name"> 
9.     <activity android:name=".TabDemo" 
10.                   android:label="@string/app_name"> 
11.             <intent-filter> 
12.                 <action android:name="android.intent.action.MAIN" /> 
13.                 <category android:name="android.intent.category.LAUNCHER" /> 
14.             </intent-filter> 
15.     </activity> 
16.     <activity android:name=".FirstActivity" 
17.                   android:label="@string/app_name"> 
18.             <intent-filter> 
19.                 <action android:name="android.intent.action.MAIN" /> 
20.                 <category android:name="android.intent.category.LAUNCHER" /> 
21.             </intent-filter> 
22.     </activity> 
23.     <activity android:name=".SecondActivity" 
24.                   android:label="@string/app_name"> 
25.             <intent-filter> 
26.                 <action android:name="android.intent.action.MAIN" /> 
27.                 <category android:name="android.intent.category.LAUNCHER" /> 
28.             </intent-filter> 
29.     </activity> 
30.     </application> 
31. </manifest> 

效果图：

本文转自 lingdududu 51CTO博客，原文链接：