标签: TabHost

TabHost详解

正文
TabHost的实现分为两种,一个是不继承TabActivity,一个是继承自TabActivity;当然了选用继承自TabActivity的话就相对容易一些,下面来看看分别是怎样来实现的吧。

方法一、定义tabhost:不用继承TabActivity
1、布局文件:activity_main.xml
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical”
tools:context=”.MainActivity” >
<Button
android:id=”@+id/button1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Button” />
<TabHost
android:id=”@+id/tabhost”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”>

<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical” >

<TabWidget
android:id=”@android:id/tabs”
android:layout_width=”match_parent”
android:layout_height=”wrap_content” >
</TabWidget>

<FrameLayout
android:id=”@android:id/tabcontent”
android:layout_width=”match_parent”
android:layout_height=”match_parent” >

<!– *个tab的布局 –>
<LinearLayout
android:id=”@+id/tab1″
android:layout_width=”match_parent”
android:layout_height=”match_parent” >

<TextView
android:id=”@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”林炳东” />

</LinearLayout>

<!– 第二个tab的布局 –>
<LinearLayout
android:id=”@+id/tab2″
android:layout_width=”match_parent”
android:layout_height=”match_parent” >

<TextView
android:id=”@+id/textView2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”张小媛” />

</LinearLayout>

<!– 第三个tab的布局 –>
<LinearLayout
android:id=”@+id/tab3″
android:layout_width=”match_parent”
android:layout_height=”match_parent” >

<TextView
android:id=”@+id/textView3″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”马贝贝” />

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

</LinearLayout>
2、JAVA代码

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

TabHost th=(TabHost)findViewById(R.id.tabhost);
th.setup(); //初始化TabHost容器

//在TabHost创建标签,然后设置:标题/图标/标签页布局
th.addTab(th.newTabSpec(“tab1”).setIndicator(“标签1”,getResources().getDrawable(R.drawable.ic_launcher)).setContent(R.id.tab1));
th.addTab(th.newTabSpec(“tab2”).setIndicator(“标签2”,null).setContent(R.id.tab2));
th.addTab(th.newTabSpec(“tab3”).setIndicator(“标签3”,null).setContent(R.id.tab3));

//上面的null可以为getResources().getDrawable(R.drawable.图片名)设置图标

}
}
效果图:

%title插图%num

此例源码地址:http://download.csdn.net/detail/harvic880925/6657611  (不要分,欢迎下载)

方法二:Tab的内容分开:不用继承TabActivity
1、*个tab的XML布局文件,tab1.xml:
<?xml version=”1.0″ encoding=”UTF-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/LinearLayout01″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”>
<TextView
android:text=”我是标签1的内容喔”
android:id=”@+id/TextView01″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”>
</TextView>
</LinearLayout>
2、第二个tab的XML布局文件,tab2.xml:
<?xml version=”1.0″ encoding=”UTF-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/LinearLayout02″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”>

<TextView android:text=”标签2″
android:id=”@+id/TextView01″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />
</LinearLayout>
3、主布局文件,activity_main.xml:
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:orientation=”vertical” >

<TabHost
android:id=”@+id/tabhost”
android:layout_width=”match_parent”
android:layout_height=”match_parent” >

<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical” >

<TabWidget
android:id=”@android:id/tabs”
android:layout_width=”match_parent”
android:layout_height=”wrap_content” >
</TabWidget>

<FrameLayout
android:id=”@android:id/tabcontent”
android:layout_width=”match_parent”
android:layout_height=”match_parent” >

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

</LinearLayout>
4、JAVA代码:
public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

TabHost m = (TabHost)findViewById(R.id.tabhost);
m.setup();

LayoutInflater i=LayoutInflater.from(this);
i.inflate(R.layout.tab1, m.getTabContentView());
i.inflate(R.layout.tab2, m.getTabContentView());//动态载入XML,而不需要Activity

m.addTab(m.newTabSpec(“tab1”).setIndicator(“标签1”).setContent(R.id.LinearLayout01));
m.addTab(m.newTabSpec(“tab2”).setIndicator(“标签2”).setContent(R.id.LinearLayout02));

}
}
效果图:

%title插图%num
此例源码地址:http://download.csdn.net/detail/harvic880925/6657679   (不要分,欢迎下载)

方法三:继承自TabActivity
1、主布局文件,activity_main.xml:
<?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”>

<!– *个布局 –>
<LinearLayout
android:id=”@+id/view1″
android:layout_width=”match_parent”
android:layout_height=”match_parent” >
<TextView
android:id=”@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”张小媛” />
</LinearLayout>

<!– 第二个布局 –>
<LinearLayout
android:id=”@+id/view2″
android:layout_width=”match_parent”
android:layout_height=”match_parent” >

<TextView
android:id=”@+id/textView2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”马贝贝” />
</LinearLayout>

<!– 第三个布局 –>
<TextView android:id=”@+id/view3″
android:background=”#00ff00″
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:text=”Tab3″/>

</FrameLayout>
2、JAVA代码:
先将派生自Activity改为TabActivity,然后代码如下:

 

public class MainActivity extends TabActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setTitle(“TabDemoActivity”);
TabHost tabHost = getTabHost();
LayoutInflater.from(this).inflate(R.layout.activity_main,
tabHost.getTabContentView(), true);
tabHost.addTab(tabHost.newTabSpec(“tab1”).setIndicator(“tab1”, getResources().getDrawable(R.drawable.ic_launcher))
.setContent(R.id.view1));
tabHost.addTab(tabHost.newTabSpec(“tab3”).setIndicator(“tab2”)
.setContent(R.id.view2));
tabHost.addTab(tabHost.newTabSpec(“tab3”).setIndicator(“tab3”)
.setContent(R.id.view3));

//标签切换事件处理,setOnTabChangedListener
tabHost.setOnTabChangedListener(new OnTabChangeListener(){
@Override
public void onTabChanged(String tabId) {
if (tabId.equals(“tab1”)) { //*个标签
}
if (tabId.equals(“tab2”)) { //第二个标签
}
if (tabId.equals(“tab3”)) { //第三个标签
}
}
});

}

}
效果如下:
%title插图%num

TabHost的两种用法

方法1.在tabhost中直接导入xml进去。如下:

  1. <span style=“font-size:18px;”> <TabHost
  2. android:id=“@+id/tabhost”
  3. android:layout_width=“fill_parent”
  4. android:layout_height=“fill_parent” >
  5. <LinearLayout
  6. android:layout_width=“fill_parent”
  7. android:layout_height=“fill_parent”
  8. android:orientation=“vertical” >
  9. <TabWidget
  10. android:id=“@android:id/tabs”
  11. android:layout_width=“fill_parent”
  12. android:layout_height=“55dp”
  13. android:gravity=“center” />
  14. <FrameLayout
  15. android:id=“@android:id/tabcontent”
  16. android:layout_width=“fill_parent”
  17. android:layout_height=“fill_parent” >
  18. <ScrollView
  19. android:layout_width=“match_parent”
  20. android:layout_height=“wrap_content” >
  21. <RelativeLayout
  22. android:id=“@+id/relativeLayout_weight”
  23. android:layout_width=“match_parent”
  24. android:layout_height=“wrap_content” >
  25. <include
  26. android:id=“@+id/layout_add_data_weight”
  27. android:layout_width=“match_parent”
  28. android:layout_height=“wrap_content”
  29. layout=“@layout/view_xdata_weight” />
  30. </RelativeLayout>
  31. </ScrollView>
  32. </FrameLayout>
  33. </LinearLayout>
  34. </TabHost>
  35. </span>

 

  1. <span style=“font-size:18px;”>mTabHost = (TabHost) this.findViewById(R.id.tabhost);
  2. mTabHost.setup();
  3. TabHost.TabSpec tabWeight = mTabHost.newTabSpec(“tab_weight”);
  4. tabWeight.setContent(R.id.relativeLayout_weight);
  5. tabWeight.setIndicator(getResources().getString(R.string.weight));
  6. mTabHost.addTab(tabWeight);</span>

第二种方法就是和Activity关联在一起:

使用方式如下 :

  1. <span style=“font-size:18px;”> TabHost tabHost = getTabHost(); // The activity TabHost
  2. TabHost.TabSpec spec; // Resusable TabSpec for each tab
  3. Intent intent; // Reusable Intent for each tab
  4. intent = new Intent().setClass(this, ArtistsActivity.class);
  5. spec = tabHost.newTabSpec(“artists”).setIndicator(“Artists”,
  6. res.getDrawable(R.drawable.icon)).setContent(intent);
  7. System.out.println(spec);
  8. tabHost.addTab(spec);</span>

Android选项卡TabHost功能和用法

1、选项卡TabHost介绍
TabHost可以方便地在窗口上放置多个标签页,每个标签页相当于获得了一个与外部容器大小相同的组件摆放区域
TabHost是一个简单的容器,提供如下两种方法来创建选项卡
newTabSpec(String tag):创建选项卡
addTab(TabHost.TabSpec tabSpec):添加选项卡
使用TabHost有三种方法

2、方法1,继承TabActivity
主布局文件不需要定义TabHost组件,这里用三个垂直的LinearLayout作为标签页,每个标签页里面有两个TextView组件,main_tab.xml代码如下:

  1. <FrameLayout
  2. xmlns:android=“http://schemas.android.com/apk/res/android”
  3. android:id=“@android:id/tabcontent”
  4. android:layout_width=“match_parent”
  5. android:layout_height=“match_parent”>
  6. <!– 定义*个标签页的内容 –>
  7. <LinearLayout
  8. android:id=“@+id/tab01”
  9. android:orientation=“vertical”
  10. android:layout_width=“match_parent”
  11. android:layout_height=“match_parent”>
  12. <TextView
  13. android:layout_width=“wrap_content”
  14. android:layout_height=“wrap_content”
  15. android:text=“*个标签页的第1个TextView组件”
  16. android:textSize=“8pt” />
  17. <TextView
  18. android:layout_width=“wrap_content”
  19. android:layout_height=“wrap_content”
  20. android:text=“*个标签页的第2个TextView组件”
  21. android:textSize=“8pt” />
  22. </LinearLayout>
  23. <!– 定义第二个标签页的内容 –>
  24. <LinearLayout
  25. android:id=“@+id/tab02”
  26. android:orientation=“vertical”
  27. android:layout_width=“match_parent”
  28. android:layout_height=“match_parent”>
  29. <TextView
  30. android:layout_width=“wrap_content”
  31. android:layout_height=“wrap_content”
  32. android:text=“第二个标签页的第1个TextView组件”
  33. android:textSize=“8pt” />
  34. <TextView
  35. android:layout_width=“wrap_content”
  36. android:layout_height=“wrap_content”
  37. android:text=“第二个标签页的第2个TextView组件”
  38. android:textSize=“8pt” />
  39. </LinearLayout>
  40. <!– 定义第三个标签页的内容 –>
  41. <LinearLayout
  42. android:id=“@+id/tab03”
  43. android:orientation=“vertical”
  44. android:layout_width=“match_parent”
  45. android:layout_height=“match_parent”>
  46. <TextView
  47. android:layout_width=“wrap_content”
  48. android:layout_height=“wrap_content”
  49. android:text=“第三个标签页的第1个TextView组件”
  50. android:textSize=“8pt” />
  51. <TextView
  52. android:layout_width=“wrap_content”
  53. android:layout_height=“wrap_content”
  54. android:text=“第三个标签页的第2个TextView组件”
  55. android:textSize=“8pt” />
  56. </LinearLayout>
  57. </FrameLayout>

在Java代码中将Activity继承TabActivity,具体代码如下:

  1. package com.example.tabhosttest;
  2. import android.app.TabActivity;
  3. import android.os.Bundle;
  4. import android.view.LayoutInflater;
  5. import android.widget.TabHost;
  6. import android.widget.TabHost.OnTabChangeListener;
  7. import android.widget.Toast;
  8. public class MainActivity extends TabActivity
  9. {
  10. @Override
  11. public void onCreate(Bundle savedInstanceState)
  12. {
  13. super.onCreate(savedInstanceState);
  14. //setContentView(R.layout.main_tab);
  15. // 获取该Activity里面的TabHost组件
  16. TabHost tabHost = getTabHost();
  17. LayoutInflater.from(this).inflate(R.layout.main_tab,
  18. tabHost.getTabContentView(), true);
  19. // 创建*个Tab页
  20. /*TabHost.TabSpec tab1 = tabHost.newTabSpec("tab1")
  21. .setIndicator("标签页一") // 设置标题
  22. .setContent(R.id.tab01); //设置内容
  23. // 添加*个标签页
  24. tabHost.addTab(tab1);
  25. TabHost.TabSpec tab2 = tabHost.newTabSpec("tab2")
  26. .setIndicator("标签页二")
  27. .setContent(R.id.tab02);
  28. // 添加第二个标签页
  29. tabHost.addTab(tab2);
  30. TabHost.TabSpec tab3 = tabHost.newTabSpec("tab3")
  31. .setIndicator("标签页三")
  32. .setContent(R.id.tab03);
  33. // 添加第三个标签页
  34. tabHost.addTab(tab3);*/
  35. /* 以上创建和添加标签页也可以用如下代码实现 */
  36. tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("标签页一").setContent(R.id.tab01));
  37. tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("标签页二").setContent(R.id.tab02));
  38. tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("标签页三").setContent(R.id.tab03));
  39. //标签切换事件处理,setOnTabChangedListener
  40. tabHost.setOnTabChangedListener(new OnTabChangeListener(){
  41. @Override
  42. // tabId是newTabSpec参数设置的tab页名,并不是layout里面的标识符id
  43. public void onTabChanged(String tabId) {
  44. if (tabId.equals("tab1")) { //*个标签
  45. Toast.makeText(MainActivity.this, "点击标签页一", Toast.LENGTH_SHORT).show();
  46. }
  47. if (tabId.equals("tab2")) { //第二个标签
  48. Toast.makeText(MainActivity.this, "点击标签页二", Toast.LENGTH_SHORT).show();
  49. }
  50. if (tabId.equals("tab3")) { //第三个标签
  51. Toast.makeText(MainActivity.this, "点击标签页三", Toast.LENGTH_SHORT).show();
  52. }
  53. }
  54. });
  55. }
  56. }

这里有两个地方注意一下,*没有使用setContentView,而是用inflate方法;第二在设置标签页改变监听器时,onTabChanged的参数tabId是使用newTabSpec方法的参数设置的标签页名称,而不是布局文件中标签页的标识符Id;第三为了测试方便使用了Toast,
关于inflate和Toast,下面再学习,先简单了解一下
LayoutInflater的作用是将xml布局文件实例话,Toast是在屏幕上显示提示信息
点击第二个标签页之后,显示效果如下图9-2-1所示:

%title插图%num

图 9-2-1

 

3、方法2,在布局文件中使用TabHost,不用继承TabActivity
使用findViewById获取TabHost组件
1 在界面布局中定义TabHost组件,并为该组件定义选项卡内容
2 使用findViewById获取TabHost组件
3 通过TabHost对象的方法来创建和添加选项卡
布局文件为activity_main.xml如下:

  1. <TabHost
  2.     xmlns:android=“http://schemas.android.com/apk/res/android”
  3.     android:id=“@android:id/tabhost”
  4.      android:layout_width=“match_parent”
  5.     android:layout_height=“match_parent”
  6.     android:layout_weight=“1”>
  7.     <LinearLayout 
  8.         android:orientation=“vertical”
  9.         android:layout_width=“match_parent”
  10.         android:layout_height=“match_parent”>
  11.        <!– TabWidget组件id值不可变–>
  12.        <TabWidget 
  13.            android:id=“@android:id/tabs”
  14.             android:layout_width=“match_parent”
  15.             android:layout_height=“wrap_content”>
  16.        </TabWidget>
  17.        <!– FrameLayout布局,id值不可变–>
  18.        <FrameLayout 
  19.            android:id=“@android:id/tabcontent”
  20.            android:layout_width=“fill_parent”
  21.            android:layout_height=“fill_parent”
  22.            android:layout_above=“@android:id/tabs”>
  23.            <!– *个tab的布局 –>
  24.            <LinearLayout  
  25.                android:id=“@+id/tab1”
  26.                android:layout_width=“match_parent”
  27.                android:layout_height=“match_parent” >
  28.                <TextView  
  29.                     android:layout_width=“wrap_content”
  30.                     android:layout_height=“wrap_content”
  31.                     android:text=“*个tab的布局” />
  32.            </LinearLayout>
  33.            <!– 第二个tab的布局 –>
  34.            <LinearLayout  
  35.                android:id=“@+id/tab2”
  36.                android:layout_width=“match_parent”
  37.                android:layout_height=“match_parent” >
  38.                <TextView  
  39.                     android:layout_width=“wrap_content”
  40.                     android:layout_height=“wrap_content”
  41.                     android:text=“第二个tab的布局” />
  42.            </LinearLayout>
  43.        </FrameLayout>
  44.     </LinearLayout>
  45. </TabHost>

 

java代码如下:

package com.example.tabhost;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TabHost;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

TabHost tab = (TabHost) findViewById(android.R.id.tabhost);

//初始化TabHost容器
tab.setup();
//在TabHost创建标签,然后设置:标题/图标/标签页布局
tab.addTab(tab.newTabSpec(“tab1”).setIndicator(“本地音乐” , null).setContent(R.id.tab1));
tab.addTab(tab.newTabSpec(“tab2”).setIndicator(“网络音乐” , null).setContent(R.id.tab2));

}

}

这段非转载代码,用的和作者不是一个xml,效果图如下:

%title插图%num

4、方法3基本和方法2类似,不用继承TabActivity,只是Tab的内容分开到单独的xml文件,每个标签页都需要inflate一次,和方法2*大的区别就是标签页分开到不同的xml文件中
tab1对应的tab1.xml:

  1. <LinearLayout
  2. xmlns:android=“http://schemas.android.com/apk/res/android”
  3. android:id=“@+id/tab01”
  4. android:orientation=“vertical”
  5. android:layout_width=“match_parent”
  6. android:layout_height=“match_parent”>
  7. <TextView
  8. android:layout_width=“wrap_content”
  9. android:layout_height=“wrap_content”
  10. android:text=“*个标签页的第1个TextView组件”
  11. android:textSize=“8pt” />
  12. <TextView
  13. android:layout_width=“wrap_content”
  14. android:layout_height=“wrap_content”
  15. android:text=“*个标签页的第2个TextView组件”
  16. android:textSize=“8pt” />
  17. </LinearLayout>

tab2对应的tab2.xml:

  1. <LinearLayout
  2. xmlns:android=“http://schemas.android.com/apk/res/android”
  3. android:id=“@+id/tab02”
  4. android:orientation=“vertical”
  5. android:layout_width=“match_parent”
  6. android:layout_height=“match_parent”>
  7. <TextView
  8. android:layout_width=“wrap_content”
  9. android:layout_height=“wrap_content”
  10. android:text=“第二个标签页的第1个TextView组件”
  11. android:textSize=“8pt” />
  12. <TextView
  13. android:layout_width=“wrap_content”
  14. android:layout_height=“wrap_content”
  15. android:text=“第二个标签页的第2个TextView组件”
  16. android:textSize=“8pt” />
  17. </LinearLayout>

tab3对应的tab3.xml:

  1. <LinearLayout
  2. xmlns:android=“http://schemas.android.com/apk/res/android”
  3. android:id=“@+id/tab03”
  4. android:orientation=“vertical”
  5. android:layout_width=“match_parent”
  6. android:layout_height=“match_parent”>
  7. <TextView
  8. android:layout_width=“wrap_content”
  9. android:layout_height=“wrap_content”
  10. android:text=“第三个标签页的第1个TextView组件”
  11. android:textSize=“8pt” />
  12. <TextView
  13. android:layout_width=“wrap_content”
  14. android:layout_height=“wrap_content”
  15. android:text=“第三个标签页的第2个TextView组件”
  16. android:textSize=“8pt” />
  17. </LinearLayout>

主布局文件main.xml:

  1. <?xml version=”1.0″ encoding=”utf-8″?>
  2. <TabHost
  3. xmlns:android=“http://schemas.android.com/apk/res/android”
  4. android:id=“@+id/tabhost”
  5. android:layout_width=“match_parent”
  6. android:layout_height=“match_parent”
  7. android:layout_weight=“1”>
  8. <LinearLayout
  9. android:layout_width=“match_parent”
  10. android:layout_height=“match_parent”
  11. android:orientation=“vertical”>
  12. <TabWidget
  13. android:id=“@android:id/tabs”
  14. android:layout_width=“match_parent”
  15. android:layout_height=“wrap_content”/>
  16. <FrameLayout
  17. android:id=“@android:id/tabcontent”
  18. android:layout_width=“match_parent”
  19. android:layout_height=“match_parent”>
  20. </FrameLayout>
  21. </LinearLayout>
  22. </TabHost>

Java代码如下:

  1. package com.example.tabhosttest;
  2. import android.app.Activity;
  3. import android.app.TabActivity;
  4. import android.os.Bundle;
  5. import android.view.LayoutInflater;
  6. import android.widget.TabHost;
  7. import android.widget.TabHost.OnTabChangeListener;
  8. import android.widget.Toast;
  9. public class MainActivity extends Activity
  10. {
  11. @Override
  12. public void onCreate(Bundle savedInstanceState)
  13. {
  14. super.onCreate(savedInstanceState);
  15. // 方法2、3使用:
  16. setContentView(R.layout.main);
  17. // 获取该Activity里面的TabHost组件
  18. // 方法1使用:
  19. // TabHost tabHost = getTabHost();
  20. // 方法1使用:
  21. // LayoutInflater.from(this).inflate(R.layout.main_tab, tabHost.getTabContentView(), true);
  22. // 方法2、3使用
  23. TabHost tabHost = (TabHost)findViewById(R.id.tabhost);
  24. tabHost.setup();
  25. // 方法3使用,动态载入xml,不需要Activity
  26. LayoutInflater.from(this).inflate(R.layout.tab1, tabHost.getTabContentView());
  27. LayoutInflater.from(this).inflate(R.layout.tab2, tabHost.getTabContentView());
  28. LayoutInflater.from(this).inflate(R.layout.tab3, tabHost.getTabContentView());
  29. // 创建*个Tab页
  30. /*TabHost.TabSpec tab1 = tabHost.newTabSpec("tab1")
  31. .setIndicator("标签页一") // 设置标题
  32. .setContent(R.id.tab01); //设置内容
  33. // 添加*个标签页
  34. tabHost.addTab(tab1);
  35. TabHost.TabSpec tab2 = tabHost.newTabSpec("tab2")
  36. .setIndicator("标签页二")
  37. .setContent(R.id.tab02);
  38. // 添加第二个标签页
  39. tabHost.addTab(tab2);
  40. TabHost.TabSpec tab3 = tabHost.newTabSpec("tab3")
  41. .setIndicator("标签页三")
  42. .setContent(R.id.tab03);
  43. // 添加第三个标签页
  44. tabHost.addTab(tab3);*/
  45. /* 以上创建和添加标签页也可以用如下代码实现 */
  46. tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("标签页一").setContent(R.id.tab01));
  47. tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("标签页二").setContent(R.id.tab02));
  48. tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("标签页三").setContent(R.id.tab03));
  49. //标签切换事件处理,setOnTabChangedListener
  50. tabHost.setOnTabChangedListener(new OnTabChangeListener(){
  51. @Override
  52. // tabId是newTabSpec*个参数设置的tab页名,并不是layout里面的标识符id
  53. public void onTabChanged(String tabId) {
  54. if (tabId.equals("tab1")) { //*个标签
  55. Toast.makeText(MainActivity.this, "点击标签页一", Toast.LENGTH_SHORT).show();
  56. }
  57. if (tabId.equals("tab2")) { //第二个标签
  58. Toast.makeText(MainActivity.this, "点击标签页二", Toast.LENGTH_SHORT).show();
  59. }
  60. if (tabId.equals("tab3")) { //第三个标签
  61. Toast.makeText(MainActivity.this, "点击标签页三", Toast.LENGTH_SHORT).show();
  62. }
  63. }
  64. });
  65. }
  66. }

 

TabHost与RadioGroup结合完成的菜单

效果图:
%title插图%num

首先看布局文件:

Java代码
  1. <?xml version=“1.0” encoding=“UTF-8”?>
  2. <TabHost android:id=“@android:id/tabhost” android:layout_width=“fill_parent” android:layout_height=“fill_parent”
  3.   xmlns:android=“http://schemas.android.com/apk/res/android”>
  4.     <LinearLayout
  5.         android:orientation=“vertical”
  6.         android:layout_width=“fill_parent”
  7.         android:layout_height=“fill_parent”>
  8.         <FrameLayout
  9.             android:id=“@android:id/tabcontent”
  10.             android:layout_width=“fill_parent”
  11.             android:layout_height=“0.0dip”
  12.             android:layout_weight=“1.0” />
  13.         <TabWidget
  14.             android:id=“@android:id/tabs”
  15.             android:visibility=“gone”
  16.             android:layout_width=“fill_parent”
  17.             android:layout_height=“wrap_content”
  18.             android:layout_weight=“0.0” />
  19.         <RadioGroup
  20.             android:gravity=“center_vertical”
  21.             android:layout_gravity=“bottom”
  22.             android:orientation=“horizontal”
  23.             android:id=“@+id/main_radio”
  24.             android:background=“@drawable/maintab_toolbar_bg”
  25.             android:layout_width=“fill_parent”
  26.             android:layout_height=“wrap_content”>
  27.             <RadioButton
  28.                 android:id=“@+id/radio_button0”
  29.                 android:tag=“radio_button0”
  30.                 android:layout_marginTop=“2.0dip”
  31.                 android:text=“@string/alarm”
  32.                 android:drawableTop=“@drawable/icon_1”
  33.                 style=“@style/main_tab_bottom” />
  34.             <RadioButton
  35.                 android:id=“@+id/radio_button1”
  36.                 android:tag=“radio_button1”
  37.                 android:layout_marginTop=“2.0dip”
  38.                 android:text=“@string/message”
  39.                 android:drawableTop=“@drawable/icon_2”
  40.                 style=“@style/main_tab_bottom” />
  41.             <RadioButton
  42.                 android:id=“@+id/radio_button2”
  43.                 android:tag=“radio_button2”
  44.                 android:layout_marginTop=“2.0dip”
  45.                 android:text=“@string/photo”
  46.                 android:drawableTop=“@drawable/icon_3”
  47.                 style=“@style/main_tab_bottom” />
  48.             <RadioButton
  49.                 android:id=“@+id/radio_button3”
  50.                 android:tag=“radio_button3”
  51.                 android:layout_marginTop=“2.0dip”
  52.                 android:text=“@string/music”
  53.                 android:drawableTop=“@drawable/icon_4”
  54.                 style=“@style/main_tab_bottom” />
  55.             <RadioButton
  56.                 android:id=“@+id/radio_button4”
  57.                 android:tag=“radio_button4”
  58.                 android:layout_marginTop=“2.0dip”
  59.                 android:text=“@string/setting”
  60.                 android:drawableTop=“@drawable/icon_5”
  61.                 style=“@style/main_tab_bottom” />
  62.         </RadioGroup>
  63.     </LinearLayout>
  64. </TabHost>
[java]  view plain copy

  1. <?xml version=“1.0” encoding=“UTF-8”?>
  2. <TabHost android:id=“@android:id/tabhost” android:layout_width=“fill_parent” android:layout_height=“fill_parent”
  3.   xmlns:android=“http://schemas.android.com/apk/res/android”>
  4.     <LinearLayout
  5.         android:orientation=“vertical”
  6.         android:layout_width=“fill_parent”
  7.         android:layout_height=“fill_parent”>
  8.         <FrameLayout
  9.             android:id=“@android:id/tabcontent”
  10.             android:layout_width=“fill_parent”
  11.             android:layout_height=“0.0dip”
  12.             android:layout_weight=“1.0” />
  13.         <TabWidget
  14.             android:id=“@android:id/tabs”
  15.             android:visibility=“gone”
  16.             android:layout_width=“fill_parent”
  17.             android:layout_height=“wrap_content”
  18.             android:layout_weight=“0.0” />
  19.         <RadioGroup
  20.             android:gravity=“center_vertical”
  21.             android:layout_gravity=“bottom”
  22.             android:orientation=“horizontal”
  23.             android:id=“@+id/main_radio”
  24.             android:background=“@drawable/maintab_toolbar_bg”
  25.             android:layout_width=“fill_parent”
  26.             android:layout_height=“wrap_content”>
  27.             <RadioButton
  28.                 android:id=“@+id/radio_button0”
  29.                 android:tag=“radio_button0”
  30.                 android:layout_marginTop=“2.0dip”
  31.                 android:text=“@string/alarm”
  32.                 android:drawableTop=“@drawable/icon_1”
  33.                 style=“@style/main_tab_bottom” />
  34.             <RadioButton
  35.                 android:id=“@+id/radio_button1”
  36.                 android:tag=“radio_button1”
  37.                 android:layout_marginTop=“2.0dip”
  38.                 android:text=“@string/message”
  39.                 android:drawableTop=“@drawable/icon_2”
  40.                 style=“@style/main_tab_bottom” />
  41.             <RadioButton
  42.                 android:id=“@+id/radio_button2”
  43.                 android:tag=“radio_button2”
  44.                 android:layout_marginTop=“2.0dip”
  45.                 android:text=“@string/photo”
  46.                 android:drawableTop=“@drawable/icon_3”
  47.                 style=“@style/main_tab_bottom” />
  48.             <RadioButton
  49.                 android:id=“@+id/radio_button3”
  50.                 android:tag=“radio_button3”
  51.                 android:layout_marginTop=“2.0dip”
  52.                 android:text=“@string/music”
  53.                 android:drawableTop=“@drawable/icon_4”
  54.                 style=“@style/main_tab_bottom” />
  55.             <RadioButton
  56.                 android:id=“@+id/radio_button4”
  57.                 android:tag=“radio_button4”
  58.                 android:layout_marginTop=“2.0dip”
  59.                 android:text=“@string/setting”
  60.                 android:drawableTop=“@drawable/icon_5”
  61.                 style=“@style/main_tab_bottom” />
  62.         </RadioGroup>
  63.     </LinearLayout>
  64. </TabHost>

需要注意的是,如果用TabHost这个控件,其中有几个ID是必须这么写的,android:id=”@android:id/tabhost   ;android:id=”@android:id/tabcontent” ;android:id=”@android:id/tabs” ;之所以要这么写是因为在TabHost这个类中。需要实例化上述这个ID的控件。看源码:

在TabActivity中有么个方法:

  1. @Override
  2. public void onContentChanged() {
  3.     super.onContentChanged();
  4.     mTabHost = (TabHost) findViewById(com.android.internal.R.id.tabhost);
  5.     if (mTabHost == null) {
  6.         throw new RuntimeException(
  7.                 “Your content must have a TabHost whose id attribute is “ +
  8.                 “‘android.R.id.tabhost'”);
  9.     }
  10.     mTabHost.setup(getLocalActivityManager());
  11. }
  12. private void ensureTabHost() {
  13.     if (mTabHost == null) {
  14.         this.setContentView(com.android.internal.R.layout.tab_content);
  15.     }
  16. }
[java]  view plain copy

  1. @Override
  2. public void onContentChanged() {
  3.     super.onContentChanged();
  4.     mTabHost = (TabHost) findViewById(com.android.internal.R.id.tabhost);
  5.     if (mTabHost == null) {
  6.         throw new RuntimeException(
  7.                 “Your content must have a TabHost whose id attribute is “ +
  8.                 “‘android.R.id.tabhost'”);
  9.     }
  10.     mTabHost.setup(getLocalActivityManager());
  11. }
  12. private void ensureTabHost() {
  13.     if (mTabHost == null) {
  14.         this.setContentView(com.android.internal.R.layout.tab_content);
  15.     }
  16. }

当内容发生改变时它会调用这个方法,来更新列表或者其他视图,而这个方法中需要实例化TabHost,所以必须通过ID为tabhost实例化。

再看看TabHost这个类中,

Java代码
  1. public void setup() {
  2.     mTabWidget = (TabWidget) findViewById(com.android.internal.R.id.tabs);
  3.     if (mTabWidget == null) {
  4.         throw new RuntimeException(
  5.                 “Your TabHost must have a TabWidget whose id attribute is ‘android.R.id.tabs'”);
  6.     }
  7.     // KeyListener to attach to all tabs. Detects non-navigation keys 
  8.     // and relays them to the tab content. 
  9.     mTabKeyListener = new OnKeyListener() {
  10.         public boolean onKey(View v, int keyCode, KeyEvent event) {
  11.             switch (keyCode) {
  12.                 case KeyEvent.KEYCODE_DPAD_CENTER:
  13.                 case KeyEvent.KEYCODE_DPAD_LEFT:
  14.                 case KeyEvent.KEYCODE_DPAD_RIGHT:
  15.                 case KeyEvent.KEYCODE_DPAD_UP:
  16.                 case KeyEvent.KEYCODE_DPAD_DOWN:
  17.                 case KeyEvent.KEYCODE_ENTER:
  18.                     return false;
  19.             }
  20.             mTabContent.requestFocus(View.FOCUS_FORWARD);
  21.             return mTabContent.dispatchKeyEvent(event);
  22.         }
  23.     };
  24.     mTabWidget.setTabSelectionListener(new TabWidget.OnTabSelectionChanged() {
  25.         public void onTabSelectionChanged(int tabIndex, boolean clicked) {
  26.             setCurrentTab(tabIndex);
  27.             if (clicked) {
  28.                 mTabContent.requestFocus(View.FOCUS_FORWARD);
  29.             }
  30.         }
  31.     });
  32.     mTabContent = (FrameLayout) findViewById(com.android.internal.R.id.tabcontent);
  33.     if (mTabContent == null) {
  34.         throw new RuntimeException(
  35.                 “Your TabHost must have a FrameLayout whose id attribute is “
  36.                         + “‘android.R.id.tabcontent'”);
  37.     }
  38. }
[java]  view plain copy

  1. public void setup() {
  2.     mTabWidget = (TabWidget) findViewById(com.android.internal.R.id.tabs);
  3.     if (mTabWidget == null) {
  4.         throw new RuntimeException(
  5.                 “Your TabHost must have a TabWidget whose id attribute is ‘android.R.id.tabs'”);
  6.     }
  7.     // KeyListener to attach to all tabs. Detects non-navigation keys
  8.     // and relays them to the tab content.
  9.     mTabKeyListener = new OnKeyListener() {
  10.         public boolean onKey(View v, int keyCode, KeyEvent event) {
  11.             switch (keyCode) {
  12.                 case KeyEvent.KEYCODE_DPAD_CENTER:
  13.                 case KeyEvent.KEYCODE_DPAD_LEFT:
  14.                 case KeyEvent.KEYCODE_DPAD_RIGHT:
  15.                 case KeyEvent.KEYCODE_DPAD_UP:
  16.                 case KeyEvent.KEYCODE_DPAD_DOWN:
  17.                 case KeyEvent.KEYCODE_ENTER:
  18.                     return false;
  19.             }
  20.             mTabContent.requestFocus(View.FOCUS_FORWARD);
  21.             return mTabContent.dispatchKeyEvent(event);
  22.         }
  23.     };
  24.     mTabWidget.setTabSelectionListener(new TabWidget.OnTabSelectionChanged() {
  25.         public void onTabSelectionChanged(int tabIndex, boolean clicked) {
  26.             setCurrentTab(tabIndex);
  27.             if (clicked) {
  28.                 mTabContent.requestFocus(View.FOCUS_FORWARD);
  29.             }
  30.         }
  31.     });
  32.     mTabContent = (FrameLayout) findViewById(com.android.internal.R.id.tabcontent);
  33.     if (mTabContent == null) {
  34.         throw new RuntimeException(
  35.                 “Your TabHost must have a FrameLayout whose id attribute is “
  36.                         + “‘android.R.id.tabcontent'”);
  37.     }
  38. }

这个方法,是在增加选项卡之前由系统调用。在这个方法中需要通过tabs 这个ID实例化一个TabWidget,通过tabcontent这个ID实例化一个FrameLayout,用来放置选项卡内容。所以这两个ID也是固定的。

在上述布局文件中隐藏了系统默认的Widget,取而代之的是带有图片的Button。

看一下主要代码:

Java代码
  1. package com.iteye.androidtoast;
  2. import android.app.TabActivity;
  3. import android.content.Intent;
  4. import android.os.Bundle;
  5. import android.widget.RadioGroup;
  6. import android.widget.RadioGroup.OnCheckedChangeListener;
  7. import android.widget.TabHost;
  8. public class MainActivity extends TabActivity implements OnCheckedChangeListener{
  9.     /** Called when the activity is first created. */
  10.     private TabHost mHost;
  11.     private RadioGroup radioderGroup;
  12.     @Override
  13.     public void onCreate(Bundle savedInstanceState) {
  14.         super.onCreate(savedInstanceState);
  15.         setContentView(R.layout.maintabs);
  16.         //实例化TabHost 
  17.         mHost=this.getTabHost();
  18.         //添加选项卡 
  19.         mHost.addTab(mHost.newTabSpec(“ONE”).setIndicator(“ONE”)
  20.                     .setContent(new Intent(this,OneActivity.class)));
  21.         mHost.addTab(mHost.newTabSpec(“TWO”).setIndicator(“TWO”)
  22.                 .setContent(new Intent(this,TwoActivity.class)));
  23.         mHost.addTab(mHost.newTabSpec(“THREE”).setIndicator(“THREE”)
  24.                 .setContent(new Intent(this,ThreeActivity.class)));
  25.         mHost.addTab(mHost.newTabSpec(“FOUR”).setIndicator(“FOUR”)
  26.                 .setContent(new Intent(this,FourActivity.class)));
  27.         mHost.addTab(mHost.newTabSpec(“FIVE”).setIndicator(“FIVE”)
  28.                 .setContent(new Intent(this,FiveActivity.class)));
  29.         radioderGroup = (RadioGroup) findViewById(R.id.main_radio);
  30.         radioderGroup.setOnCheckedChangeListener(this);
  31.     }
  32.     @Override
  33.     public void onCheckedChanged(RadioGroup group, int checkedId) {
  34.         switch(checkedId){
  35.         case R.id.radio_button0:
  36.             mHost.setCurrentTabByTag(“ONE”);
  37.             break;
  38.         case R.id.radio_button1:
  39.             mHost.setCurrentTabByTag(“TWO”);
  40.             break;
  41.         case R.id.radio_button2:
  42.             mHost.setCurrentTabByTag(“THREE”);
  43.             break;
  44.         case R.id.radio_button3:
  45.             mHost.setCurrentTabByTag(“FOUR”);
  46.             break;
  47.         case R.id.radio_button4:
  48.             mHost.setCurrentTabByTag(“FIVE”);
  49.             break;
  50.         }
  51.     }
  52. }
[java]  view plain copy

  1. package com.iteye.androidtoast;
  2. import android.app.TabActivity;
  3. import android.content.Intent;
  4. import android.os.Bundle;
  5. import android.widget.RadioGroup;
  6. import android.widget.RadioGroup.OnCheckedChangeListener;
  7. import android.widget.TabHost;
  8. public class MainActivity extends TabActivity implements OnCheckedChangeListener{
  9.     /** Called when the activity is first created. */
  10.     private TabHost mHost;
  11.     private RadioGroup radioderGroup;
  12.     @Override
  13.     public void onCreate(Bundle savedInstanceState) {
  14.         super.onCreate(savedInstanceState);
  15.         setContentView(R.layout.maintabs);
  16.         //实例化TabHost
  17.         mHost=this.getTabHost();
  18.         //添加选项卡
  19.         mHost.addTab(mHost.newTabSpec(“ONE”).setIndicator(“ONE”)
  20.                     .setContent(new Intent(this,OneActivity.class)));
  21.         mHost.addTab(mHost.newTabSpec(“TWO”).setIndicator(“TWO”)
  22.                 .setContent(new Intent(this,TwoActivity.class)));
  23.         mHost.addTab(mHost.newTabSpec(“THREE”).setIndicator(“THREE”)
  24.                 .setContent(new Intent(this,ThreeActivity.class)));
  25.         mHost.addTab(mHost.newTabSpec(“FOUR”).setIndicator(“FOUR”)
  26.                 .setContent(new Intent(this,FourActivity.class)));
  27.         mHost.addTab(mHost.newTabSpec(“FIVE”).setIndicator(“FIVE”)
  28.                 .setContent(new Intent(this,FiveActivity.class)));
  29.         radioderGroup = (RadioGroup) findViewById(R.id.main_radio);
  30.         radioderGroup.setOnCheckedChangeListener(this);
  31.     }
  32.     @Override
  33.     public void onCheckedChanged(RadioGroup group, int checkedId) {
  34.         switch(checkedId){
  35.         case R.id.radio_button0:
  36.             mHost.setCurrentTabByTag(“ONE”);
  37.             break;
  38.         case R.id.radio_button1:
  39.             mHost.setCurrentTabByTag(“TWO”);
  40.             break;
  41.         case R.id.radio_button2:
  42.             mHost.setCurrentTabByTag(“THREE”);
  43.             break;
  44.         case R.id.radio_button3:
  45.             mHost.setCurrentTabByTag(“FOUR”);
  46.             break;
  47.         case R.id.radio_button4:
  48.             mHost.setCurrentTabByTag(“FIVE”);
  49.             break;
  50.         }
  51.     }
  52. }
友情链接: SITEMAP | 旋风加速器官网 | 旋风软件中心 | textarea | 黑洞加速器 | jiaohess | 老王加速器 | 烧饼哥加速器 | 小蓝鸟 | tiktok加速器 | 旋风加速度器 | 旋风加速 | quickq加速器 | 飞驰加速器 | 飞鸟加速器 | 狗急加速器 | hammer加速器 | trafficace | 原子加速器 | 葫芦加速器 | 麦旋风 | 油管加速器 | anycastly | INS加速器 | INS加速器免费版 | 免费vqn加速外网 | 旋风加速器 | 快橙加速器 | 啊哈加速器 | 迷雾通 | 优途加速器 | 海外播 | 坚果加速器 | 海外vqn加速 | 蘑菇加速器 | 毛豆加速器 | 接码平台 | 接码S | 西柚加速器 | 快柠檬加速器 | 黑洞加速 | falemon | 快橙加速器 | anycast加速器 | ibaidu | moneytreeblog | 坚果加速器 | 派币加速器 | 飞鸟加速器 | 毛豆APP | PIKPAK | 安卓vqn免费 | 一元机场加速器 | 一元机场 | 老王加速器 | 黑洞加速器 | 白石山 | 小牛加速器 | 黑洞加速 | 迷雾通官网 | 迷雾通 | 迷雾通加速器 | 十大免费加速神器 | 猎豹加速器 | 蚂蚁加速器 | 坚果加速器 | 黑洞加速 | 银河加速器 | 猎豹加速器 | 海鸥加速器 | 芒果加速器 | 小牛加速器 | 极光加速器 | 黑洞加速 | movabletype中文网 | 猎豹加速器官网 | 烧饼哥加速器官网 | 旋风加速器度器 | 哔咔漫画 | PicACG | 雷霆加速