TabHost两种实现方式及各个方法的作用

android开发tabhost的两种方式

 

 

找了好多资料，最后总结一下，以后用到的话可以查阅

TabHost ，它是一个用来存放多个Tab标签的容器。其方法setup主要完成的功能便是实例化TabHost的TabWidget和TabContent。

 各个方法的作用：

要用到tab组件，布局layout中必须有TabHost文件，它有一个id，比如 android:id="@+id/tabhost" 或者android:id="@android:id/tabhost"

在TabHost中一般必须有TabWidget，这个主要是用来处理tab的位置、属性等。一般还有FrameLayout组件，用于定义显示的在Tab下显示的组件。

例如：

 TabHost tabs = (TabHost) findViewById(R.id.tabhost);

  tabs.setup();

  TabHost.TabSpec spec = tabs.newTabSpec("tag1");
  spec.setContent(R.id.tab1);
  spec.setIndicator("Clock");
  tabs.addTab(spec);

其中tabs.newTabSpec("tag1")用来new一个tab，同时标记这个tab的tag

setContent()用来处理点击这个tab后的动作，可以是这个Activity下的一个组件，如setContent(R.id.tab1)，也可以是一个intent，比如：setContent(new Intent(this, SubTab.class))

setIndicator()用来标记这个tab的名字，可以是setIndicator("Clock")，也可以包含其他的属性，如图片：setIndicator( "商场",getResources().getDrawable(android.R.drawable.arrow_down_float))

tabs.addTab(spec)将这个tab添加如TabHost

例子一枚：

package com.my.tabwidget;    

1. import java.util.ArrayList;  
2. import java.util.List;  
3.   
4. import android.app.TabActivity;  
5. import android.graphics.Color;  
6. import android.os.Bundle;  
7. import android.view.Gravity;  
8. import android.view.View;  
9. import android.widget.ImageView;  
10. import android.widget.LinearLayout;  
11. import android.widget.TabHost;  
12. import android.widget.TabHost.OnTabChangeListener;  
13. import android.widget.TextView;  
14.   
15. @SuppressWarnings("deprecation")  
16. public class MainActivity extends TabActivity {  
17.   
18.     //声明TabHost对象       
19.         TabHost mTabHost;     
20.         public List<ImageView> imageList = new ArrayList<ImageView>();   
21.         /** Called when the activity is first created. */    
22.         @Override    
23.         public void onCreate(Bundle savedInstanceState)     
24.         {     
25.             super.onCreate(savedInstanceState);     
26.             setContentView(R.layout.activity_main);     
27.                    
28.             //取得TabHost对象       
29.             mTabHost = getTabHost(); 
31.  /* 为TabHost添加标签 */    
32.             //新建一个newTabSpec(newTabSpec)      
33.             //设置其标签和图标(setIndicator)      
34.             //设置内容(setContent)       
35.             mTabHost.addTab(mTabHost.newTabSpec("tab_test1")     
36.                     .setIndicator(composeLayout("TAB_1", R.drawable.img1))     
37.                     .setContent(R.id.textview1));     
38.             mTabHost.addTab(mTabHost.newTabSpec("tab_test2")     
39.                     .setIndicator(composeLayout("TAB_2", R.drawable.img2))     
40.                     .setContent(R.id.textview2));     
41.             mTabHost.addTab(mTabHost.newTabSpec("tab_test3")     
42.                     .setIndicator(composeLayout("TAB_3", R.drawable.img3))     
43.                     .setContent(R.id.textview3));     
44.                    
45.             //设置TabHost的背景颜色      
46.             //mTabHost.setBackgroundColor(Color.argb(150, 22, 70, 150));     
47.             //设置TabHost的背景图片资源      
48.             //mTabHost.setBackgroundResource(R.drawable.image1);      
49.                    
50.             //设置当前显示哪一个标签       
51.             mTabHost.setCurrentTab(0);   
52.             imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.img01));  
53. 1. //标签切换事件处理，setOnTabChangedListener       
    2.             mTabHost.setOnTabChangedListener(new OnTabChangeListener()     
    3.             {     
    4.                 // TODO Auto-generated method stub      
    5.                 @Override    
    6.                 public void onTabChanged(String tabId)     
    7.                 {     
    8.                             // 设置所有选项卡的图片为未选中图片     
    9.                             imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.img1));    
    10.                             imageList.get(1).setImageDrawable(getResources().getDrawable(R.drawable.img2));    
    11.                             imageList.get(2).setImageDrawable(getResources().getDrawable(R.drawable.img3));    
    12.                                 
    13.                             if (tabId.equalsIgnoreCase("tab_test1")) {    
    14.                                 imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.img01));    
    15.                                 // 移动底部背景图片     
    16.                                 //moveTopSelect(0);    
    17.                             } else if (tabId.equalsIgnoreCase("tab_test2")) {    
    18.                                 imageList.get(1).setImageDrawable(getResources().getDrawable(R.drawable.img02));    
    19.                                 // 移动底部背景图片     
    20.                                 //moveTopSelect(1);    
    21.                             } else if (tabId.equalsIgnoreCase("tab_test3")) {    
    22.                                 imageList.get(2).setImageDrawable(getResources().getDrawable(R.drawable.img03));    
    23.                                 // 移动底部背景图片     
    24.                                 //moveTopSelect(2);    
    25.                             }    
    26.   
    27.                 }                
    28.             });     
    29.         }     
    30.         /**  
    31.          * 这个设置Tab标签本身的布局，需要TextView和ImageView不能重合 s:是文本显示的内容 i:是ImageView的图片位置  
    32.          */  
    33.         public View composeLayout(String s, int i) {    
    34.                     // 定义一个LinearLayout布局     
    35.                     LinearLayout layout = new LinearLayout(this);    
    36.                     // 设置布局垂直显示     
    37.                     layout.setOrientation(LinearLayout.VERTICAL);    
    38.                     ImageView iv = new ImageView(this);    
    39.                     imageList.add(iv);    
    40.                     iv.setImageResource(i);    
    41.                     //设置图片布局   
    42.                     LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, 50);    
    43.                     lp.setMargins(0, 0, 0, 0);    
    44.                     layout.addView(iv, lp);    
    45.                     // 定义TextView      
    46.                     TextView tv = new TextView(this);    
    47.                     tv.setGravity(Gravity.CENTER);    
    48.                     tv.setSingleLine(true);    
    49.                     tv.setText(s);    
    50.                     tv.setTextColor(Color.BLACK);    
    51.                     tv.setTextSize(10);    
    52.                     //设置Text布局  
    53.                     layout.addView(tv, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));    
    54.                     return layout;    
    55.                 }  
    56. }  

 

 

 

 

第一种：

不用继承TabActivity，在布局文件中定义TabHost即可，但是TabWidget的id必须是
@android:id/tabs，FrameLayout的id必须是@android:id/tabcontent。TabHost的id可以自定义.

xml布局：

Java代码

1. <?xml version="1.0" encoding="utf-8"?>   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     
3.     android:id="@+id/hometabs"  
4.     android:orientation="vertical"  
5.     android:layout_width="fill_parent"     
6.     android:layout_height="fill_parent">    
7.     <TabHost android:id="@+id/tabhost"  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content">   
10.         <LinearLayout   
11.             android:orientation="vertical"  
12.             android:layout_width="fill_parent"  
13.             android:layout_height="fill_parent">   
14.                
15.             <TabWidget android:id="@android:id/tabs"    
16.               android:orientation="horizontal"  
17.               android:layout_width="wrap_content"  
18.               android:layout_height="wrap_content">   
19.             </TabWidget>   
20.             
21.              <FrameLayout android:id="@android:id/tabcontent"  
22.                   android:layout_width="wrap_content"  
23.                   android:layout_height="wrap_content">   
24.                     <TextView android:id="@+id/view1"  
25.                         android:layout_width="fill_parent"  
26.                         android:layout_height="fill_parent"/>   
27.                     <TextView android:id="@+id/view2"  
28.                         android:layout_width="fill_parent"  
29.                         android:layout_height="fill_parent"/>   
30.                     <TextView android:id="@+id/view3"  
31.                         android:layout_width="fill_parent"  
32.                         android:layout_height="fill_parent"/>   
33.              </FrameLayout>   
34.             
35.          </LinearLayout>   
36.     </TabHost>   
37. </LinearLayout>   
38.   
39. java代码：   
40. protected void onCreate(Bundle savedInstanceState) {   
41.         super.onCreate(savedInstanceState);   
42.         setContentView(R.layout.hometabs);   
43.            
44.         TabHost tabHost = (TabHost) findViewById(R.id.tabhost);   
45.         tabHost.setup();   
46.         TabWidget tabWidget = tabHost.getTabWidget();   
47.            
48.         tabHost.addTab(tabHost.newTabSpec("tab1")   
49.                 .setIndicator("tab1", getResources().getDrawable(R.drawable.mumule))   
50.                 .setContent(R.id.view1));   
51.            
52.         tabHost.addTab(tabHost.newTabSpec("tab3")   
53.                 .setIndicator("tab3")   
54.                 .setContent(R.id.view3));   
55.            
56.         tabHost.addTab(tabHost.newTabSpec("tab2")   
57.                 .setIndicator("tab2")   
58.                 .setContent(R.id.view2));   
59.            
60.         final int tabs = tabWidget.getChildCount();   
61.         Log.i(TAG, "***tabWidget.getChildCount() : " + tabs);   
62.            
63.         final int tabWidth = 90;   
64.         final int tabHeight = 45;   
65.            
66.         for (int i = 0; i < tabs; i++) {   
67.         /*  final View view = tabWidget.getChildAt(i); 
68.             view.getLayoutParams().width = tabWidth; 
69.             view.getLayoutParams().height = tabHeight; 
70.             final TextView tv = (TextView) view.findViewById(android.R.id.title); 
71.             tv.setTextColor(this.getResources().getColorStateList(android.R.color.black)); 
72.             MarginLayoutParams tvMLP = (MarginLayoutParams)tv.getLayoutParams(); 
73.             tvMLP.bottomMargin = 8;*/  
74.         }   
75.     }  

 

 

第二种：

第一种：继承TabActivity，从TabActivity中用getTabHost()方法获取TabHost。只要定义具体Tab内容布局就行了.

xml布局：

Java代码

1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="fill_parent" android:layout_height="fill_parent">   
3.     <LinearLayout android:id="@+id/widget_layout_Blue"  
4.         android:layout_width="fill_parent" android:layout_height="fill_parent"  
5.         android:orientation="vertical" >   
6.         <EditText android:id="@+id/widget34" android:layout_width="fill_parent"  
7.             android:layout_height="wrap_content" android:text="EditText"  
8.             android:textSize="18sp">   
9.         </EditText>   
10.         <Button android:id="@+id/widget30" android:layout_width="wrap_content"  
11.             android:layout_height="wrap_content" android:text="Button">   
12.         </Button>   
13.     </LinearLayout>   
14.     <LinearLayout android:id="@+id/widget_layout_red"  
15.         android:layout_width="fill_parent" android:layout_height="fill_parent"  
16.         android:orientation="vertical"  >   
17.         <AnalogClock android:id="@+id/widget36"  
18.             android:layout_width="wrap_content" android:layout_height="wrap_content">   
19.         </AnalogClock>   
20.     </LinearLayout>   
21.     <LinearLayout android:id="@+id/widget_layout_green"  
22.         android:layout_width="fill_parent" android:layout_height="fill_parent"  
23.         android:orientation="vertical">   
24.         <RadioGroup android:id="@+id/widget43"  
25.             android:layout_width="166px" android:layout_height="98px"  
26.             android:orientation="vertical">   
27.             <RadioButton android:id="@+id/widget44"  
28.                 android:layout_width="wrap_content" android:layout_height="wrap_content"  
29.                 android:text="RadioButton">   
30.             </RadioButton>   
31.             <RadioButton android:id="@+id/widget45"  
32.                 android:layout_width="wrap_content" android:layout_height="wrap_content"  
33.                 android:text="RadioButton">   
34.             </RadioButton>   
35.         </RadioGroup>   
36.     </LinearLayout>   
37. </FrameLayout>   
38.   
39. java代码：   
40. super.onCreate(savedInstanceState);   
41.         myTabhost=this.getTabHost();   
42.         //get Tabhost   
43.         LayoutInflater.from(this).inflate(R.layout.main, myTabhost.getTabContentView(), true);   
44.         myTabhost.setBackgroundColor(Color.argb(150, 22, 70, 150));   
45.            
46.         myTabhost   
47.                 .addTab(myTabhost.newTabSpec("One")// make a new Tab  
48.                         .setIndicator("A")   
49.                         // set the Title and Icon  
50.                         .setContent(R.id.widget_layout_Blue));   
51.         // set the layout   
52.   
53.         myTabhost   
54.                 .addTab(myTabhost.newTabSpec("Two")// make a new Tab  
55.                         .setIndicator("B",   
56.                                 getResources().getDrawable(R.drawable.mumule))   
57.                         // set the Title and Icon  
58.                         .setContent(R.id.widget_layout_green));   
59.         // set the layout   
60.   
61.         myTabhost   
62.                 .addTab(myTabhost.newTabSpec("Three")// make a new Tab  
63.                         .setIndicator("C",   
64.                                 getResources().getDrawable(R.drawable.notepad))   
65.                         // set the Title and Icon  
66.                         .setContent(R.id.widget_layout_red));