Tab与TabHost

来源：互联网发布：windows edge安卓版编辑：程序博客网时间：2024/05/02 02:17

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

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

view source
print?
1package zyf.tab.test; 
2  
3import android.app.TabActivity; 
4  
5public class MyTab extendsTabActivity { 
6  
7}

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

view source
print?
01package zyf.tab.test; 
02import android.app.TabActivity; 
03import android.os.Bundle; 
04public class MyTab extendsTabActivity { 
05    @Override
06    protectedvoid onCreate(Bundle savedInstanceState) {
07        // TODO Auto-generated method stub
08        super.onCreate(savedInstanceState);
09    } 
10}

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

view source
print?
1<activityandroid:name=".MyTab">
2    <intent-filter>
3        <actionandroid:name="android.intent.action.MAIN"></action>
4        <categoryandroid:name="android.intent.category.LAUNCHER"></category>
5    </intent-filter>
6</activity>

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

view source
print?
01<?xmlversion="1.0"encoding="utf-8"?>
02<!--  这里是根节点布局  -- > 
03<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"
04    android:layout_width="fill_parent"android:layout_height="fill_parent">
05  
06<!--  第一个Tab 对应的布局  -- > 
07    <LinearLayoutandroid:id="@+id/widget_layout_Blue"
08        android:layout_width="fill_parent"android:layout_height="fill_parent"
09        androidrientation="vertical"> 
10        <EditTextandroid:id="@+id/widget34"android:layout_width="fill_parent"
11            android:layout_height="wrap_content"android:text="EditText"
12            android:textSize="18sp">
13        </EditText>
14        <Buttonandroid:id="@+id/widget30"android:layout_width="wrap_content"
15            android:layout_height="wrap_content"android:text="Button">
16        </Button>
17    </LinearLayout>
18<!--  第二个Tab 对应的布局  -- > 
19    <LinearLayoutandroid:id="@+id/widget_layout_red"
20        android:layout_width="fill_parent"android:layout_height="fill_parent"
21        androidrientation="vertical" > 
22        <AnalogClockandroid:id="@+id/widget36"
23            android:layout_width="wrap_content"android:layout_height="wrap_content">
24        </AnalogClock>
25    </LinearLayout>
26<!--  第三个Tab 对应的布局  -- > 
27    <LinearLayoutandroid:id="@+id/widget_layout_green"
28        android:layout_width="fill_parent"android:layout_height="fill_parent"
29        androidrientation="vertical">
30        <RadioGroupandroid:id="@+id/widget43"
31            android:layout_width="166px"android:layout_height="98px"
32            androidrientation="vertical">
33            <RadioButtonandroid:id="@+id/widget44"
34                android:layout_width="wrap_content"android:layout_height="wrap_content"
35                android:text="RadioButton">
36            </RadioButton>
37            <RadioButtonandroid: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

view source
print?
1private TabHost myTabhost; 
2myTabhost=this.getTabHost();//从TabActivity上面获取放置Tab的TabHost
3LayoutInflater.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 拴系到根布局元素上 
8myTabhost.setBackgroundColor(Color.argb(150,22, 70,150)); 
9//设置一下TabHost的颜色

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

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

⑧标签切换事件处理，setOnTabChangedListener

view source
print?
1myTabhost.setOnTabChangedListener(newOnTabChangeListener(){ 
2            @Override
3            publicvoid onTabChanged(String tabId) {
4                // TODO Auto-generated method stub
5            }           
6        });

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

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

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

view source
print?
01@Override
02    publicvoid onTabChanged(String tagString) {
03        // TODO Auto-generated method stub
04        if(tagString.equals("One")) {
05            myMenuSettingTag =1; 
06        }
07        if(tagString.equals("Two")) {
08            myMenuSettingTag =2; 
09        }
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

view source
print?
01   @Override
02    publicboolean onCreateOptionsMenu(Menu menu) {
03        // TODO Auto-generated method stub
04        // Hold on to this
05        myMenu = menu;
06        myMenu.clear();//清空MENU菜单
07        // Inflate the currently selected menu XML resource.
08        MenuInflater inflater = getMenuInflater();       
09//从TabActivity这里获取一个MENU过滤器 
10        switch(myMenuSettingTag) { 
11        case1: 
12            inflater.inflate(myMenuResources[0], menu);
13            //动态加入数组中对应的XML MENU菜单
14            break;
15        case2: 
16            inflater.inflate(myMenuResources[1], menu);
17            break;
18        case3: 
19            inflater.inflate(myMenuResources[2], menu);
20            break;
21        case4: 
22            inflater.inflate(myMenuResources[3], menu);
23            break;
24        default:
25            break;
26        }
27        returnsuper.onCreateOptionsMenu(menu);
28    }

menu 布局

view source
print?
1<?xmlversion="1.0"encoding="utf-8"?>
2<menu
3  xmlns:android="http://schemas.android.com/apk/res/android">
4<groupandroid:id="@+id/group_a"><itemandroid:id="@+id/item_a"android:icon="@drawable/gimp"android:title="Gimp"></item>
5</group>
6</menu>

⑩运行效果