TabHost详解

TabHost详解

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

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

  1. package zyf.tab.test;
  2. import android.app.TabActivity;
  3. public class MyTab extends TabActivity {
  4. }
复制代码

③从父类继承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">
  5. <!--  第一个Tab 对应的布局  -- >
  6.     <LinearLayout android:id="@+id/widget_layout_Blue"
  7.         android:layout_width="fill_parent" android:layout_height="fill_parent"
  8.         androidrientation="vertical" >
  9.         <EditText android:id="@+id/widget34" android:layout_width="fill_parent"
  10.             android:layout_height="wrap_content" android:text="EditText"
  11.             android:textSize="18sp">
  12.         </EditText>
  13.         <Button android:id="@+id/widget30" android:layout_width="wrap_content"
  14.             android:layout_height="wrap_content" android:text="Button">
  15.         </Button>
  16.     </LinearLayout>
  17. <!--  第二个Tab 对应的布局  -- >
  18.     <LinearLayout android:id="@+id/widget_layout_red"
  19.         android:layout_width="fill_parent" android:layout_height="fill_parent"
  20.         androidrientation="vertical"  >
  21.         <AnalogClock android:id="@+id/widget36"
  22.             android:layout_width="wrap_content" android:layout_height="wrap_content">
  23.         </AnalogClock>
  24.     </LinearLayout>
  25. <!--  第三个Tab 对应的布局  -- >
  26.     <LinearLayout android:id="@+id/widget_layout_green"
  27.         android:layout_width="fill_parent" android:layout_height="fill_parent"
  28.         androidrientation="vertical">
  29.         <RadioGroup android:id="@+id/widget43"
  30.             android:layout_width="166px" android:layout_height="98px"
  31.             androidrientation="vertical">
  32.             <RadioButton android:id="@+id/widget44"
  33.                 android:layout_width="wrap_content" android:layout_height="wrap_content"
  34.                 android:text="RadioButton">
  35.             </RadioButton>
  36.             <RadioButton android:id="@+id/widget45"
  37.                 android:layout_width="wrap_content" android:layout_height="wrap_content"
  38.                 android:text="RadioButton">
  39.             </RadioButton>
  40.         </RadioGroup>
  41.     </LinearLayout>
  42. </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详解

TabHost详解

TabHost详解

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

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

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

TabHost广泛运用于android程序中,在程序中运用TabHost,解决了手机屏幕小,显示内容少的问题,如系统自带的拨号程序,就用了TabHost.
TabHost详解
分为拨号、通话纪录、联系人、收藏几个Tab。
先看今天学习的例子的最终效果。

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

1

2

3

4

5

6

7

 <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区分。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<?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>

程序代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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布局:

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(1502270150));   
  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));  
<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));



第二种:不用继承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.     }  

 

你可能感兴趣的:(tabhost)