TabHost详解

【转】http://blog.csdn.net/harvic880925/article/details/17120325

前言：今天仔细研究了下TabHost，主要是为了实现微信底部导航栏的功能，最后也给出一个链接，这位老兄用TabHost基本做出来了微信导航栏。

正文

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

方法一、定义tabhost：不用继承TabActivity

1、布局文件：activity_main.xml

[html] view plain copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:orientation="vertical"
6. tools:context=".MainActivity" >
7. <Button
8. android:id="@+id/button1"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:text="Button" />
12. <TabHost
13. android:id="@+id/tabhost"
14. android:layout_width="match_parent"
15. android:layout_height="wrap_content">
16. <LinearLayout
17. android:layout_width="match_parent"
18. android:layout_height="match_parent"
19. android:orientation="vertical" >
20. <TabWidget
21. android:id="@android:id/tabs"
22. android:layout_width="match_parent"
23. android:layout_height="wrap_content" >
24. </TabWidget>
25. <FrameLayout
26. android:id="@android:id/tabcontent"
27. android:layout_width="match_parent"
28. android:layout_height="match_parent" >
29. <!-- 第一个tab的布局 -->
30. <LinearLayout
31. android:id="@+id/tab1"
32. android:layout_width="match_parent"
33. android:layout_height="match_parent" >
34. <TextView
35. android:id="@+id/textView1"
36. android:layout_width="wrap_content"
37. android:layout_height="wrap_content"
38. android:text="林炳东" />
39. </LinearLayout>
40. <!-- 第二个tab的布局 -->
41. <LinearLayout
42. android:id="@+id/tab2"
43. android:layout_width="match_parent"
44. android:layout_height="match_parent" >
45. <TextView
46. android:id="@+id/textView2"
47. android:layout_width="wrap_content"
48. android:layout_height="wrap_content"
49. android:text="张小媛" />
50. </LinearLayout>
51. <!-- 第三个tab的布局 -->
52. <LinearLayout
53. android:id="@+id/tab3"
54. android:layout_width="match_parent"
55. android:layout_height="match_parent" >
56. <TextView
57. android:id="@+id/textView3"
58. android:layout_width="wrap_content"
59. android:layout_height="wrap_content"
60. android:text="马贝贝" />
61. </LinearLayout>
62. </FrameLayout>
63. </LinearLayout>
64. </TabHost>
65. </LinearLayout>

2、JAVA代码

[java] view plain copy

1. public class MainActivity extends Activity {
2. @Override
3. protected void onCreate(Bundle savedInstanceState) {
4. super.onCreate(savedInstanceState);
5. setContentView(R.layout.activity_main);
6. TabHost th=(TabHost)findViewById(R.id.tabhost);
7. th.setup();            //初始化TabHost容器
8. //在TabHost创建标签，然后设置：标题／图标／标签页布局
9. th.addTab(th.newTabSpec("tab1").setIndicator("标签1",getResources().getDrawable(R.drawable.ic_launcher)).setContent(R.id.tab1));
10. th.addTab(th.newTabSpec("tab2").setIndicator("标签2",null).setContent(R.id.tab2));
11. th.addTab(th.newTabSpec("tab3").setIndicator("标签3",null).setContent(R.id.tab3));
12. //上面的null可以为getResources().getDrawable(R.drawable.图片名)设置图标
13. }
14. }

效果图：

此例源码地址：http://download.csdn.net/detail/harvic880925/6657611  （不要分，欢迎下载）

方法二：Tab的内容分开：不用继承TabActivity

1、第一个tab的XML布局文件，tab1.xml:

[html] view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:id="@+id/LinearLayout01"
4. android:layout_width="wrap_content"
5. android:layout_height="wrap_content">
6. <TextView
7. android:text="我是标签1的内容喔"
8. android:id="@+id/TextView01"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content">
11. </TextView>
12. </LinearLayout>

2、第二个tab的XML布局文件，tab2.xml:

[html] view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>
2. <LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
3. android:id="@+id/LinearLayout02"
4. android:layout_width="wrap_content"
5. android:layout_height="wrap_content">
6. <TextView android:text="标签2"
7. android:id="@+id/TextView01"
8. android:layout_width="wrap_content"
9. android:layout_height="wrap_content" />
10. </LinearLayout>

3、主布局文件，activity_main.xml：

[html] view plain copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. android:layout_width="fill_parent"
3. android:layout_height="fill_parent"
4. android:orientation="vertical" >
5. <TabHost
6. android:id="@+id/tabhost"
7. android:layout_width="match_parent"
8. android:layout_height="match_parent" >
9. <LinearLayout
10. android:layout_width="match_parent"
11. android:layout_height="match_parent"
12. android:orientation="vertical" >
13. <TabWidget
14. android:id="@android:id/tabs"
15. android:layout_width="match_parent"
16. android:layout_height="wrap_content" >
17. </TabWidget>
18. <FrameLayout
19. android:id="@android:id/tabcontent"
20. android:layout_width="match_parent"
21. android:layout_height="match_parent" >
22. </FrameLayout>
23. </LinearLayout>
24. </TabHost>
25. </LinearLayout>

4、JAVA代码：

[java] view plain copy

1. public class MainActivity extends Activity {
2. @Override
3. protected void onCreate(Bundle savedInstanceState) {
4. super.onCreate(savedInstanceState);
5. setContentView(R.layout.activity_main);
6. TabHost m = (TabHost)findViewById(R.id.tabhost);
7. m.setup();
8. LayoutInflater i=LayoutInflater.from(this);
9. i.inflate(R.layout.tab1, m.getTabContentView());
10. i.inflate(R.layout.tab2, m.getTabContentView());//动态载入XML，而不需要Activity
11. m.addTab(m.newTabSpec("tab1").setIndicator("标签1").setContent(R.id.LinearLayout01));
12. m.addTab(m.newTabSpec("tab2").setIndicator("标签2").setContent(R.id.LinearLayout02));
13. }
14. }

效果图：

此例源码地址：http://download.csdn.net/detail/harvic880925/6657679   （不要分，欢迎下载）

方法三：继承自TabActivity

1、主布局文件，activity_main.xml：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent">
5. <!-- 第一个布局 -->
6. <LinearLayout
7. android:id="@+id/view1"
8. android:layout_width="match_parent"
9. android:layout_height="match_parent" >
10. <TextView
11. android:id="@+id/textView1"
12. android:layout_width="wrap_content"
13. android:layout_height="wrap_content"
14. android:text="张小媛" />
15. </LinearLayout>
16. <!-- 第二个布局 -->
17. <LinearLayout
18. android:id="@+id/view2"
19. android:layout_width="match_parent"
20. android:layout_height="match_parent" >
21. <TextView
22. android:id="@+id/textView2"
23. android:layout_width="wrap_content"
24. android:layout_height="wrap_content"
25. android:text="马贝贝" />
26. </LinearLayout>
27. <!-- 第三个布局 -->
28. <TextView android:id="@+id/view3"
29. android:background="#00ff00"
30. android:layout_width="fill_parent"
31. android:layout_height="fill_parent"
32. android:text="Tab3"/>
33. </FrameLayout>

2、JAVA代码：

先将派生自Activity改为TabActivity，然后代码如下：

[java] view plain copy

1. public class MainActivity extends TabActivity {
2. @Override
3. protected void onCreate(Bundle savedInstanceState) {
4. super.onCreate(savedInstanceState);
5. setTitle("TabDemoActivity");
6. TabHost tabHost = getTabHost();
7. LayoutInflater.from(this).inflate(R.layout.activity_main,
8. tabHost.getTabContentView(), true);
9. tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("tab1", getResources().getDrawable(R.drawable.ic_launcher))
10. .setContent(R.id.view1));
11. tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab2")
12. .setContent(R.id.view2));
13. tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3")
14. .setContent(R.id.view3));
15. //标签切换事件处理，setOnTabChangedListener
16. tabHost.setOnTabChangedListener(new OnTabChangeListener(){
17. @Override
18. public void onTabChanged(String tabId) {
19. if (tabId.equals("tab1")) {   //第一个标签
20. }
21. if (tabId.equals("tab2")) {   //第二个标签
22. }
23. if (tabId.equals("tab3")) {   //第三个标签
24. }
25. }
26. });
27. }
28. }

效果如下：

此例源码地址：http://download.csdn.net/detail/harvic880925/6657791   （不要分，仅供分享）

四：实现微信底部导航栏

效果：

参看博客：http://blog.csdn.net/wangkuifeng0118/article/details/7745109

 源码地址：http://download.csdn.net/detail/harvic880925/6657767   （不要分，仅供分享）

请大家尊重作者版权，转载请标明出处：http://blog.csdn.net/harvic880925/article/details/17120325