深入浅出Tabhost+简单入门Demo

小伙伴们在手机上逛淘宝的时候，会发现在淘宝的下面有个按钮，分别是首页、微淘、社区、购物车和我的淘宝，点击不同的按钮会跳转到不同的页面，目前小编所接手的这个项目，也需要用到类似这样的功能，小编就发挥网络的强大力量，原来人家使用的技术叫做Tabhost，用Tabhost来控制各个选项卡的切换，Tabhost的实现分为两种，一种是继承自TabActivity，继承TabActivity，从TabActivity中用getTabHost()方法获取TabHost。只要定义具体Tab内容布局就行了。另一种是不继承TabActivity，在布局文件中定义TabHost即可，但是TabWidget的id必须是 @android:id/tabs，FrameLayout的id必须是@android:id/tabcontent，TabHost的id可以自定义。今天这篇博文，小编就来简单的介绍一下有关于Tabhost的故事，还请小伙伴多多指教哦`(*∩_∩*)′！

        首先，我们来看第一种实现方式，继承自TabActivity，首先我们来看xml的布局代码，具体代码如下所示：

      

[html] view plain copy print ?

1. <span style="font-size: 18px;"><?xml version="1.0" encoding="utf-8"?> 
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
3.     android:layout_width="fill_parent" 
4.     android:layout_height="fill_parent"> 
5.  
6.     <!-- 第一个布局 --> 
7.     <LinearLayout    
8.         android:id="@+id/view_one" 
9.         android:layout_width="match_parent" 
10.         android:layout_height="match_parent" >       
11.         <TextView 
12.             android:id="@+id/textView_one" 
13.             android:layout_width="wrap_content" 
14.             android:layout_height="wrap_content" 
15.             android:text="等一个故事" /> 
16.     </LinearLayout> 
17.  
18.     <!-- 第二个布局 --> 
19.     <LinearLayout    
20.         android:id="@+id/view_two" 
21.         android:layout_width="match_parent" 
22.         android:layout_height="match_parent" > 
23.          
24.         <TextView 
25.             android:id="@+id/textView_two" 
26.             android:layout_width="wrap_content" 
27.             android:layout_height="wrap_content" 
28.             android:text="当幸福来敲门" /> 
29.     </LinearLayout> 
30.  
31.     <!-- 第三个布局 --> 
32.     <LinearLayout    
33.         android:id="@+id/view_three" 
34.         android:layout_width="match_parent" 
35.         android:layout_height="match_parent" > 
36.          
37.         <TextView 
38.             android:id="@+id/textView_three" 
39.             android:layout_width="wrap_content" 
40.             android:layout_height="wrap_content" 
41.             android:text="微笑闪亮未来" /> 
42.     </LinearLayout> 
43.          
44.  
45. </FrameLayout></span> 

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <!-- 第一个布局 -->
    <LinearLayout   
        android:id="@+id/view_one"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >      
        <TextView
            android:id="@+id/textView_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="等一个故事" />
    </LinearLayout>

    <!-- 第二个布局 -->
    <LinearLayout   
        android:id="@+id/view_two"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        
        <TextView
            android:id="@+id/textView_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="当幸福来敲门" />
    </LinearLayout>

	<!-- 第三个布局 -->
    <LinearLayout   
        android:id="@+id/view_three"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        
        <TextView
            android:id="@+id/textView_three"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微笑闪亮未来" />
    </LinearLayout>
        

</FrameLayout></span>

       接着，我们来看java类中的代码，具体代码如下所示：

    

[java] view plain copy print ?

1. <span style="font-size: 18px;">package com.example.tabhost_trynew; 
2.  
3. import com.example.tabhost_trynew.R; 
4.  
5. import android.app.TabActivity; 
6. import android.os.Bundle; 
7. import android.view.LayoutInflater; 
8. import android.view.Menu; 
9. import android.widget.TabHost; 
10. import android.widget.TabHost.OnTabChangeListener;  
11.  
12. public class MainActivity extends TabActivity{ 
13.  
14.     @Override 
15.     protected void onCreate(Bundle savedInstanceState) { 
16.         super.onCreate(savedInstanceState); 
17.         setTitle("TabDemoActivity"); 
18.         TabHost tabHost = getTabHost(); 
19.         LayoutInflater.from(this).inflate(R.layout.activity_main, 
20.                 tabHost.getTabContentView(), true); 
21.         tabHost.addTab(tabHost.newTabSpec("tab_one").setIndicator("tab_one", getResources().getDrawable(R.drawable.flower)) 
22.                 .setContent(R.id.view_one)); 
23.         tabHost.addTab(tabHost.newTabSpec("tab_two").setIndicator("tab_two", getResources().getDrawable(R.drawable.flower)) 
24.                 .setContent(R.id.view_two)); 
25.         tabHost.addTab(tabHost.newTabSpec("tab_three").setIndicator("tab_three", getResources().getDrawable(R.drawable.flower)) 
26.                 .setContent(R.id.view_three)); 
27.          
28.          
29.          //标签切换事件处理，setOnTabChangedListener 
30.         tabHost.setOnTabChangedListener(new OnTabChangeListener(){   
31.             @Override 
32.             public void onTabChanged(String tabId) { 
33.                 if (tabId.equals("tab_one")) {   //第一个标签 
34.                 } 
35.                 if (tabId.equals("tab_two")) {   //第二个标签 
36.                 } 
37.                 if (tabId.equals("tab_three")) {   //第三个标签 
38.                 } 
39.             }             
40.         });  
41.          
42.          
43.     } 
44.      
45.     @Override 
46.     public boolean onCreateOptionsMenu(Menu menu) { 
47.          
48.         getMenuInflater().inflate(R.menu.main, menu); 
49.         return true; 
50.     } 
51.  
52.  
53.  
54. } 
55. </span> 

<span style="font-size:18px;">package com.example.tabhost_trynew;

import com.example.tabhost_trynew.R;

import android.app.TabActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener; 

public class MainActivity extends TabActivity{

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setTitle("TabDemoActivity");
		TabHost tabHost = getTabHost();
		LayoutInflater.from(this).inflate(R.layout.activity_main,
				tabHost.getTabContentView(), true);
		tabHost.addTab(tabHost.newTabSpec("tab_one").setIndicator("tab_one", getResources().getDrawable(R.drawable.flower))
				.setContent(R.id.view_one));
		tabHost.addTab(tabHost.newTabSpec("tab_two").setIndicator("tab_two", getResources().getDrawable(R.drawable.flower))
				.setContent(R.id.view_two));
		tabHost.addTab(tabHost.newTabSpec("tab_three").setIndicator("tab_three", getResources().getDrawable(R.drawable.flower))
				.setContent(R.id.view_three));
		
		
		 //标签切换事件处理，setOnTabChangedListener
        tabHost.setOnTabChangedListener(new OnTabChangeListener(){  
            @Override
            public void onTabChanged(String tabId) {
            	if (tabId.equals("tab_one")) {   //第一个标签
                }
                if (tabId.equals("tab_two")) {   //第二个标签
                }
                if (tabId.equals("tab_three")) {   //第三个标签
                }
            }            
        }); 
        
    	
	}
	
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}



}
</span>

       我们来看一下运行效果，如下图所示：

      

       接着，我们来看第二种实现方式，不继承自TabActivity，首先，我们来看xml的布局代码，具体代码如下所示：

      

[html] view plain copy print ?

1. <span style="font-size: 18px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
2.     xmlns:tools="http://schemas.android.com/tools" 
3.     android:layout_width="match_parent" 
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" 
6.     tools:context=".MainActivity" > 
7.    
8.      <TabHost 
9.         android:id="@+id/tabhost" 
10.         android:layout_width="match_parent" 
11.         android:layout_height="wrap_content"> 
12.  
13.         <LinearLayout 
14.             android:layout_width="match_parent" 
15.             android:layout_height="match_parent" 
16.             android:orientation="vertical" > 
17.  
18.             <TabWidget 
19.                 android:id="@android:id/tabs" 
20.                 android:layout_width="match_parent" 
21.                 android:layout_height="wrap_content" > 
22.             </TabWidget> 
23.  
24.             <FrameLayout 
25.                 android:id="@android:id/tabcontent" 
26.                 android:layout_width="match_parent" 
27.                 android:layout_height="match_parent" > 
28.  
29.                 <!-- 第一个tab的布局 --> 
30.                 <LinearLayout 
31.                     android:id="@+id/tab1" 
32.                     android:layout_width="match_parent" 
33.                     android:layout_height="match_parent" > 
34.  
35.                     <TextView 
36.                         android:id="@+id/textView1" 
37.                         android:layout_width="wrap_content" 
38.                         android:layout_height="wrap_content" 
39.                         android:text="等一个故事" /> 
40.  
41.                 </LinearLayout> 
42.  
43.                 <!-- 第二个tab的布局 --> 
44.                 <LinearLayout 
45.                     android:id="@+id/tab2" 
46.                     android:layout_width="match_parent" 
47.                     android:layout_height="match_parent" > 
48.  
49.                     <TextView 
50.                         android:id="@+id/textView2" 
51.                         android:layout_width="wrap_content" 
52.                         android:layout_height="wrap_content" 
53.                         android:text="当幸福来敲门" /> 
54.  
55.                 </LinearLayout> 
56.  
57.                 <!-- 第三个tab的布局 --> 
58.                 <LinearLayout 
59.                     android:id="@+id/tab3" 
60.                     android:layout_width="match_parent" 
61.                     android:layout_height="match_parent" > 
62.  
63.                     <TextView 
64.                         android:id="@+id/textView3" 
65.                         android:layout_width="wrap_content" 
66.                         android:layout_height="wrap_content" 
67.                         android:text="微笑闪亮未来" /> 
68.  
69.                 </LinearLayout> 
70.             </FrameLayout> 
71.         </LinearLayout> 
72.     </TabHost>  
73.      
74. </LinearLayout></span> 

<span style="font-size:18px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:orientation="vertical"
    tools:context=".MainActivity" >
  
     <TabHost
        android:id="@+id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
            </TabWidget>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <!-- 第一个tab的布局 -->
                <LinearLayout
                    android:id="@+id/tab1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >

                    <TextView
                        android:id="@+id/textView1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="等一个故事" />

                </LinearLayout>

                <!-- 第二个tab的布局 -->
                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >

                    <TextView
                        android:id="@+id/textView2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="当幸福来敲门" />

                </LinearLayout>

                <!-- 第三个tab的布局 -->
                <LinearLayout
                    android:id="@+id/tab3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >

                    <TextView
                        android:id="@+id/textView3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="微笑闪亮未来" />

                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost> 
    
</LinearLayout></span>

       接着，我们来看java类中的代码，代码如下所示：

[java] view plain copy print ?

1. <span style="font-size: 18px;">package com.example.tabhost_try2; 
2.  
3. import android.os.Bundle; 
4. import android.app.Activity; 
5. import android.view.Menu; 
6. import android.widget.TabHost; 
7.  
8. public class MainActivity extends Activity { 
9.  
10.     @Override 
11.     protected void onCreate(Bundle savedInstanceState) { 
12.         super.onCreate(savedInstanceState); 
13.         setContentView(R.layout.activity_main); 
14.          
15.         //初始化TabHost容器 
16.         TabHost th=(TabHost)findViewById(R.id.tabhost); 
17.         th.setup();             
18.          
19.         //在TabHost创建标签，然后设置：标题／图标／标签页布局 
20.         th.addTab(th.newTabSpec("tab1").setIndicator("tab_one",getResources().getDrawable(R.drawable.flower)).setContent(R.id.tab1)); 
21.         th.addTab(th.newTabSpec("tab2").setIndicator("tab_two",getResources().getDrawable(R.drawable.flower)).setContent(R.id.tab2)); 
22.         th.addTab(th.newTabSpec("tab3").setIndicator("tab_three",getResources().getDrawable(R.drawable.flower)).setContent(R.id.tab3)); 
23.          
24.  
25.        //上面的null可以为getResources().getDrawable(R.drawable.图片名)设置图标  
26.  
27.     } 
28.  
29.     @Override 
30.     public boolean onCreateOptionsMenu(Menu menu) { 
31.         // Inflate the menu; this adds items to the action bar if it is present. 
32.         getMenuInflater().inflate(R.menu.main, menu); 
33.         return true; 
34.     } 
35.  
36. } 
37. </span> 

<span style="font-size:18px;">package com.example.tabhost_try2;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.TabHost;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		//初始化TabHost容器
		TabHost th=(TabHost)findViewById(R.id.tabhost);
		th.setup();            
		
		//在TabHost创建标签，然后设置：标题／图标／标签页布局
		th.addTab(th.newTabSpec("tab1").setIndicator("tab_one",getResources().getDrawable(R.drawable.flower)).setContent(R.id.tab1));
		th.addTab(th.newTabSpec("tab2").setIndicator("tab_two",getResources().getDrawable(R.drawable.flower)).setContent(R.id.tab2));
		th.addTab(th.newTabSpec("tab3").setIndicator("tab_three",getResources().getDrawable(R.drawable.flower)).setContent(R.id.tab3));
		

       //上面的null可以为getResources().getDrawable(R.drawable.图片名)设置图标 

	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}
</span>

      我们来看一下运行效果，如下所示：

      

      小编寄语：该博客小编主要简单的介绍了Tabhost的相关知识，一个是不继承TabActivity，一个是继承自TabActivity；还是那句话对于小编来说，既是挑战更是机遇，因为知识都是相通的，再者来说，在小编的程序人生中，留下最珍贵的记忆，虽然以后小编不一定从事安卓这个行业，代码世界里，很多种事，有的甜蜜，有的温馨，有的婉转成歌，有的绵延不息，在这些故事里，我们唯一的共通之处就是，某年，某月，某个波澜不惊的日子里，曾经很爱很爱你！爱你--这段接触Android日子里，安卓带给小编的种种的惊喜。