Android Fragment 完全解析

参考文章：http://blog.csdn.net/guolin_blog/article/details/8881711 http://blog.csdn.net/guolin_blog/article/details/13171191 Android Fragment应用实战，使用碎片向ActivityGroup说再见

界面如下：

实现步骤：

程序结构：

1. 编写主界面的xml文件
   1. <?xml version="1.0" encoding="utf-8"?>
   2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   3.     android:orientation="vertical"
   4.     android:layout_width="fill_parent"
   5.     android:layout_height="fill_parent">
   6.  
   7.     <FrameLayout
   8.         android:layout_width="match_parent"
   9.         android:layout_height="0dp"
   10.         android:layout_weight="1"
   11.         android:id="@+id/content">
   12.     </FrameLayout>
   13.         <LinearLayout
   14.             android:layout_width="match_parent"
   15.             android:layout_height="60dp"
   16.             android:background="@drawable/tab_bg">
   17.             <RelativeLayout
   18.                 android:layout_width="0dp"
   19.                 android:layout_height="match_parent"
   20.                 android:layout_weight="1"
   21.                 android:id="@+id/message_layout">
   22.                 <LinearLayout
   23.                     android:layout_width="match_parent"
   24.                     android:layout_height="wrap_content"
   25.                     android:layout_centerVertical="true"
   26.                     android:orientation="vertical">
   27.                     <ImageView
   28.                         android:layout_width="wrap_content"
   29.                         android:layout_height="wrap_content"
   30.                         android:layout_gravity="center_horizontal"
   31.                         android:src="@drawable/message_unselected"
   32.                         android:id="@+id/message_image"/>
   33.                     <TextView
   34.                         android:layout_width="wrap_content"
   35.                         android:layout_height="wrap_content"
   36.                         android:layout_gravity="center_horizontal"
   37.                         android:text="消息"
   38.                         android:id="@+id/message_text"
   39.                         android:textColor="#82858b"/>
   40.                 </LinearLayout>
   41.             </RelativeLayout>
   42.             <RelativeLayout
   43.                 android:layout_width="0dp"
   44.                 android:layout_height="match_parent"
   45.                 android:layout_weight="1"
   46.                 android:id="@+id/contacts_layout">
   47.                 <LinearLayout
   48.                     android:layout_width="match_parent"
   49.                     android:layout_height="wrap_content"
   50.                     android:layout_centerVertical="true"
   51.                     android:orientation="vertical">
   52.                     <ImageView
   53.                         android:layout_width="wrap_content"
   54.                         android:layout_height="wrap_content"
   55.                         android:layout_gravity="center_horizontal"
   56.                         android:src="@drawable/contacts_unselected"
   57.                         android:id="@+id/contacts_image"/>
   58.                     <TextView
   59.                         android:layout_width="wrap_content"
   60.                         android:layout_height="wrap_content"
   61.                         android:layout_gravity="center_horizontal"
   62.                         android:text="联系人"
   63.                         android:id="@+id/contacts_text"
   64.                         android:textColor="#82858b"/>
   65.                 </LinearLayout>
   66.             </RelativeLayout>
   67.             <RelativeLayout
   68.                 android:layout_width="0dp"
   69.                 android:layout_height="match_parent"
   70.                 android:layout_weight="1"
   71.                 android:id="@+id/news_layout">
   72.                 <LinearLayout
   73.                     android:layout_width="match_parent"
   74.                     android:layout_height="wrap_content"
   75.                     android:layout_centerVertical="true"
   76.                     android:orientation="vertical">
   77.                     <ImageView
   78.                         android:layout_width="wrap_content"
   79.                         android:layout_height="wrap_content"
   80.                         android:layout_gravity="center_horizontal"
   81.                         android:src="@drawable/news_unselected"
   82.                         android:id="@+id/news_image"/>
   83.                     <TextView
   84.                         android:layout_width="wrap_content"
   85.                         android:layout_height="wrap_content"
   86.                         android:layout_gravity="center_horizontal"
   87.                         android:text="动态"
   88.                         android:id="@+id/news_text"
   89.                         android:textColor="#82858b"/>
   90.                 </LinearLayout>
   91.             </RelativeLayout>
   92.             <RelativeLayout
   93.                 android:layout_width="0dp"
   94.                 android:layout_height="match_parent"
   95.                 android:layout_weight="1"
   96.                 android:id="@+id/setting_layout">
   97.                 <LinearLayout
   98.                     android:layout_width="match_parent"
   99.                     android:layout_height="wrap_content"
   100.                     android:layout_centerVertical="true"
   101.                     android:orientation="vertical">
   102.                     <ImageView
   103.                         android:layout_width="wrap_content"
   104.                         android:layout_height="wrap_content"
   105.                         android:layout_gravity="center_horizontal"
   106.                         android:src="@drawable/setting_unselected"
   107.                         android:id="@+id/setting_image"/>
   108.                     <TextView
   109.                         android:layout_width="wrap_content"
   110.                         android:layout_height="wrap_content"
   111.                         android:layout_gravity="center_horizontal"
   112.                         android:text="设置"
   113.                         android:id="@+id/setting_text"
   114.                         android:textColor="#82858b"/>
   115.                 </LinearLayout>
   116.             </RelativeLayout>
   117.         </LinearLayout>
   118.  
   119. </LinearLayout>

   效果图如下:

   

   这里面最上方是一个frameLayout，下面是一个大的LinearLayout套了四个RelativeLayout，每个RelativeLayout 里面有套了一个LinearLayout，然后此线性布局下面放了一个imageview和Textview。

   其中，四个相对布局都是用的weight权重来实现的。

    

2. 分别编写每个fragment的xml。
   1. <?xml version="1.0" encoding="utf-8"?>
   2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
   3.     android:layout_height="match_parent">
   4.  
   5.     <LinearLayout
   6.         android:layout_width="wrap_content"
   7.         android:layout_height="wrap_content"
   8.         android:orientation="vertical"
   9.         android:layout_centerInParent="true">
   10.         <ImageView
   11.             android:layout_width="wrap_content"
   12.             android:layout_height="wrap_content"
   13.             android:layout_gravity="center_horizontal"
   14.             android:src="@drawable/message_selected"/>
   15.         <TextView
   16.             android:layout_width="wrap_content"
   17.             android:layout_height="wrap_content"
   18.             android:layout_gravity="center_horizontal"
   19.             android:padding="10dp"
   20.             android:text="这是消息界面"
   21.             android:textSize="20sp"/>
   22.     </LinearLayout>
   23. </RelativeLayout>

   

   只举一个实例，其他一样。

3. 为每个xml 定义各自的Fragment
   1. package com.example.FragmentDemo;
   2.  
   3. import android.app.Fragment;
   4. import android.os.Bundle;
   5. import android.view.LayoutInflater;
   6. import android.view.View;
   7. import android.view.ViewGroup;
   8.  
   9. /**
   10.  * Created by zhuxuekui on 2015/5/18.
   11.  */
   12. public class MessageFragment extends Fragment {
   13.     @Override
   14.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   15.         View messageLayout = inflater.inflate(R.layout.message_layout,container,false);
   16.         return messageLayout;
   17.     }
   18. }
4. 编写业务逻辑层
   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方法里面initview() 初始化各个控件，然后为每个layout 设置监听事件（相对布局的layout），当我们点击到某个layout时候，执行SetTabSelection(index)方法。

在刚刚的方法里面，我们首先执行clearSelection，将所有的imageview都设置为不选中状态，然后并隐藏hideFragment，这里我们用FragmentManager里面的FragmentTransaction来实现的。

这两个方法执行完之后，我们进入到switch条件语句，改变某个选中的图标的图片以及文字，这里面我们显示的是Fragment,没有用replace而是用的add，show，hide方法来实现。这样程序执行的效率会高一点，不然，用replace的话，被替换掉的fragment会彻底的被干掉，即声明周期结束，当我们又一次选中的时候，还要重新加载，这样变得麻烦。