• Android Fragment應用實戰

    1
    Android C/C++ Go Fragment ico 14616 次瀏覽

    轉載請注明出處: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在CODE上查看代碼片派生到我的代碼片
    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在CODE上查看代碼片派生到我的代碼片
    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在CODE上查看代碼片派生到我的代碼片
    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在CODE上查看代碼片派生到我的代碼片
    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在CODE上查看代碼片派生到我的代碼片
    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在CODE上查看代碼片派生到我的代碼片
    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在CODE上查看代碼片派生到我的代碼片
    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在CODE上查看代碼片派生到我的代碼片
    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在CODE上查看代碼片派生到我的代碼片
    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在CODE上查看代碼片派生到我的代碼片
    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說再見了!

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

    源碼下載,請點擊這里

    相似問題

    相關經驗

    相關資訊

    相關文檔

  • sesese色