Android Fragment應用實戰，使用碎片向ActivityGroup說再見

轉載請註明出處：http://blog.csdn.net/guolin_blog/article/details/13171191

如今Fragment的應用真的是愈來愈普遍了，以前Android在3.0版本加入Fragment的時候，主要是爲了解決Android Pad屏幕比較大，空間不能充分利用的問題，但如今即便只是在手機上，也有不少的場景能夠運用到Fragment了，今天咱們就來學習其中一個特別棒的應用技巧。

不少手機應用都會有一個很是相似的功能，即屏幕的下方顯示一行Tab標籤選項，點擊不一樣的標籤就能夠切換到不一樣的界面，如如下幾個應用所示：

                     

上面三個應用從左到右分別是QQ、新浪微博和支付寶錢包，可見，這種底部標籤式的佈局策略真的很是常見。

那麼話說回來，這種效果究竟是如何的呢？熟悉Android的朋友必定都會知道，很簡單嘛，使用TabHost就OK了！可是卻不知，TabHost並不是是那麼的簡單，它的可擴展性很是的差，不能隨意地定製Tab項顯示的內容，並且運行還要依賴於ActivityGroup。ActivityGroup本來主要是用於爲每個TabHost的子項管理一個單獨的Activity，但目前已經被廢棄了。爲何呢？固然就是由於Fragment的出現了！查看Android官方文檔中ActivityGroup的描述，以下所示：

        

能夠看到，在API 13的時候Android就已經將ActivityGroup廢棄掉了，而且官方推薦的替代方式就是使用Fragment，由於它使用起來更加的靈活。那麼剩下的問題就是如何藉助Fragment來完成相似於TabHost通常的效果了，所以咱們天然要動起手來了。

在開始以前，首先你必須已經瞭解Fragment的用法了，若是你對Fragment還比較陌生的話，建議先去閱讀我前面的一篇文章 Android Fragment徹底解析，關於碎片你所需知道的一切 。

另外，咱們還應該準備好程序所須要的資源，好比說每個Tab項中所用到的圖片。我已經事先從QQ裏截好了幾張圖做爲這個項目的資源，稍後會連同源碼一塊兒給出。

新建一個項目，起名就叫FragmentDemo，這裏我使用的是4.0的API。

下面開始編程工做，這裏咱們首先須要去編寫一個相似於QQ的主界面，固然只會去編寫界面最下方的TabHost部分，而不會編寫上面的內容界面部分，由於內容界面是應該寫在Fragment的佈局裏的。打開或新建activity_main.xml做爲程序的主佈局文件，在裏面加入以下代碼：

[html] view plaincopy

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 plaincopy

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 plaincopy

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 plaincopy

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 plaincopy

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 plaincopy

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 plaincopy

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 plaincopy

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 plaincopy

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 plaincopy

1. /** 

2.  * 項目的主Activity，全部的Fragment都嵌入在這裏。 

3.  *  

4.  * @author guolin 

5.  */  

6. public class MainActivity extends Activity implements OnClickListener {  

7.   

8.     /** 

9.      * 用於展現消息的Fragment 

10.      */  

11.     private MessageFragment messageFragment;  

12.   

13.     /** 

14.      * 用於展現聯繫人的Fragment 

15.      */  

16.     private ContactsFragment contactsFragment;  

17.   

18.     /** 

19.      * 用於展現動態的Fragment 

20.      */  

21.     private NewsFragment newsFragment;  

22.   

23.     /** 

24.      * 用於展現設置的Fragment 

25.      */  

26.     private SettingFragment settingFragment;  

27.   

28.     /** 

29.      * 消息界面佈局 

30.      */  

31.     private View messageLayout;  

32.   

33.     /** 

34.      * 聯繫人界面佈局 

35.      */  

36.     private View contactsLayout;  

37.   

38.     /** 

39.      * 動態界面佈局 

40.      */  

41.     private View newsLayout;  

42.   

43.     /** 

44.      * 設置界面佈局 

45.      */  

46.     private View settingLayout;  

47.   

48.     /** 

49.      * 在Tab佈局上顯示消息圖標的控件 

50.      */  

51.     private ImageView messageImage;  

52.   

53.     /** 

54.      * 在Tab佈局上顯示聯繫人圖標的控件 

55.      */  

56.     private ImageView contactsImage;  

57.   

58.     /** 

59.      * 在Tab佈局上顯示動態圖標的控件 

60.      */  

61.     private ImageView newsImage;  

62.   

63.     /** 

64.      * 在Tab佈局上顯示設置圖標的控件 

65.      */  

66.     private ImageView settingImage;  

67.   

68.     /** 

69.      * 在Tab佈局上顯示消息標題的控件 

70.      */  

71.     private TextView messageText;  

72.   

73.     /** 

74.      * 在Tab佈局上顯示聯繫人標題的控件 

75.      */  

76.     private TextView contactsText;  

77.   

78.     /** 

79.      * 在Tab佈局上顯示動態標題的控件 

80.      */  

81.     private TextView newsText;  

82.   

83.     /** 

84.      * 在Tab佈局上顯示設置標題的控件 

85.      */  

86.     private TextView settingText;  

87.   

88.     /** 

89.      * 用於對Fragment進行管理 

90.      */  

91.     private FragmentManager fragmentManager;  

92.   

93.     @Override  

94.     protected void onCreate(Bundle savedInstanceState) {  

95.         super.onCreate(savedInstanceState);  

96.         requestWindowFeature(Window.FEATURE_NO_TITLE);  

97.         setContentView(R.layout.activity_main);  

98.         // 初始化佈局元素  

99.         initViews();  

100.         fragmentManager = getFragmentManager();  

101.         // 第一次啓動時選中第0個tab  

102.         setTabSelection(0);  

103.     }  

104.   

105.     /** 

106.      * 在這裏獲取到每一個須要用到的控件的實例，並給它們設置好必要的點擊事件。 

107.      */  

108.     private void initViews() {  

109.         messageLayout = findViewById(R.id.message_layout);  

110.         contactsLayout = findViewById(R.id.contacts_layout);  

111.         newsLayout = findViewById(R.id.news_layout);  

112.         settingLayout = findViewById(R.id.setting_layout);  

113.         messageImage = (ImageView) findViewById(R.id.message_image);  

114.         contactsImage = (ImageView) findViewById(R.id.contacts_image);  

115.         newsImage = (ImageView) findViewById(R.id.news_image);  

116.         settingImage = (ImageView) findViewById(R.id.setting_image);  

117.         messageText = (TextView) findViewById(R.id.message_text);  

118.         contactsText = (TextView) findViewById(R.id.contacts_text);  

119.         newsText = (TextView) findViewById(R.id.news_text);  

120.         settingText = (TextView) findViewById(R.id.setting_text);  

121.         messageLayout.setOnClickListener(this);  

122.         contactsLayout.setOnClickListener(this);  

123.         newsLayout.setOnClickListener(this);  

124.         settingLayout.setOnClickListener(this);  

125.     }  

126.   

127.     @Override  

128.     public void onClick(View v) {  

129.         switch (v.getId()) {  

130.         case R.id.message_layout:  

131.             // 當點擊了消息tab時，選中第1個tab  

132.             setTabSelection(0);  

133.             break;  

134.         case R.id.contacts_layout:  

135.             // 當點擊了聯繫人tab時，選中第2個tab  

136.             setTabSelection(1);  

137.             break;  

138.         case R.id.news_layout:  

139.             // 當點擊了動態tab時，選中第3個tab  

140.             setTabSelection(2);  

141.             break;  

142.         case R.id.setting_layout:  

143.             // 當點擊了設置tab時，選中第4個tab  

144.             setTabSelection(3);  

145.             break;  

146.         default:  

147.             break;  

148.         }  

149.     }  

150.   

151.     /** 

152.      * 根據傳入的index參數來設置選中的tab頁。 

153.      *  

154.      * @param index 

155.      *            每一個tab頁對應的下標。0表示消息，1表示聯繫人，2表示動態，3表示設置。 

156.      */  

157.     private void setTabSelection(int index) {  

158.         // 每次選中以前先清楚掉上次的選中狀態  

159.         clearSelection();  

160.         // 開啓一個Fragment事務  

161.         FragmentTransaction transaction = fragmentManager.beginTransaction();  

162.         // 先隱藏掉全部的Fragment，以防止有多個Fragment顯示在界面上的狀況  

163.         hideFragments(transaction);  

164.         switch (index) {  

165.         case 0:  

166.             // 當點擊了消息tab時，改變控件的圖片和文字顏色  

167.             messageImage.setImageResource(R.drawable.message_selected);  

168.             messageText.setTextColor(Color.WHITE);  

169.             if (messageFragment == null) {  

170.                 // 若是MessageFragment爲空，則建立一個並添加到界面上  

171.                 messageFragment = new MessageFragment();  

172.                 transaction.add(R.id.content, messageFragment);  

173.             } else {  

174.                 // 若是MessageFragment不爲空，則直接將它顯示出來  

175.                 transaction.show(messageFragment);  

176.             }  

177.             break;  

178.         case 1:  

179.             // 當點擊了聯繫人tab時，改變控件的圖片和文字顏色  

180.             contactsImage.setImageResource(R.drawable.contacts_selected);  

181.             contactsText.setTextColor(Color.WHITE);  

182.             if (contactsFragment == null) {  

183.                 // 若是ContactsFragment爲空，則建立一個並添加到界面上  

184.                 contactsFragment = new ContactsFragment();  

185.                 transaction.add(R.id.content, contactsFragment);  

186.             } else {  

187.                 // 若是ContactsFragment不爲空，則直接將它顯示出來  

188.                 transaction.show(contactsFragment);  

189.             }  

190.             break;  

191.         case 2:  

192.             // 當點擊了動態tab時，改變控件的圖片和文字顏色  

193.             newsImage.setImageResource(R.drawable.news_selected);  

194.             newsText.setTextColor(Color.WHITE);  

195.             if (newsFragment == null) {  

196.                 // 若是NewsFragment爲空，則建立一個並添加到界面上  

197.                 newsFragment = new NewsFragment();  

198.                 transaction.add(R.id.content, newsFragment);  

199.             } else {  

200.                 // 若是NewsFragment不爲空，則直接將它顯示出來  

201.                 transaction.show(newsFragment);  

202.             }  

203.             break;  

204.         case 3:  

205.         default:  

206.             // 當點擊了設置tab時，改變控件的圖片和文字顏色  

207.             settingImage.setImageResource(R.drawable.setting_selected);  

208.             settingText.setTextColor(Color.WHITE);  

209.             if (settingFragment == null) {  

210.                 // 若是SettingFragment爲空，則建立一個並添加到界面上  

211.                 settingFragment = new SettingFragment();  

212.                 transaction.add(R.id.content, settingFragment);  

213.             } else {  

214.                 // 若是SettingFragment不爲空，則直接將它顯示出來  

215.                 transaction.show(settingFragment);  

216.             }  

217.             break;  

218.         }  

219.         transaction.commit();  

220.     }  

221.   

222.     /** 

223.      * 清除掉全部的選中狀態。 

224.      */  

225.     private void clearSelection() {  

226.         messageImage.setImageResource(R.drawable.message_unselected);  

227.         messageText.setTextColor(Color.parseColor("#82858b"));  

228.         contactsImage.setImageResource(R.drawable.contacts_unselected);  

229.         contactsText.setTextColor(Color.parseColor("#82858b"));  

230.         newsImage.setImageResource(R.drawable.news_unselected);  

231.         newsText.setTextColor(Color.parseColor("#82858b"));  

232.         settingImage.setImageResource(R.drawable.setting_unselected);  

233.         settingText.setTextColor(Color.parseColor("#82858b"));  

234.     }  

235.   

236.     /** 

237.      * 將全部的Fragment都置爲隱藏狀態。 

238.      *  

239.      * @param transaction 

240.      *            用於對Fragment執行操做的事務 

241.      */  

242.     private void hideFragments(FragmentTransaction transaction) {  

243.         if (messageFragment != null) {  

244.             transaction.hide(messageFragment);  

245.         }  

246.         if (contactsFragment != null) {  

247.             transaction.hide(contactsFragment);  

248.         }  

249.         if (newsFragment != null) {  

250.             transaction.hide(newsFragment);  

251.         }  

252.         if (settingFragment != null) {  

253.             transaction.hide(settingFragment);  

254.         }  

255.     }  

256. }  

這個類中的註釋已經寫得很是詳細了，下面我再帶你們簡單梳理一遍。在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來切換界面，以下圖所示：

                                                   

另外，這個Tab界面即便在橫屏的狀況下也有不錯的適用性哦，以下圖所示：

                            

這樣，咱們就成功使用Fragment編寫出了和TabHost同樣的效果。每一個界面的具體邏輯就能夠寫在相應的Fragment裏，效果和以前寫在Activity裏是差很少的。如此一來，咱們終於能夠和那個被廢棄的ActivityGroup說再見了！

好了，今天的講解到此結束，有疑問的朋友請在下面留言。