巧妙运用ViewStub写出类似Tab选项卡(想怎么写tab就怎么写,横着写竖着写随你)

不提倡这么写法，可以结合Tab来写，然后每个Activity对应一个Tab选项，这样代码冗余性比较小（博客会在稍后更新到），下面仅做参考

网上找了半天也没找到如何运用ViewStub写出一个选项卡，而且关于ViewStub也都是基本介绍(基础知识请参照网上，一大坨的转载).之前看到一个老兄写的模拟iphone选项卡的界面，但是那个太麻烦了，本人天生懒惰，没办法只好自己动手写一个了。

先睹为快，看下面截图（有点类QQ通讯录），最底下是一个类似于Tab的选项卡（有点iphone选项卡感觉吧）。

 

为了简单起见，这里就不用这个截图做例子了，下面就用写一个最简单的Demo。

第一步：还是先建立底部的选项卡(其实就是一个TableLayout布局),代码如下(main.xml)：

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout
3. xmlns:android="http://schemas.android.com/apk/res/android"
4. android:layout_width="wrap_content"
5. android:layout_height="wrap_content"
6. android:background="#ffffff">
7. <TableLayout android:layout_width="fill_parent"
8. android:layout_height="54dip"
9. android:orientation="horizontal"
10. android:layout_gravity="bottom"
11. android:layout_alignParentBottom="true"
12. xmlns:android="http://schemas.android.com/apk/res/android"
13. >
14. <TableRow
15. android:layout_width="fill_parent"
16. android:layout_height="54dip"
17. >
18. <Button
19. android:id="@+id/btn1"
20. android:background="#888888"
21. android:layout_width="70dip"
22. android:layout_height="54dip"
23. android:layout_weight="1"
24. android:text="Button 1"
25. />
26. <Button
27. android:id="@+id/btn2"
28. android:background="#888888"
29. android:layout_width="70dip"
30. android:layout_height="54dip"
31. android:layout_weight="1"
32. android:text="Button 2"
33. />
34. <Button
35. android:background="#888888"
36. android:id="@+id/btn3"
37. android:layout_width="70dip"
38. android:layout_height="54dip"
39. android:layout_weight="1"
40. android:text="Button 3"
41. />
42. <Button
43. android:background="#888888"
44. android:id="@+id/btn4"
45. android:layout_width="70dip"
46. android:layout_height="54dip"
47. android:layout_weight="1"
48. android:text="Button 4"
49. />
50. </TableRow>
51. </TableLayout>
52. </RelativeLayout>

效果图：

第二步：就是建立4个xml布局文件，里面可以只写一个TextView，命名为btn1_layout.xml,btn2_layout.xml,btn3_layout.xml,btn4_layout.xml.类似如下：

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout
3. xmlns:android="http://schemas.android.com/apk/res/android"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent">
6. <TextView
7. android:layout_width="fill_parent"
8. android:layout_height="fill_parent"
9. android:text="Button 1"
10. android:textSize="36sp"
11. android:textColor="#4a9ad8"
12. />
13. </LinearLayout>

第三步：

将下列代码插入到第一步中main.xml中，位于TableLayout之上

[html] view plaincopy

1. <ViewStub
2. android:id="@+id/btn1ViewStub"
3. android:layout="@layout/btn1_layout"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. />
7. <ViewStub
8. android:id="@+id/btn2ViewStub"
9. android:layout="@layout/btn2_layout"
10. android:layout_width="fill_parent"
11. android:layout_height="fill_parent"
12. />
13. <ViewStub
14. android:id="@+id/btn3ViewStub"
15. android:layout="@layout/btn3_layout"
16. android:layout_width="fill_parent"
17. android:layout_height="fill_parent"
18. />
19. <ViewStub
20. android:id="@+id/btn4ViewStub"
21. android:layout="@layout/btn4_layout"
22. android:layout_width="fill_parent"
23. android:layout_height="fill_parent"
24. />

第四步：Activity中，产生点击事件后，首先要将所有的ViewStub设置成不可见，否则将会出问题（你可以试试），java代码如下，具体就不解释了，能用ViewStub相信能看懂。

[java] view plaincopy

1. package com.tab.activity; 
3. import android.app.Activity; 
4. import android.graphics.Color; 
5. import android.os.Bundle; 
6. import android.view.View; 
7. import android.view.ViewStub; 
8. import android.widget.Button; 
10. public class MainActivity extends Activity { 
12. private ViewStub[] viewStub = new ViewStub[4]; 
13. private Button currentBtn; 
14. private Button lastBtn; 
16. private int[] tabBtnIds = {R.id.btn1, R.id.btn2, 
17.             R.id.btn3, R.id.btn4}; 
19. private Button[] tabBtn = new Button[4]; 
21. @Override
22. public void onCreate(Bundle savedInstanceState) { 
23. super.onCreate(savedInstanceState); 
24.         setContentView(R.layout.main); 
25.         viewStub[0] = (ViewStub) findViewById(R.id.btn1ViewStub); 
26.         viewStub[1] = (ViewStub) findViewById(R.id.btn2ViewStub); 
27.         viewStub[2] =(ViewStub) findViewById(R.id.btn3ViewStub); 
28.         viewStub[3] = (ViewStub) findViewById(R.id.btn4ViewStub); 
29.         currentBtn = (Button) findViewById(R.id.btn2); 
30.         TabBtnClickListener tabBtnListener = new TabBtnClickListener(); 
31. for(int i=0; i<tabBtnIds.length; i++) { 
32.             tabBtn[i] = (Button) findViewById(tabBtnIds[i]); 
33.             tabBtn[i].setOnClickListener(tabBtnListener); 
34.         } 
36.     } 
38. class TabBtnClickListener implements View.OnClickListener { 
40. @Override
41. public void onClick(View v) { 
42.             lastBtn = currentBtn; 
43.             currentBtn = (Button) v; 
44. if(currentBtn.getId() == lastBtn.getId()) { 
45. return; 
46.             } 
47.             currentBtn.setBackgroundColor(Color.BLUE); 
48.             lastBtn.setBackgroundColor(Color.GRAY); 
49. int currentIndex = -1; 
50. switch(currentBtn.getId()) { 
51. case R.id.btn1: 
52.                     currentIndex = 0; 
53. break; 
54. case R.id.btn2: 
55.                     currentIndex = 1; 
56. break; 
57. case R.id.btn3: 
58.                     currentIndex = 2; 
59. break; 
60. case R.id.btn4: 
61.                     currentIndex = 3; 
62. break; 
63.             } 
64. for(int i=0; i<viewStub.length; i++) { 
65.                 viewStub[i].setVisibility(View.INVISIBLE); 
66.             } 
67. for(int i=0; i<viewStub.length; i++) { 
68. if(currentIndex == -1) { 
69. break; 
70.                 } 
71. if(currentIndex != i) { 
72.                     viewStub[i].setVisibility(View.INVISIBLE); 
73.                 } else { 
74.                     viewStub[i].setVisibility(View.VISIBLE); 
75.                 } 
76.             } 
77.         } 
78.     } 
79. } 

最后截个图，比上面那个通讯录难看，但是Activity基本上是一样的。

源码地址：http://download.csdn.net/source/3533851