Android中的TabHost

介绍 

有时，我们想在一个window中显示多个视图，这时就需要用到Tab容器。在Android里它叫TabHost。

使用TabHost有两种方式：

1. 在相同的activity中使用TabHost导航多个视图
2. 使用TabHost导航多个Activity(通过intents)

Tab应用的结构

TabHost的Activity的结构如下:

先看个示例：

layout文件：

[html] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2.   
3.     <TabHost android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:id="@+id/tabHost"  
6.     xmlns:android="http://schemas.android.com/apk/res/android"  
7.     >  
8.     <TabWidget  
9.     android:layout_width="fill_parent"  
10.     android:layout_height="wrap_content"  
11.     android:id="@android:id/tabs"  
12.     />  
13.      <FrameLayout  
14.      android:layout_width="fill_parent"  
15.     android:layout_height="fill_parent"  
16.     android:id="@android:id/tabcontent"  
17.      >  
18.      <LinearLayout  
19.      android:layout_width="fill_parent"  
20.     android:layout_height="wrap_content"  
21.     android:id="@+id/tab1"  
22.     android:orientation="vertical"  
23.     android:paddingTop="60px"  
24.      >  
25.      <TextView    
26.     android:layout_width="fill_parent"   
27.     android:layout_height="100px"   
28.     android:text="This is tab1"  
29.     android:id="@+id/txt1"  
30.     />      
31.       
32.      </LinearLayout>  
33.        
34.      <LinearLayout  
35.      android:layout_width="fill_parent"  
36.     android:layout_height="fill_parent"  
37.     android:id="@+id/tab2"  
38.     android:orientation="vertical"  
39.     android:paddingTop="60px"  
40.      >  
41.      <TextView    
42.     android:layout_width="fill_parent"   
43.     android:layout_height="100px"   
44.     android:text="This is tab 2"  
45.     android:id="@+id/txt2"  
46.     />  
47.      
48.      </LinearLayout>  
49.        
50.       <LinearLayout  
51.      android:layout_width="fill_parent"  
52.     android:layout_height="fill_parent"  
53.     android:id="@+id/tab3"  
54.     android:orientation="vertical"  
55.     android:paddingTop="60px"  
56.      >  
57.      <TextView    
58.     android:layout_width="fill_parent"   
59.     android:layout_height="100px"   
60.     android:text="This is tab 3"  
61.     android:id="@+id/txt3"  
62.     />  
63.      
64.      </LinearLayout>  
65.      </FrameLayout>  
66.       
67.     </TabHost>  

<?xml version="1.0" encoding="utf-8"?>

    <TabHost android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/tabHost"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <TabWidget
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@android:id/tabs"
    />
     <FrameLayout
     android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@android:id/tabcontent"
     >
     <LinearLayout
     android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/tab1"
    android:orientation="vertical"
    android:paddingTop="60px"
     >
     <TextView  
    android:layout_width="fill_parent" 
    android:layout_height="100px" 
    android:text="This is tab1"
    android:id="@+id/txt1"
    />    
    
     </LinearLayout>
     
     <LinearLayout
     android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/tab2"
    android:orientation="vertical"
    android:paddingTop="60px"
     >
     <TextView  
    android:layout_width="fill_parent" 
    android:layout_height="100px" 
    android:text="This is tab 2"
    android:id="@+id/txt2"
    />
   
     </LinearLayout>
     
      <LinearLayout
     android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/tab3"
    android:orientation="vertical"
    android:paddingTop="60px"
     >
     <TextView  
    android:layout_width="fill_parent" 
    android:layout_height="100px" 
    android:text="This is tab 3"
    android:id="@+id/txt3"
    />
   
     </LinearLayout>
     </FrameLayout>
    
    </TabHost>

Activity代码：

[java] view plain copy print ?

1. public void onCreate(Bundle savedInstanceState) {  
2. super.onCreate(savedInstanceState);  
3. setContentView(R.layout.main);  
4. TabHost tabHost=(TabHost)findViewById(R.id.tabHost);  
5. tabHost.setup();  
6.   
7. TabSpec spec1=tabHost.newTabSpec("Tab 1");  
8. spec1.setContent(R.id.tab1);  
9. spec1.setIndicator("Tab 1");  
10.   
11. TabSpec spec2=tabHost.newTabSpec("Tab 2");  
12. spec2.setIndicator("Tab 2");  
13. spec2.setContent(R.id.tab2);  
14.   
15. TabSpec spec3=tabHost.newTabSpec("Tab 3");  
16. spec3.setIndicator("Tab 3");  
17. spec3.setContent(R.id.tab3);  
18.   
19. tabHost.addTab(spec1);  
20. tabHost.addTab(spec2);  
21. tabHost.addTab(spec3);  
22. }  

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost=(TabHost)findViewById(R.id.tabHost);
tabHost.setup();

TabSpec spec1=tabHost.newTabSpec("Tab 1");
spec1.setContent(R.id.tab1);
spec1.setIndicator("Tab 1");

TabSpec spec2=tabHost.newTabSpec("Tab 2");
spec2.setIndicator("Tab 2");
spec2.setContent(R.id.tab2);

TabSpec spec3=tabHost.newTabSpec("Tab 3");
spec3.setIndicator("Tab 3");
spec3.setContent(R.id.tab3);

tabHost.addTab(spec1);
tabHost.addTab(spec2);
tabHost.addTab(spec3);
}

1. 这里通过TabSpecs类创建Tab
2. 使用setIndicator方法设置tab的文字
3. 使用setContent设置tab的内容
4. 如果你使用TabActivity作为你的Activity的基类，你不用调用TabHost.Setup()方法。

运行后看起来是这样的：

同时还可以指定indicator为一个view：

[java] view plain copy print ?

1. TabSpec spec1=tabHost.newTabSpec("Tab 1");  
2. spec1.setContent(R.id.tab1);  
3. TextView txt=new TextView(this);  
4. txt.setText("Tab 1");  
5. txt.setBackgroundColor(Color.RED);  
6. spec1.setIndicator(txt);  

TabSpec spec1=tabHost.newTabSpec("Tab 1");
spec1.setContent(R.id.tab1);
TextView txt=new TextView(this);
txt.setText("Tab 1");
txt.setBackgroundColor(Color.RED);
spec1.setIndicator(txt);

设置tab的内容

上面的例子展示了使用tab显示不同的layout资源。如果我们需要通过tab导航到不同的Activity，该怎么办？

这种情况，我们需要有一个activity作为应用的根activity。这个Activity包含TabHost，通过intents导航不同的activity。

注意：根Activity必须继承TabActivity。代码如下：

Layout：

[html] view plain copy print ?

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

<?xml version="1.0" encoding="utf-8"?>
    <TabHost android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@android:id/tabhost"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <TabWidget
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@android:id/tabs"
    />
     <FrameLayout
     android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@android:id/tabcontent"
     >
     </FrameLayout>
    </TabHost>

Activity：

[java] view plain copy print ?

1. public class TabDemo extends TabActivity {  
2.     /** Called when the activity is first created. */  
3.     @Override  
4.     public void onCreate(Bundle savedInstanceState) {  
5.         super.onCreate(savedInstanceState);  
6.         setContentView(R.layout.main);  
7.   
8.         TabHost tabHost=getTabHost();  
9.         // no need to call TabHost.Setup()           
10.           
11.         //First Tab   
12.         TabSpec spec1=tabHost.newTabSpec("Tab 1");  
13.         spec1.setIndicator("Tab 1",getResources().getDrawable(R.drawable.sun));  
14.         Intent in1=new Intent(this, Act1.class);  
15.         spec1.setContent(in1);  
16.           
17.         TabSpec spec2=tabHost.newTabSpec("Tab 2");  
18.         spec2.setIndicator("Tab 2",getResources().getDrawable(R.drawable.chart));  
19.         Intent in2=new Intent(this,Act2.class);  
20.         spec2.setContent(in2);  
21.   
22.         tabHost.addTab(spec2);  
23.         tabHost.addTab(spec3);  
24.     }  
25. }  

public class TabDemo extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        TabHost tabHost=getTabHost();
        // no need to call TabHost.Setup()        
        
        //First Tab
        TabSpec spec1=tabHost.newTabSpec("Tab 1");
        spec1.setIndicator("Tab 1",getResources().getDrawable(R.drawable.sun));
        Intent in1=new Intent(this, Act1.class);
        spec1.setContent(in1);
        
        TabSpec spec2=tabHost.newTabSpec("Tab 2");
        spec2.setIndicator("Tab 2",getResources().getDrawable(R.drawable.chart));
        Intent in2=new Intent(this,Act2.class);
        spec2.setContent(in2);

        tabHost.addTab(spec2);
        tabHost.addTab(spec3);
    }
}

运行效果

在运行时添加Tab

在运行时我们可以通过调用TabSepc.setContent(TabContentFactory)方法添加Tab。

[java] view plain copy print ?

1. <SPAN style="WHITE-SPACE: pre"> </SPAN>TabSpec spec1=tabHost.newTabSpec("Tab 1");  
2.         spec1.setIndicator("Tab 1",getResources().getDrawable(R.drawable.sun));  
3.   
4.         spec1.setContent(new TabContentFactory() {  
5.      
6.   <SPAN style="WHITE-SPACE: pre">       </SPAN> @Override  
7.   <SPAN style="WHITE-SPACE: pre">       </SPAN> public View createTabContent(String tag) {  
8.   <SPAN style="WHITE-SPACE: pre">       </SPAN>  // TODO Auto-generated method stub   
9.       
10.    <SPAN style="WHITE-SPACE: pre">      </SPAN> return (new AnalogClock(TabDemo.this));  
11.   <SPAN style="WHITE-SPACE: pre">       </SPAN> }  
12.  <SPAN style="WHITE-SPACE: pre">    </SPAN> });  

<span style="WHITE-SPACE: pre">	</span>TabSpec spec1=tabHost.newTabSpec("Tab 1");
        spec1.setIndicator("Tab 1",getResources().getDrawable(R.drawable.sun));

        spec1.setContent(new TabContentFactory() {
   
  <span style="WHITE-SPACE: pre">		</span> @Override
  <span style="WHITE-SPACE: pre">		</span> public View createTabContent(String tag) {
  <span style="WHITE-SPACE: pre">		</span>  // TODO Auto-generated method stub
    
   <span style="WHITE-SPACE: pre">		</span> return (new AnalogClock(TabDemo.this));
  <span style="WHITE-SPACE: pre">		</span> }
 <span style="WHITE-SPACE: pre">	</span> });