896      阿裏雲  技術社區[雲棲]

關於activitygroup過時，用frament替換操作

現在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="https://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>  

既然是等分成了四分，那接下來我們自然要去分別實現四個Fragment和它們的布局了。新建一個message_layout.xml作為消息界麵的布局，代碼如下所示：

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="https://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. }  

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="https://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>  

[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. }  

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="https://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>  

[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. }  

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="https://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>  

[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. }  

[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, cont

     最後更新：2017-04-03 05:39:40

       上一篇： Storm詳解一、Storm 概述

       下一篇： android 標簽雲的實現 關於x軸 冒泡排序～瞬間讓你高達上

     ---

     相關內容

     ---

     •   解決lnmp安裝卡在config-set succeeded
     •   你與高薪僅差一本Kotlin
     •   物聯網時代半導體製造設備小型化大勢所趨
     •   銳捷都有哪些國內領先的創新產品？
     •   《Mavan官方文檔》構建生命周期介紹
     •   用不到1000美元攢一台深度學習用的超快的電腦：繼續深度學習和便宜硬件的探奇！
     •  跨頁投遞和Transfer的區別
     •  Java中連接各種數據庫
     •   福利來嘍！個人分享課安排（免費）
     •  JAVA線程中的生產者和消費者問題

     熱門內容

     ---

     •  PostgreSQL 路徑規劃插件 pgruoting 介紹
     •  人生不過如此
     •   《STM32庫開發實戰指南：基於STM32F4》----導讀
     •   解密區塊鏈：從基礎概念到技術實現的進階攻略
     •  ZED Board從入門到精通（三）：從傳統ARM開發到PS開發的轉變
     •  [圖文]曆屆奧斯卡影帝(上)
     •   紮克伯格發6千字長文,談Facebook未來願景和世界該有的樣子
     •  VS 添加jQuery智能提示
     •  python3學習
     •   突破吞吐限製，多NAS性能聚合方案，數據上傳及讀寫

     最新內容

     ---

     •   駐雲Gartner聯合發布人工智能時代的MSP白皮書
     •   雲端安全之三：最佳實踐
     •   突破吞吐限製，多NAS性能聚合方案，數據上傳及讀寫
     •   如何同步TableStore數據到OSS
     •   百億級全網輿情分析係統存儲設計
     •   在ECS中訪問各類阿裏雲雲資源的正確姿勢
     •   不外傳的seo計劃教程方案
     •   網站有收錄沒排名的原因與解決辦法
     •   燃！阿裏的技術小哥們又又又拿冠軍了！
     •   如何將個性化需求變成大數據解決方案

     ---