TabHost详解

这就是Tab，而盛放Tab的容器就是TabHost
如何实现？？
每一个Tab还对应了一个布局，这个就有点好玩了。一个Activity，对应了多个功能布局。
①新建一个Tab项目，注意，不要生成main Activity

这里不要选
②在包里面新建一个类MyTab，继承于TabActivity
其实，TabActivity是Activity的子类

1. package zyf.tab.test;
3. import android.app.TabActivity;
5. public class MyTab extends TabActivity {
7. }

复制代码

③从父类继承OnCreate()入口方法

1. package zyf.tab.test;
2. import android.app.TabActivity;
3. import android.os.Bundle;
4. public class MyTab extends TabActivity {
5.     @Override
6.     protected void onCreate(Bundle savedInstanceState) {
7.         // TODO Auto-generated method stub
8.         super.onCreate(savedInstanceState);
9.     }
10. }

复制代码

④在Manifest.xml文件中注册一下MyTab类（Activity）

1. <activity android:name=".MyTab">
2.     <intent-filter>
3.         <action android:name="android.intent.action.MAIN"></action>
4.         <category android:name="android.intent.category.LAUNCHER"></category>
5.     </intent-filter>
6. </activity>

复制代码

⑤这时候，需要设计一下标签页对应的布局，一般采用FrameLayout作为根布局，每个标签页面对应一个子节点的Layout

1. <?xml version="1.0" encoding="utf-8"?>
2. <!--  这里是根节点布局  -- >
3. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
4.     android:layout_width="fill_parent" android:layout_height="fill_parent">
6. <!--  第一个Tab 对应的布局  -- >
7.     <LinearLayout android:id="@+id/widget_layout_Blue"
8.         android:layout_width="fill_parent" android:layout_height="fill_parent"
9.         androidrientation="vertical" >
10.         <EditText android:id="@+id/widget34" android:layout_width="fill_parent"
11.             android:layout_height="wrap_content" android:text="EditText"
12.             android:textSize="18sp">
13.         </EditText>
14.         <Button android:id="@+id/widget30" android:layout_width="wrap_content"
15.             android:layout_height="wrap_content" android:text="Button">
16.         </Button>
17.     </LinearLayout>
18. <!--  第二个Tab 对应的布局  -- >
19.     <LinearLayout android:id="@+id/widget_layout_red"
20.         android:layout_width="fill_parent" android:layout_height="fill_parent"
21.         androidrientation="vertical"  >
22.         <AnalogClock android:id="@+id/widget36"
23.             android:layout_width="wrap_content" android:layout_height="wrap_content">
24.         </AnalogClock>
25.     </LinearLayout>
26. <!--  第三个Tab 对应的布局  -- >
27.     <LinearLayout android:id="@+id/widget_layout_green"
28.         android:layout_width="fill_parent" android:layout_height="fill_parent"
29.         androidrientation="vertical">
30.         <RadioGroup android:id="@+id/widget43"
31.             android:layout_width="166px" android:layout_height="98px"
32.             androidrientation="vertical">
33.             <RadioButton android:id="@+id/widget44"
34.                 android:layout_width="wrap_content" android:layout_height="wrap_content"
35.                 android:text="RadioButton">
36.             </RadioButton>
37.             <RadioButton android:id="@+id/widget45"
38.                 android:layout_width="wrap_content" android:layout_height="wrap_content"
39.                 android:text="RadioButton">
40.             </RadioButton>
41.         </RadioGroup>
42.     </LinearLayout>
43. </FrameLayout>

复制代码

⑥首先，应该声明TabHost，然后用LayoutInflater过滤出布局来，给TabHost加上含有Tab页面的FrameLayout

1. private TabHost myTabhost;
2. myTabhost=this.getTabHost();//从TabActivity上面获取放置Tab的TabHost
3. LayoutInflater.from(this).inflate(R.layout.main, myTabhost.getTabContentView(), true);
4. //from(this)从这个TabActivity获取LayoutInflater
5. //R.layout.main 存放Tab布局
6. //通过TabHost获得存放Tab标签页内容的FrameLayout
7. //是否将inflate 拴系到根布局元素上
8. myTabhost.setBackgroundColor(Color.argb(150, 22, 70, 150));
9. //设置一下TabHost的颜色

复制代码

⑦接着，在TabHost创建一个标签，然后设置一下标题／图标／标签页布局

1. myTabhost
2.                 .addTab(myTabhost.newTabSpec("TT")// 制造一个新的标签TT
3.                         .setIndicator("KK",
4.                                 getResources().getDrawable(R.drawable.ajjc))
5.                         // 设置一下显示的标题为KK，设置一下标签图标为ajjc
6.                         .setContent(R.id.widget_layout_red));
7.         //设置一下该标签页的布局内容为R.id.widget_layout_red，这是FrameLayout中的一个子Layout

复制代码

⑧标签切换事件处理，setOnTabChangedListener

1. myTabhost.setOnTabChangedListener(new OnTabChangeListener(){
2.             @Override
3.             public void onTabChanged(String tabId) {
4.                 // TODO Auto-generated method stub
5.             }            
6.         });

复制代码

⑨各个标签页的动态MENU
先把在XML中设计好的MENU放到一个int数组里

1. private static final int myMenuResources[] = { R.menu.phonebook_menu,
2.             R.menu.addphone_menu, R.menu.chatting_menu, R.menu.userapp_menu };

复制代码

在setOnTabChangedListener()方法中根据标签的切换情况来设置myMenuSettingTag

1. @Override
2.     public void onTabChanged(String tagString) {
3.         // TODO Auto-generated method stub
4.         if (tagString.equals("One")) {
5.             myMenuSettingTag = 1;
6.         }
7.         if (tagString.equals("Two")) {
8.             myMenuSettingTag = 2;
9.         }
10.         if (tagString.equals("Three")) {
11.             myMenuSettingTag = 3;
12.         }
13.         if (tagString.equals("Four")) {
14.             myMenuSettingTag = 4;
15.         }
16.         if (myMenu != null) {
17.             onCreateOptionsMenu(myMenu);
18.         }
19.     }

复制代码

然后onCreateOptionsMenu(Menu menu) 方法中通过MenuInflater过滤器动态加入MENU

1.    @Override
2.     public boolean onCreateOptionsMenu(Menu menu) {
3.         // TODO Auto-generated method stub
4.         // Hold on to this
5.         myMenu = menu;
6.         myMenu.clear();//清空MENU菜单
7.         // Inflate the currently selected menu XML resource.
8.         MenuInflater inflater = getMenuInflater();        
9. //从TabActivity这里获取一个MENU过滤器
10.         switch (myMenuSettingTag) {
11.         case 1:
12.             inflater.inflate(myMenuResources[0], menu);
13.             //动态加入数组中对应的XML MENU菜单
14.             break;
15.         case 2:
16.             inflater.inflate(myMenuResources[1], menu);
17.             break;
18.         case 3:
19.             inflater.inflate(myMenuResources[2], menu);
20.             break;
21.         case 4:
22.             inflater.inflate(myMenuResources[3], menu);
23.             break;
24.         default:
25.             break;
26.         }
27.         return super.onCreateOptionsMenu(menu);
28.     }

复制代码

⑩运行效果

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

********************************************************************************************************

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

TabHost广泛运用于android程序中，在程序中运用TabHost，解决了手机屏幕小，显示内容少的问题，如系统自带的拨号程序，就用了TabHost.

分为拨号、通话纪录、联系人、收藏几个Tab。
先看今天学习的例子的最终效果。


分为三个标签Tab1、Tab2、Tab3。
TabHost与普通的Activity有点区别，主程序继承TabActivity，而不是Activity。所以，在新建项目时Creat Activity不要勾选，因为这里创建的是普通的Activity.
建好项目后，新建一个Class,SuperClass选择android.app.TabActivity，然后将这个TabActivity加入AndroidMainifest.xml,用以下代码：

1234567

 <activity android:name=".main"                  android:label="@string/app_name">            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>

这段代码放在application标签内，第一行的main要和刚刚建立的TabActivity名对应。
然后就是布局XML，这里用到FrameLayout，框架布局，把三个Tab的布局放在一个FrameLayout里，用id区分。

12345678910111213141516171819202122232425262728293031323334353637383940414243

<?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"> <!--tab1的布局 -->   <LinearLayout android:id="@+id/tab1"        android:layout_width="fill_parent" android:layout_height="fill_parent"        androidrientation="vertical" >        <EditText android:id="@+id/widget34" android:layout_width="fill_parent"            android:layout_height="wrap_content" android:text="EditText"            android:textSize="18sp">        </EditText>        <Button android:id="@+id/widget30" android:layout_width="wrap_content"            android:layout_height="wrap_content" android:text="Button">        </Button>    </LinearLayout>    <!--tab2的布局 -->    <LinearLayout android:id="@+id/tab2"        android:layout_width="fill_parent" android:layout_height="fill_parent"        androidrientation="vertical"  >        <AnalogClock android:id="@+id/widget36"            android:layout_width="wrap_content" android:layout_height="wrap_content">        </AnalogClock>    </LinearLayout>    <!--tab3的布局 -->    <LinearLayout android:id="@+id/tab3"        android:layout_width="fill_parent" android:layout_height="fill_parent"        androidrientation="vertical">        <RadioGroup android:id="@+id/widget43"            android:layout_width="166px" android:layout_height="98px"            androidrientation="vertical">            <RadioButton android:id="@+id/widget44"                android:layout_width="wrap_content" android:layout_height="wrap_content"                android:text="RadioButton">            </RadioButton>            <RadioButton android:id="@+id/widget45"                android:layout_width="wrap_content" android:layout_height="wrap_content"                android:text="RadioButton">            </RadioButton>        </RadioGroup>    </LinearLayout> </FrameLayout>

程序代码：

12345678910111213141516171819

package com.pocketdigi; import android.app.TabActivity;import android.os.Bundle;import android.view.LayoutInflater;import android.widget.TabHost; public class main extends TabActivity { public void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setTitle("Tab测试");  TabHost tabHost = getTabHost();  LayoutInflater.from(this).inflate(R.layout.main,tabHost.getTabContentView(), true);  tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("tab1").setContent(R.id.tab1));  tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab2").setContent(R.id.tab2));  tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3").setContent(R.id.tab3)); } }

 

 

TabHost的两种实现方式

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

xml布局：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent">
    <LinearLayout android:id="@+id/widget_layout_Blue"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:orientation="vertical" >
        <EditText android:id="@+id/widget34" android:layout_width="fill_parent"
            android:layout_height="wrap_content" android:text="EditText"
            android:textSize="18sp">
        </EditText>
        <Button android:id="@+id/widget30" android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="Button">
        </Button>
    </LinearLayout>
    <LinearLayout android:id="@+id/widget_layout_red"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:orientation="vertical"  >
        <AnalogClock android:id="@+id/widget36"
            android:layout_width="wrap_content" android:layout_height="wrap_content">
        </AnalogClock>
    </LinearLayout>
    <LinearLayout android:id="@+id/widget_layout_green"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:orientation="vertical">
        <RadioGroup android:id="@+id/widget43"
            android:layout_width="166px" android:layout_height="98px"
            android:orientation="vertical">
            <RadioButton android:id="@+id/widget44"
                android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:text="RadioButton">
            </RadioButton>
            <RadioButton android:id="@+id/widget45"
                android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:text="RadioButton">
            </RadioButton>
        </RadioGroup>
    </LinearLayout>
</FrameLayout>

java代码：
super.onCreate(savedInstanceState);
        myTabhost=this.getTabHost();
        //get Tabhost
        LayoutInflater.from(this).inflate(R.layout.main, myTabhost.getTabContentView(), true);
        myTabhost.setBackgroundColor(Color.argb(150, 22, 70, 150));

        myTabhost
                .addTab(myTabhost.newTabSpec("One")// make a new Tab
                        .setIndicator("A")
                        // set the Title and Icon
                        .setContent(R.id.widget_layout_Blue));
        // set the layout

        myTabhost
                .addTab(myTabhost.newTabSpec("Two")// make a new Tab
                        .setIndicator("B",
                                getResources().getDrawable(R.drawable.mumule))
                        // set the Title and Icon
                        .setContent(R.id.widget_layout_green));
        // set the layout

        myTabhost
                .addTab(myTabhost.newTabSpec("Three")// make a new Tab
                        .setIndicator("C",
                                getResources().getDrawable(R.drawable.notepad))
                        // set the Title and Icon
                        .setContent(R.id.widget_layout_red));

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent" android:layout_height="fill_parent"><LinearLayout android:id="@+id/widget_layout_Blue"android:layout_width="fill_parent" android:layout_height="fill_parent"android:orientation="vertical" ><EditText android:id="@+id/widget34" android:layout_width="fill_parent"android:layout_height="wrap_content" android:text="EditText"android:textSize="18sp"></EditText><Button android:id="@+id/widget30" android:layout_width="wrap_content"android:layout_height="wrap_content" android:text="Button"></Button></LinearLayout><LinearLayout android:id="@+id/widget_layout_red"android:layout_width="fill_parent" android:layout_height="fill_parent"android:orientation="vertical"  ><AnalogClock android:id="@+id/widget36"android:layout_width="wrap_content" android:layout_height="wrap_content"></AnalogClock></LinearLayout><LinearLayout android:id="@+id/widget_layout_green"android:layout_width="fill_parent" android:layout_height="fill_parent"android:orientation="vertical"><RadioGroup android:id="@+id/widget43"android:layout_width="166px" android:layout_height="98px"android:orientation="vertical"><RadioButton android:id="@+id/widget44"android:layout_width="wrap_content" android:layout_height="wrap_content"android:text="RadioButton"></RadioButton><RadioButton android:id="@+id/widget45"android:layout_width="wrap_content" android:layout_height="wrap_content"android:text="RadioButton"></RadioButton></RadioGroup></LinearLayout></FrameLayout>java代码：super.onCreate(savedInstanceState);myTabhost=this.getTabHost();//get TabhostLayoutInflater.from(this).inflate(R.layout.main, myTabhost.getTabContentView(), true);myTabhost.setBackgroundColor(Color.argb(150, 22, 70, 150));myTabhost.addTab(myTabhost.newTabSpec("One")// make a new Tab.setIndicator("A")// set the Title and Icon.setContent(R.id.widget_layout_Blue));// set the layoutmyTabhost.addTab(myTabhost.newTabSpec("Two")// make a new Tab.setIndicator("B",getResources().getDrawable(R.drawable.mumule))// set the Title and Icon.setContent(R.id.widget_layout_green));// set the layoutmyTabhost.addTab(myTabhost.newTabSpec("Three")// make a new Tab.setIndicator("C",getResources().getDrawable(R.drawable.notepad))// set the Title and Icon.setContent(R.id.widget_layout_red));

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

xml布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/hometabs"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TabHost android:id="@+id/tabhost"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

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

             <FrameLayout android:id="@android:id/tabcontent"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content">
                    <TextView android:id="@+id/view1"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"/>
                    <TextView android:id="@+id/view2"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"/>
                    <TextView android:id="@+id/view3"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"/>
             </FrameLayout>

         </LinearLayout>
    </TabHost>
</LinearLayout>

java代码：
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.hometabs);

        TabHost tabHost = (TabHost) findViewById(R.id.tabhost);
        tabHost.setup();
        TabWidget tabWidget = tabHost.getTabWidget();

        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("tab1", getResources().getDrawable(R.drawable.mumule))
                .setContent(R.id.view1));

        tabHost.addTab(tabHost.newTabSpec("tab3")
                .setIndicator("tab3")
                .setContent(R.id.view3));

        tabHost.addTab(tabHost.newTabSpec("tab2")
                .setIndicator("tab2")
                .setContent(R.id.view2));

        final int tabs = tabWidget.getChildCount();
        Log.i(TAG, "***tabWidget.getChildCount() : " + tabs);

        final int tabWidth = 90;
        final int tabHeight = 45;

        for (int i = 0; i < tabs; i++) {
        /*  final View view = tabWidget.getChildAt(i);
            view.getLayoutParams().width = tabWidth;
            view.getLayoutParams().height = tabHeight;
            final TextView tv = (TextView) view.findViewById(android.R.id.title);
            tv.setTextColor(this.getResources().getColorStateList(android.R.color.black));
            MarginLayoutParams tvMLP = (MarginLayoutParams)tv.getLayoutParams();
            tvMLP.bottomMargin = 8;*/
        }
    }