Android TabHost的使用

1. 最简单的TabHost，Tab来自于layout下的元素 （只从1个Layout中取数据）

（1）效果图

（2）代码

1）tab_demo.xml

[xhtml] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>    
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"   
3.     android:orientation="vertical"    
4.     android:layout_width="fill_parent"    
5.     android:layout_height="fill_parent"    
6.     >    
7.     <TextView android:id="@+id/tab_demo_tv1"    
8.         android:layout_width="fill_parent"     
9.         android:layout_height="fill_parent"     
10.         android:text="tab_demo_tv1"    
11.     />    
12.     <TextView android:id="@+id/tab_demo_tv2"    
13.         android:layout_width="fill_parent"     
14.         android:layout_height="fill_parent"     
15.         android:text="tab_demo_tv2"    
16.     />    
17.     <TextView android:id="@+id/tab_demo_tv3"    
18.         android:layout_width="fill_parent"     
19.         android:layout_height="fill_parent"     
20.         android:text="tab_demo_tv3"    
21.     />    
22. </FrameLayout>   

2）TabDemo.java

[java] view plaincopy

1. public class TabDemo extends TabActivity {    
2.     private TabHost tabHost;    
3.         
4.     public void onCreate(Bundle savedInstanceState) {    
5.         super.onCreate(savedInstanceState);    
6.         tabHost = getTabHost();    
7.             
8.         LayoutInflater.from(this).inflate(R.layout.tab_demo, tabHost.getTabContentView(), true);    
9.         tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("Tab1", null).setContent(R.id.tab_demo_tv1));   
10.         tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("Tab2", null).setContent(R.id.tab_demo_tv2));   
11.         tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("Tab3", null).setContent(R.id.tab_demo_tv3));   
12.             
13.         setContentView(tabHost);    
14.     }    
15. }    

2. TabHost绑定动态View（从2个Layout中取数据）

（1）效果图

（2）代码

1）tab_map.xml

[xhtml] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>    
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"   
3.     android:orientation="vertical"    
4.     android:layout_width="fill_parent"    
5.     android:layout_height="fill_parent"    
6.     android:id="@+id/tab_map_id"    
7.     >    
8. </FrameLayout>   

2）tab_hs.xml

[xhtml] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>    
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical"    
4.     android:layout_width="fill_parent"    
5.     android:layout_height="fill_parent"    
6.     android:id="@+id/tab_hs_id"    
7.     >    
8.     <TextView android:id="@+id/tab_hs_tv"    
9.         android:layout_width="fill_parent"    
10.         android:layout_height="fill_parent"    
11.     />    
12. </FrameLayout>   

3）MapView.java

 

[java] view plaincopy

1. public class MapView extends View {    
2.     public MapView(Context context) {    
3.         super(context);    
4.     }    
5.     protected void onDraw(Canvas canvas) {    
6.         Paint p = new Paint();    
7.         canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.icon), 0, 0, p);  
8.     }    
9. }    

4）TabDemo.java

 

[java] view plaincopy

1. public class TabDemo extends TabActivity {    
2.     private TabHost tabHost;    
3.         
4.     public void onCreate(Bundle savedInstanceState) {    
5.         super.onCreate(savedInstanceState);    
6.         tabHost = getTabHost();    
7.             
8.         createTabSpec_map();    
9.         createTabSpec_hs();    
10.             
11.         setContentView(tabHost);    
12.     }    
13.         
14.     private void createTabSpec_map() {    
15.         LayoutInflater inflater_tab1 = LayoutInflater.from(this);    
16.         inflater_tab1.inflate(R.layout.tab_map, tabHost.getTabContentView());    
17.             
18.         /*  
19.          * R.layout.tab_demo已被LayoutInflater注册，所以这个可以通过findViewById获得其对象  
20.          */    
21.         FrameLayout frameLayout = (FrameLayout) findViewById(R.id.tab_map_id);    
22.         MapView mv = new MapView(this);    
23.         frameLayout.addView(mv);    
24.             
25.         TabHost.TabSpec tabSpec_map = tabHost.newTabSpec("map view");    
26.         tabSpec_map.setIndicator("map view", null);    
27.         tabSpec_map.setContent(R.id.tab_map_id); // 动态绑定基于图片的View(通过一个Layout绑定)    
28.         tabHost.addTab(tabSpec_map);    
29.     }    
30.     private void createTabSpec_hs() {    
31.         LayoutInflater inflater_tab2 = LayoutInflater.from(this);    
32.         inflater_tab2.inflate(R.layout.tab_hs, tabHost.getTabContentView());    
33.             
34.         TabHost.TabSpec tabSpec_hs = tabHost.newTabSpec("hs view");    
35.         tabSpec_hs.setIndicator("hs view");    
36.         tabSpec_hs.setContent(R.id.tab_hs_id); // 绑定一个新的Layout    
37.         tabHost.addTab(tabSpec_hs);    
38.             
39.         /*  
40.          * 这个绑定View的操作必须要重新使用一个新方法来完成，因为Tab的生成是在onCreate()中完成的，onCreate()只被调用一次，  
41.          * 但是数据更新操作是需要反复进行的，如果反复调用createTabSpec_hs()则会生成多个tab页，这是我们不希望的，所以单独把  
42.          * updata分离出来，数据更新时单独调用此方法就可以了。  
43.          */    
44.         updateTabSpec_hs();    
45.     }    
46.     private void updateTabSpec_hs() {    
47.         TextView tv = (TextView) findViewById(R.id.tab_hs_tv);    
48.         tv.setText("This is tab2");    
49.     }    
50. }    

分享到： 

上