标签栏主界面的实现

素颜马尾好姑娘i 2022-07-17 02:22 202阅读 0赞

现在Fragment的应用真的是越来越广泛了，之前[Android][]在3.0版本加入Fragment的时候，主要是为了解决Android Pad屏幕比较大，空间不能充分利用的问题，但现在即使只是在手机上，也有很多的场景可以运用到Fragment了，今天我们就来学习其中一个特别棒的应用技巧。

很多手机应用都会有一个非常类似的功能，即屏幕的下方显示一行Tab标签选项，点击不同的标签就可以切换到不同的界面，如以下几个应用所示：

![Center][]    ![Center 1][]    ![Center 2][]

上面三个应用从左到右分别是QQ、新浪微博和支付宝钱包，可见，这种底部标签式的布局策略真的非常常见。

那么剩下的问题就是如何借助Fragment来实现Tab标签栏，因此我们自然要动起手来了。

新建一个项目，起名就叫FragmentDemo，这里我使用的是4.0的API。

下面开始编程工作，这里我们首先需要去编写一个类似于QQ的主界面，当然只会去编写界面最下方的Tab栏部分，而不会编写上面的内容界面部分，因为内容界面是应该写在Fragment的布局里的。打开或新建activity\_main.xml作为程序的主布局文件，在里面加入如下代码：

**\[html\]**  [view plain][]  [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****LinearLayout** xmlns:android="http://schemas.android.com/apk/res/android"  
2.      android:layout\_width="match\_parent"  
3.      android:layout\_height="match\_parent"  
4.      android:orientation="vertical" **>**  
5.    
6.      **<****FrameLayout**  
7.          android:id="@+id/content"  
8.          android:layout\_width="match\_parent"  
9.          android:layout\_height="0dp"  
10.         android:layout\_weight="1" **>**  
11.     **</****FrameLayout****>**  
12.   
13.     **<****LinearLayout**  
14.         android:layout\_width="match\_parent"  
15.         android:layout\_height="60dp"  
16.         android:background="@drawable/tab\_bg" **>**  
17.   
18.         **<****RelativeLayout**  
19.             android:id="@+id/message\_layout"  
20.             android:layout\_width="0dp"  
21.             android:layout\_height="match\_parent"  
22.             android:layout\_weight="1" **>**  
23.   
24.             **<****LinearLayout**  
25.                 android:layout\_width="match\_parent"  
26.                 android:layout\_height="wrap\_content"  
27.                 android:layout\_centerVertical="true"  
28.                 android:orientation="vertical" **>**  
29.   
30.                 **<****ImageView**  
31.                     android:id="@+id/message\_image"  
32.                     android:layout\_width="wrap\_content"  
33.                     android:layout\_height="wrap\_content"  
34.                     android:layout\_gravity="center\_horizontal"  
35.                     android:src="@drawable/message\_unselected" **/>**  
36.   
37.                 **<****TextView**  
38.                     android:id="@+id/message\_text"  
39.                     android:layout\_width="wrap\_content"  
40.                     android:layout\_height="wrap\_content"  
41.                     android:layout\_gravity="center\_horizontal"  
42.                     android:text="消息"  
43.                     android:textColor="\#82858b" **/>**  
44.             **</****LinearLayout****>**  
45.         **</****RelativeLayout****>**  
46.   
47.         **<****RelativeLayout**  
48.             android:id="@+id/contacts\_layout"  
49.             android:layout\_width="0dp"  
50.             android:layout\_height="match\_parent"  
51.             android:layout\_weight="1" **>**  
52.   
53.             **<****LinearLayout**  
54.                 android:layout\_width="match\_parent"  
55.                 android:layout\_height="wrap\_content"  
56.                 android:layout\_centerVertical="true"  
57.                 android:orientation="vertical" **>**  
58.   
59.                 **<****ImageView**  
60.                     android:id="@+id/contacts\_image"  
61.                     android:layout\_width="wrap\_content"  
62.                     android:layout\_height="wrap\_content"  
63.                     android:layout\_gravity="center\_horizontal"  
64.                     android:src="@drawable/contacts\_unselected" **/>**  
65.   
66.                 **<****TextView**  
67.                     android:id="@+id/contacts\_text"  
68.                     android:layout\_width="wrap\_content"  
69.                     android:layout\_height="wrap\_content"  
70.                     android:layout\_gravity="center\_horizontal"  
71.                     android:text="联系人"  
72.                     android:textColor="\#82858b" **/>**  
73.             **</****LinearLayout****>**  
74.         **</****RelativeLayout****>**  
75.   
76.         **<****RelativeLayout**  
77.             android:id="@+id/news\_layout"  
78.             android:layout\_width="0dp"  
79.             android:layout\_height="match\_parent"  
80.             android:layout\_weight="1" **>**  
81.   
82.             **<****LinearLayout**  
83.                 android:layout\_width="match\_parent"  
84.                 android:layout\_height="wrap\_content"  
85.                 android:layout\_centerVertical="true"  
86.                 android:orientation="vertical" **>**  
87.   
88.                 **<****ImageView**  
89.                     android:id="@+id/news\_image"  
90.                     android:layout\_width="wrap\_content"  
91.                     android:layout\_height="wrap\_content"  
92.                     android:layout\_gravity="center\_horizontal"  
93.                     android:src="@drawable/news\_unselected" **/>**  
94.   
95.                 **<****TextView**  
96.                     android:id="@+id/news\_text"  
97.                     android:layout\_width="wrap\_content"  
98.                     android:layout\_height="wrap\_content"  
99.                     android:layout\_gravity="center\_horizontal"  
100.                     android:text="动态"  
101.                     android:textColor="\#82858b" **/>**  
102.             **</****LinearLayout****>**  
103.         **</****RelativeLayout****>**  
104.   
105.         **<****RelativeLayout**  
106.             android:id="@+id/setting\_layout"  
107.             android:layout\_width="0dp"  
108.             android:layout\_height="match\_parent"  
109.             android:layout\_weight="1" **>**  
110.   
111.             **<****LinearLayout**  
112.                 android:layout\_width="match\_parent"  
113.                 android:layout\_height="wrap\_content"  
114.                 android:layout\_centerVertical="true"  
115.                 android:orientation="vertical" **>**  
116.   
117.                 **<****ImageView**  
118.                     android:id="@+id/setting\_image"  
119.                     android:layout\_width="wrap\_content"  
120.                     android:layout\_height="wrap\_content"  
121.                     android:layout\_gravity="center\_horizontal"  
122.                     android:src="@drawable/setting\_unselected" **/>**  
123.   
124.                 **<****TextView**  
125.                     android:id="@+id/setting\_text"  
126.                     android:layout\_width="wrap\_content"  
127.                     android:layout\_height="wrap\_content"  
128.                     android:layout\_gravity="center\_horizontal"  
129.                     android:text="设置"  
130.                     android:textColor="\#82858b" **/>**  
131.             **</****LinearLayout****>**  
132.         **</****RelativeLayout****>**  
133.     **</****LinearLayout****>**  
134.   
135. **</****LinearLayout****>**

这段布局代码虽然有点长，但其实主要就分为两部分。第一个部分就是FrameLayout，这里只是给FrameLayout的id设置成content，并没有在里面添加任何具体的内容，因为具体的内容是要在后面动态进行添加的。第二个部分就是FrameLayout下面的LinearLayout，这个LinearLayout中包含的就是整个类似于TabHost的布局。可以看到，我们将这个LinearLayout又等分成了四份，每一份中都会显示一个ImageView和一个TextView。ImageView用于显示当前Tab的图标，TextView用于显示当前Tab的标题，这个效果就会和QQ非常得类似。

既然是等分成了四分，那接下来我们自然要去分别实现四个Fragment和它们的布局了。新建一个message\_layout.xml作为消息界面的布局，代码如下所示：

**\[html\]**  [view plain][]  [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<?****xml** version="1.0" encoding="utf-8"**?>**  
2.  **<****RelativeLayout** xmlns:android="http://schemas.android.com/apk/res/android"  
3.      android:layout\_width="match\_parent"  
4.      android:layout\_height="match\_parent" **>**  
5.    
6.      **<****LinearLayout**  
7.          android:layout\_width="wrap\_content"  
8.          android:layout\_height="wrap\_content"  
9.          android:layout\_centerInParent="true"  
10.         android:orientation="vertical" **>**  
11.   
12.         **<****ImageView**  
13.             android:layout\_width="wrap\_content"  
14.             android:layout\_height="wrap\_content"  
15.             android:layout\_gravity="center\_horizontal"  
16.             android:src="@drawable/message\_selected" **/>**  
17.   
18.         **<****TextView**  
19.             android:layout\_width="wrap\_content"  
20.             android:layout\_height="wrap\_content"  
21.             android:layout\_gravity="center\_horizontal"  
22.             android:padding="10dp"  
23.             android:text="这是消息界面"  
24.             android:textSize="20sp" **/>**  
25.     **</****LinearLayout****>**  
26.   
27. **</****RelativeLayout****>**

这个布局就相对简单多了，只是在屏幕的正中央显示一个消息图标，以及一段文字。

然后要去创建对应这个布局的Fragment。新建MessageFragment继承自Fragment，代码如下所示：

**\[java\]**  [view plain][]  [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **public** **class** MessageFragment **extends** Fragment \{  
2.    
3.      **public** View onCreateView(LayoutInflater inflater, ViewGroup container,  
4.              Bundle savedInstanceState) \{  
5.          View messageLayout = inflater.inflate(R.layout.message\_layout, container, **false**);  
6.          **return** messageLayout;  
7.      \}  
8.    
9.  \}

后面就是依葫芦画瓢，把其它几个Fragment以及对应的布局创建出来。新建contacts\_layout.xml作为联系人界面的布局，代码如下所示：

**\[html\]**  [view plain][]  [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<?****xml** version="1.0" encoding="utf-8"**?>**  
2.  **<****RelativeLayout** xmlns:android="http://schemas.android.com/apk/res/android"  
3.      android:layout\_width="match\_parent"  
4.      android:layout\_height="match\_parent" **>**  
5.    
6.      **<****LinearLayout**  
7.          android:layout\_width="wrap\_content"  
8.          android:layout\_height="wrap\_content"  
9.          android:layout\_centerInParent="true"  
10.         android:orientation="vertical" **>**  
11.   
12.         **<****ImageView**  
13.             android:layout\_width="wrap\_content"  
14.             android:layout\_height="wrap\_content"  
15.             android:layout\_gravity="center\_horizontal"  
16.             android:src="@drawable/contacts\_selected" **/>**  
17.   
18.         **<****TextView**  
19.             android:layout\_width="wrap\_content"  
20.             android:layout\_height="wrap\_content"  
21.             android:layout\_gravity="center\_horizontal"  
22.             android:padding="10dp"  
23.             android:text="这是联系人界面"  
24.             android:textSize="20sp" **/>**  
25.     **</****LinearLayout****>**  
26.   
27. **</****RelativeLayout****>**

再新建ContactsFragment继承自Fragment，代码如下所示：

**\[java\]**  [view plain][]  [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **public** **class** ContactsFragment **extends** Fragment \{  
2.    
3.      @Override  
4.      **public** View onCreateView(LayoutInflater inflater, ViewGroup container,  
5.              Bundle savedInstanceState) \{  
6.          View contactsLayout = inflater.inflate(R.layout.contacts\_layout,  
7.                  container, **false**);  
8.          **return** contactsLayout;  
9.      \}  
10.   
11. \}

然后新建news\_layout.xml作为动态界面的布局，代码如下所示：

**\[html\]**  [view plain][]  [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<?****xml** version="1.0" encoding="utf-8"**?>**  
2.  **<****RelativeLayout** xmlns:android="http://schemas.android.com/apk/res/android"  
3.      android:layout\_width="match\_parent"  
4.      android:layout\_height="match\_parent" **>**  
5.    
6.      **<****LinearLayout**  
7.          android:layout\_width="wrap\_content"  
8.          android:layout\_height="wrap\_content"  
9.          android:layout\_centerInParent="true"  
10.         android:orientation="vertical" **>**  
11.   
12.         **<****ImageView**  
13.             android:layout\_width="wrap\_content"  
14.             android:layout\_height="wrap\_content"  
15.             android:layout\_gravity="center\_horizontal"  
16.             android:src="@drawable/news\_selected" **/>**  
17.   
18.         **<****TextView**  
19.             android:layout\_width="wrap\_content"  
20.             android:layout\_height="wrap\_content"  
21.             android:layout\_gravity="center\_horizontal"  
22.             android:padding="10dp"  
23.             android:text="这是动态界面"  
24.             android:textSize="20sp" **/>**  
25.     **</****LinearLayout****>**  
26.   
27. **</****RelativeLayout****>**

再新建NewsFragment继承自Fragment，代码如下所示：

**\[java\]**  [view plain][]  [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **public** **class** NewsFragment **extends** Fragment \{  
2.    
3.      @Override  
4.      **public** View onCreateView(LayoutInflater inflater, ViewGroup container,  
5.              Bundle savedInstanceState) \{  
6.          View newsLayout = inflater.inflate(R.layout.news\_layout, container,  
7.                  **false**);  
8.          **return** newsLayout;  
9.      \}  
10.   
11. \}

最后新建setting\_layout.xml作为设置界面的布局，代码如下所示：

**\[html\]**  [view plain][]  [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<?****xml** version="1.0" encoding="utf-8"**?>**  
2.  **<****RelativeLayout** xmlns:android="http://schemas.android.com/apk/res/android"  
3.      android:layout\_width="match\_parent"  
4.      android:layout\_height="match\_parent" **>**  
5.    
6.      **<****LinearLayout**  
7.          android:layout\_width="wrap\_content"  
8.          android:layout\_height="wrap\_content"  
9.          android:layout\_centerInParent="true"  
10.         android:orientation="vertical" **>**  
11.   
12.         **<****ImageView**  
13.             android:layout\_width="wrap\_content"  
14.             android:layout\_height="wrap\_content"  
15.             android:layout\_gravity="center\_horizontal"  
16.             android:src="@drawable/setting\_selected" **/>**  
17.   
18.         **<****TextView**  
19.             android:layout\_width="wrap\_content"  
20.             android:layout\_height="wrap\_content"  
21.             android:layout\_gravity="center\_horizontal"  
22.             android:padding="10dp"  
23.             android:text="这是设置界面"  
24.             android:textSize="20sp" **/>**  
25.     **</****LinearLayout****>**  
26.   
27. **</****RelativeLayout****>**

再新建SettingFragment继承自Fragment，代码如下所示：

**\[java\]**  [view plain][]  [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **public** **class** SettingFragment **extends** Fragment \{  
2.    
3.      @Override  
4.      **public** View onCreateView(LayoutInflater inflater, ViewGroup container,  
5.              Bundle savedInstanceState) \{  
6.          View settingLayout = inflater.inflate(R.layout.setting\_layout,  
7.                  container, **false**);  
8.          **return** settingLayout;  
9.      \}  
10.   
11. \}

这样我们就把每一个Fragment，以及它们所对应的布局文件都创建好了。接下来也就是最关键的步骤了，打开或新建MainActivity作为主Activity，代码如下所示：

**\[java\]**  [view plain][]  [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  /\*\* 
2.   \* 项目的主Activity，所有的Fragment都嵌入在这里。 
3.   \*/  
4.  **public** **class** MainActivity **extends** Activity **implements** OnClickListener \{  
5.    
6.      /\*\* 
7.       \* 用于展示消息的Fragment 
8.       \*/  
9.      **private** MessageFragment messageFragment;  
10.   
11.     /\*\* 
12.      \* 用于展示联系人的Fragment 
13.      \*/  
14.     **private** ContactsFragment contactsFragment;  
15.   
16.     /\*\* 
17.      \* 用于展示动态的Fragment 
18.      \*/  
19.     **private** NewsFragment newsFragment;  
20.   
21.     /\*\* 
22.      \* 用于展示设置的Fragment 
23.      \*/  
24.     **private** SettingFragment settingFragment;  
25.   
26.     /\*\* 
27.      \* 消息界面布局 
28.      \*/  
29.     **private** View messageLayout;  
30.   
31.     /\*\* 
32.      \* 联系人界面布局 
33.      \*/  
34.     **private** View contactsLayout;  
35.   
36.     /\*\* 
37.      \* 动态界面布局 
38.      \*/  
39.     **private** View newsLayout;  
40.   
41.     /\*\* 
42.      \* 设置界面布局 
43.      \*/  
44.     **private** View settingLayout;  
45.   
46.     /\*\* 
47.      \* 在Tab布局上显示消息图标的控件 
48.      \*/  
49.     **private** ImageView messageImage;  
50.   
51.     /\*\* 
52.      \* 在Tab布局上显示联系人图标的控件 
53.      \*/  
54.     **private** ImageView contactsImage;  
55.   
56.     /\*\* 
57.      \* 在Tab布局上显示动态图标的控件 
58.      \*/  
59.     **private** ImageView newsImage;  
60.   
61.     /\*\* 
62.      \* 在Tab布局上显示设置图标的控件 
63.      \*/  
64.     **private** ImageView settingImage;  
65.   
66.     /\*\* 
67.      \* 在Tab布局上显示消息标题的控件 
68.      \*/  
69.     **private** TextView messageText;  
70.   
71.     /\*\* 
72.      \* 在Tab布局上显示联系人标题的控件 
73.      \*/  
74.     **private** TextView contactsText;  
75.   
76.     /\*\* 
77.      \* 在Tab布局上显示动态标题的控件 
78.      \*/  
79.     **private** TextView newsText;  
80.   
81.     /\*\* 
82.      \* 在Tab布局上显示设置标题的控件 
83.      \*/  
84.     **private** TextView settingText;  
85.   
86.     /\*\* 
87.      \* 用于对Fragment进行管理 
88.      \*/  
89.     **private** FragmentManager fragmentManager;  
90.   
91.     @Override  
92.     **protected** **void** onCreate(Bundle savedInstanceState) \{  
93.         **super**.onCreate(savedInstanceState);  
94.         requestWindowFeature(Window.FEATURE\_NO\_TITLE);  
95.         setContentView(R.layout.activity\_main);  
96.         // 初始化布局元素  
97.         initViews();  
98.         fragmentManager = getFragmentManager();  
99.         // 第一次启动时选中第0个tab  
100.         setTabSelection(0);  
101.     \}  
102.   
103.     /\*\* 
104.      \* 在这里获取到每个需要用到的控件的实例，并给它们设置好必要的点击事件。 
105.      \*/  
106.     **private** **void** initViews() \{  
107.         messageLayout = findViewById(R.id.message\_layout);  
108.         contactsLayout = findViewById(R.id.contacts\_layout);  
109.         newsLayout = findViewById(R.id.news\_layout);  
110.         settingLayout = findViewById(R.id.setting\_layout);  
111.         messageImage = (ImageView) findViewById(R.id.message\_image);  
112.         contactsImage = (ImageView) findViewById(R.id.contacts\_image);  
113.         newsImage = (ImageView) findViewById(R.id.news\_image);  
114.         settingImage = (ImageView) findViewById(R.id.setting\_image);  
115.         messageText = (TextView) findViewById(R.id.message\_text);  
116.         contactsText = (TextView) findViewById(R.id.contacts\_text);  
117.         newsText = (TextView) findViewById(R.id.news\_text);  
118.         settingText = (TextView) findViewById(R.id.setting\_text);  
119.         messageLayout.setOnClickListener(**this**);  
120.         contactsLayout.setOnClickListener(**this**);  
121.         newsLayout.setOnClickListener(**this**);  
122.         settingLayout.setOnClickListener(**this**);  
123.     \}  
124.   
125.     @Override  
126.     **public** **void** onClick(View v) \{  
127.         **switch** (v.getId()) \{  
128.         **case** R.id.message\_layout:  
129.             // 当点击了消息tab时，选中第1个tab  
130.             setTabSelection(0);  
131.             **break**;  
132.         **case** R.id.contacts\_layout:  
133.             // 当点击了联系人tab时，选中第2个tab  
134.             setTabSelection(1);  
135.             **break**;  
136.         **case** R.id.news\_layout:  
137.             // 当点击了动态tab时，选中第3个tab  
138.             setTabSelection(2);  
139.             **break**;  
140.         **case** R.id.setting\_layout:  
141.             // 当点击了设置tab时，选中第4个tab  
142.             setTabSelection(3);  
143.             **break**;  
144.         **default**:  
145.             **break**;  
146.         \}  
147.     \}  
148.   
149.     /\*\* 
150.      \* 根据传入的index参数来设置选中的tab页。 
151.      \*  
152.      \* @param index 
153.      \*            每个tab页对应的下标。0表示消息，1表示联系人，2表示动态，3表示设置。 
154.      \*/  
155.     **private** **void** setTabSelection(**int** index) \{  
156.         // 每次选中之前先清楚掉上次的选中状态  
157.         clearSelection();  
158.         // 开启一个Fragment事务  
159.         FragmentTransaction transaction = fragmentManager.beginTransaction();  
160.         // 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况  
161.         hideFragments(transaction);  
162.         **switch** (index) \{  
163.         **case** 0:  
164.             // 当点击了消息tab时，改变控件的图片和文字颜色  
165.             messageImage.setImageResource(R.drawable.message\_selected);  
166.             messageText.setTextColor(Color.WHITE);  
167.             **if** (messageFragment == **null**) \{  
168.                 // 如果MessageFragment为空，则创建一个并添加到界面上  
169.                 messageFragment = **new** MessageFragment();  
170.                 transaction.add(R.id.content, messageFragment);  
171.             \} **else** \{  
172.                 // 如果MessageFragment不为空，则直接将它显示出来  
173.                 transaction.show(messageFragment);  
174.             \}  
175.             **break**;  
176.         **case** 1:  
177.             // 当点击了联系人tab时，改变控件的图片和文字颜色  
178.             contactsImage.setImageResource(R.drawable.contacts\_selected);  
179.             contactsText.setTextColor(Color.WHITE);  
180.             **if** (contactsFragment == **null**) \{  
181.                 // 如果ContactsFragment为空，则创建一个并添加到界面上  
182.                 contactsFragment = **new** ContactsFragment();  
183.                 transaction.add(R.id.content, contactsFragment);  
184.             \} **else** \{  
185.                 // 如果ContactsFragment不为空，则直接将它显示出来  
186.                 transaction.show(contactsFragment);  
187.             \}  
188.             **break**;  
189.         **case** 2:  
190.             // 当点击了动态tab时，改变控件的图片和文字颜色  
191.             newsImage.setImageResource(R.drawable.news\_selected);  
192.             newsText.setTextColor(Color.WHITE);  
193.             **if** (newsFragment == **null**) \{  
194.                 // 如果NewsFragment为空，则创建一个并添加到界面上  
195.                 newsFragment = **new** NewsFragment();  
196.                 transaction.add(R.id.content, newsFragment);  
197.             \} **else** \{  
198.                 // 如果NewsFragment不为空，则直接将它显示出来  
199.                 transaction.show(newsFragment);  
200.             \}  
201.             **break**;  
202.         **case** 3:  
203.         **default**:  
204.             // 当点击了设置tab时，改变控件的图片和文字颜色  
205.             settingImage.setImageResource(R.drawable.setting\_selected);  
206.             settingText.setTextColor(Color.WHITE);  
207.             **if** (settingFragment == **null**) \{  
208.                 // 如果SettingFragment为空，则创建一个并添加到界面上  
209.                 settingFragment = **new** SettingFragment();  
210.                 transaction.add(R.id.content, settingFragment);  
211.             \} **else** \{  
212.                 // 如果SettingFragment不为空，则直接将它显示出来  
213.                 transaction.show(settingFragment);  
214.             \}  
215.             **break**;  
216.         \}  
217.         transaction.commit();  
218.     \}  
219.   
220.     /\*\* 
221.      \* 清除掉所有的选中状态。 
222.      \*/  
223.     **private** **void** clearSelection() \{  
224.         messageImage.setImageResource(R.drawable.message\_unselected);  
225.         messageText.setTextColor(Color.parseColor("\#82858b"));  
226.         contactsImage.setImageResource(R.drawable.contacts\_unselected);  
227.         contactsText.setTextColor(Color.parseColor("\#82858b"));  
228.         newsImage.setImageResource(R.drawable.news\_unselected);  
229.         newsText.setTextColor(Color.parseColor("\#82858b"));  
230.         settingImage.setImageResource(R.drawable.setting\_unselected);  
231.         settingText.setTextColor(Color.parseColor("\#82858b"));  
232.     \}  
233.   
234.     /\*\* 
235.      \* 将所有的Fragment都置为隐藏状态。 
236.      \*  
237.      \* @param transaction 
238.      \*            用于对Fragment执行操作的事务 
239.      \*/  
240.     **private** **void** hideFragments(FragmentTransaction transaction) \{  
241.         **if** (messageFragment != **null**) \{  
242.             transaction.hide(messageFragment);  
243.         \}  
244.         **if** (contactsFragment != **null**) \{  
245.             transaction.hide(contactsFragment);  
246.         \}  
247.         **if** (newsFragment != **null**) \{  
248.             transaction.hide(newsFragment);  
249.         \}  
250.         **if** (settingFragment != **null**) \{  
251.             transaction.hide(settingFragment);  
252.         \}  
253.     \}  
254. \}

这个类中的注释已经写得非常详细了，下面我再带大家简单梳理一遍。在onCreate()方法中先是调用了initViews()来获取每个控件的实例，并给相应的控件设置好点击事件，然后调用setTabSelection()方法设置默认的选中项，这里传入的0说明默认选中第1个Tab项。

那么setTabSelection()方法中又是如何处理的呢？可以看到，首先第一步是调用clearSelection()方法来清理掉之前的选中状态，然后开启一个Fragment事务，并隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上。接下来根据传入的index参数判断出选中的是哪一个Tab项，并改变该Tab项的图标和文字颜色，然后将相应的Fragment添加到界面上。这里注意一个细节，我们添加Fragment的时候并没有使用replace()方法，而是会先判断一下该Fragment是否为空，如果是空的则调用add()方法添加一个进来，如果不是空的则直接调用show()方法显示出来即可。那么为什么没有使用replace()方法呢？这是因为replace()方法会将被替换掉的那个Fragment彻底地移除掉，该Fragment的生命周期就结束了。当再次点击刚才那个Tab项的时候，就会让该Fragment的生命周期重新开始，onCreate()、onCreateView()等方法都会重新执行一遍。这显然不是我们想要的，也和ActivityGroup的工作原理不符，因此最好的解决方案就是使用hide()和show()方法来隐藏和显示Fragment，这就不会让Fragment的生命周期重走一遍了。

设置完默认选中项后，我们当然还可以通过点击Tab项来自由地切换界面，这就会进入到onClick()方法中。onClick()方法中的逻辑判断非常简单，当点击了消息标签时就会选中第1个tab项，点击联系人标签时就会选中第2个tab项，点击动态标签时就会选中第3个tab项，点击设置标签时就会选中第4个tab项。都是通过调用setTabSelection()方法来完成的，只是传入了不同的参数。

好了，这样我们就将全部的代码都编写完成了，下面就来运行一下吧。整个Tab的界面有点类似于QQ的感觉，并且可以通过点击不同的Tab来切换界面，如下图所示：

![20131116214326375][]

另外，这个Tab界面即使在横屏的情况下也有不错的适用性哦，如下图所示：

![Center 3][]

这样，我们就成功使用Fragment编写出了Tab栏的效果。每个界面的具体逻辑就可以写在相应的Fragment里。

[Android]: http://lib.csdn.net/base/15
[Center]: https://img-blog.csdn.net/20131116171603468?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3VvbGluX2Jsb2c=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20131116171618593?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3VvbGluX2Jsb2c=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220717/6e38489a803d4397a76ca6e95d374610.png
[view plain]: http://blog.csdn.net/guolin_blog/article/details/13171191#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/76780
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/76780/fork
[20131116214326375]: /images/20220717/ffd31ef5c8ad4706ac4d9b0a27daa1ad.png
[Center 3]: /images/20220717/0e11ee8763c54bd5af9d12cafff6dacd.png