Android UI之Fragment

简介：Fragment（碎片），屏幕中的一部分区域专门用于切换不同碎片的显示，另一部分区域用来做碎片切换的触发，类似于微信的首界面，下方有四个选择，“微信”，“通讯录”，“发现”和“我”，当点击了相应部分，上方的碎片就会更新显示。

xml的布局配置

假设我们要做一个文件管理APP，其中某个界面需要用到三个部分的切换，包括“最近”、“分类”、“手机”三个碎片。总共需要设计四个xml文件，一个用于activity的界面布局，另外三个xml分别配置三个碎片的界面布局。
activity_history.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical" >	      
	<LinearLayout
		android:layout_width="match_parent"
		android:layout_height="60dp"
		android:background="#ffffff"
		android:orientation="horizontal" >		  
		<RelativeLayout
			android:id="@+id/lately_layout"
			android:layout_width="0dp"
			android:layout_height="match_parent"
			android:layout_weight="1" >			  
			<LinearLayout
				android:layout_width="match_parent"
				android:layout_height="wrap_content"
				android:layout_centerVertical="true"
				android:orientation="vertical" >				  
				<ImageView
				android:id="@+id/lately_image"
				android:layout_width="20dp"
				android:layout_height="20dp"
				android:layout_gravity="center_horizontal"
				android:src="@drawable/ic_launcher" />				  
				<TextView
				android:id="@+id/lately_text"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_gravity="center_horizontal"
				android:text="最近"
				android:textColor="#82858b" />
			</LinearLayout>
		</RelativeLayout>		   
		<RelativeLayout
			android:id="@+id/sort_layout"
			android:layout_width="0dp"
			android:layout_height="match_parent"
			android:layout_weight="1" >			  
			<LinearLayout
				android:layout_width="match_parent"
				android:layout_height="wrap_content"
				android:layout_centerVertical="true"
				android:orientation="vertical" >				  
				<ImageView
				android:id="@+id/sort_image"
				android:layout_width="20dp"
				android:layout_height="20dp"
				android:layout_gravity="center_horizontal"
				android:src="@drawable/ic_launcher" />				  
				<TextView
				android:id="@+id/sort_text"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_gravity="center_horizontal"
				android:text="分类"
				android:textColor="#82858b" />
			</LinearLayout>
		</RelativeLayout>		  
		<RelativeLayout
			android:id="@+id/phone_layout"
			android:layout_width="0dp"
			android:layout_height="match_parent"
			android:layout_weight="1" >			  
			<LinearLayout
				android:layout_width="match_parent"
				android:layout_height="wrap_content"
				android:layout_centerVertical="true"
				android:orientation="vertical" >				  
				<ImageView
				android:id="@+id/phone_image"
				android:layout_width="20dp"
				android:layout_height="20dp"
				android:layout_gravity="center_horizontal"
				android:src="@drawable/ic_launcher" />				  
				<TextView
				android:id="@+id/phone_text"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_gravity="center_horizontal"
				android:text="手机"
				android:textColor="#82858b" />
			</LinearLayout>
		</RelativeLayout>	
	</LinearLayout>	  
	<FrameLayout
		android:id="@+id/content"
		android:layout_width="match_parent"
		android:layout_height="0dp"
		android:layout_weight="1" >	
	</FrameLayout>
</LinearLayout>

分析：界面的布局主要采用的是线性布局，总体的线性布局包括上方的模块选择区域与下方的帧布局区域，模块选择区域又从水平方向分为三个部分，每个部分又分为图标和文字。此xml文件规定了activity的界面布局。在三个模块的公共区域采用的是帧布局（FrameLayout），下一帧可以覆盖在前一帧上，这种方式在众多布局中是效率最高的。下面介绍三个模块的布局xml文件。
lately.xml（其余三个和它的区别只是修改一些参数，不一一列出）：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >  
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical" >  
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/ic_launcher" />  
<TextView
android:id="@+id/lately"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="10dp"
android:text="最近"
android:textSize="20sp" />
</LinearLayout>  
</RelativeLayout>

Fragment的使用

要点提炼：
1、写三个碎片类继承Fragment类，重写onCreateView方法，当碎片被创建的时候调用xml中配置的组件并显示相应内容。
2、需要三个布局对象，从总的布局文件中获得，获取布局对象并为布局对象加监听，按下后会创建相应的碎片并显示内容。
3、碎片管理器与碎片事务对象：需要对某个activity进行碎片操作，需要先从碎片管理器获取一个碎片事物，然后通过碎片事物hide碎片，show碎片（对象已经存在）或add碎片（对象不存在），最后提交事务并执行。
4、判断按下的是哪个布局可以通过获取事件源然后匹配id来确定。
5、一些可以在xml中配置的参数在代码中也可以配置，比如某布局对象的底色（用来区分是否被选中）。
三个碎片类：

/**
 * "最近"的碎片类
 * @author mayifan
 */
class LatelyFragment extends Fragment{
	  private TextView tv;	  
	  /**
	   * 碎片被创建后调用这个方法，会显示相应的文字内容
	   */
	  public View onCreateView(LayoutInflater inflater, ViewGroup container,
	       Bundle savedInstanceState) {
	    View latelyLayout = inflater.inflate(R.layout.lately, container, false);//获取布局对象
	    tv=(TextView) latelyLayout.findViewById(R.id.lately);//获取碎片的文本对象
	    tv.setText("最近");//设置内容
	    return latelyLayout;//返回处理结果
	   }	  
}
class SortFragment extends Fragment{
	  private TextView tv;
	  public View onCreateView(LayoutInflater inflater, ViewGroup container,
	       Bundle savedInstanceState) {
	    View messageLayout = inflater.inflate(R.layout.sort, container, false);
	    tv=(TextView) messageLayout.findViewById(R.id.sort);
	    tv.setText("分类");
	    return messageLayout;
	   }	  
}
class PhoneFragment extends Fragment{
	  private TextView tv;
	  public View onCreateView(LayoutInflater inflater, ViewGroup container,
	       Bundle savedInstanceState) {
	    View phoneLayout = inflater.inflate(R.layout.phone, container, false);
	    tv=(TextView) phoneLayout.findViewById(R.id.phone);
	    tv.setText("手机");
	    return phoneLayout;
	   }	  
}

Activity类：

public class History extends Activity implements OnClickListener {
		private LatelyFragment latelyFragment; //用于展示“最近”的Fragment（碎片）
		private SortFragment sortFragment; //用于展示“分类”的Fragment
		private PhoneFragment  phoneFragment;	//用于展示“手机”的Fragment	  		  
		private View latelyLayout;	//	“最近”界面布局  
		private View sortLayout;	//	  “分类”界面布局
		private View  phoneLayout;		//  “手机”界面布局
		private FragmentManager fragmentManager;  //用于对Fragment进行管理
		@Override
		protected void onCreate(Bundle savedInstanceState) {
		   super.onCreate(savedInstanceState);
		   setContentView(R.layout.activity_history);
		   initViews();//初始化view，布局组件，并设置监听器
		   fragmentManager = this.getFragmentManager();//获取碎片管理器		  
		   setTabSelection(0); // 第一次启动时选中第0个tab
		}		  
		/**
		* 在这里获取三个布局对象，并给它们设置点击事件。
		*/	
		private void initViews() {
		   latelyLayout = findViewById(R.id.lately_layout);
		   sortLayout = findViewById(R.id.sort_layout);
		   phoneLayout = findViewById(R.id.phone_layout);
		   latelyLayout.setOnClickListener(this);
		   sortLayout.setOnClickListener(this);
		   phoneLayout.setOnClickListener(this);
		}		  
		/**
		 * 接口实现来的方法，响应对不同布局对象的点击
		 */
		public void onClick(View v) {
		   switch (v.getId()) {
		   case R.id.lately_layout:
		     // 当点击了消息tab时，选中第1个tab
		     setTabSelection(0);
		     break;
		   case R.id.sort_layout:
		     // 当点击了联系人tab时，选中第2个tab
		     setTabSelection(1);
		     break;
		   case R.id.phone_layout:
		      // 当点击了动态tab时，选中第3个tab
		      setTabSelection(2);
		      break;
		   default:
		    break;
		}		  
		}		  
		/**
		* 根据传入的index参数来设置选中的tab页。
		*
		* @param index
		* 每个tab页对应的下标。0表示最近，1表示分类，2表示手机。
		*/
		private void setTabSelection(int index) {
		   // 每次选中之前先清除掉上次的选中状态
		   clearSelection();
		   // 开启一个Fragment事务，可以用它来操作布局
		   FragmentTransaction transaction = fragmentManager.beginTransaction();
		   // 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况
		   hideFragments(transaction);
		   switch (index) {
		   case 0:
		     latelyLayout.setBackgroundColor(0xff0000ff);//设置背景色，表示被选中	  
		     if (latelyFragment == null) {
		       // 如果MessageFragment为空，则创建一个并添加到界面上
		        latelyFragment = new LatelyFragment();
		       transaction.add(R.id.content, latelyFragment);//在帧布局区域设置lately的布局内容
		     } else {
		       // 如果MessageFragment不为空，则直接将它显示出来
		       transaction.show(latelyFragment);
		     }
		     break;
		   case 1:
		    // 当点击了分类tab时，改变控件的图片和文字颜色
		    sortLayout.setBackgroundColor(0xff0000ff);
		    if (sortFragment == null) {
		     // 如果ContactsFragment为空，则创建一个并添加到界面上
		     sortFragment = new SortFragment();
		     transaction.add(R.id.content, sortFragment);
		    } else {
		     // 如果SortFragment不为空，则直接将它显示出来
		     transaction.show(sortFragment);
		    }
		    break;
		   case 2:
		    // 当点击了动态tab时，改变控件的图片和文字颜色
		     phoneLayout.setBackgroundColor(0xff0000ff);
		     if (phoneFragment == null) {
		      // 如果NewsFragment为空，则创建一个并添加到界面上
		       phoneFragment = new PhoneFragment();
		       transaction.add(R.id.content, phoneFragment);//content是帧布局的id
		     } else {
		      // 如果NewsFragment不为空，则直接将它显示出来
		      transaction.show(phoneFragment);
		     }
		     break;
		     default:	   
		    break;
		  }
		 transaction.commit();//碎片处理事务提交
		}		  
		/**
		* 将所有的Fragment都置为隐藏状态。
		*
		* @param transaction
		* 用于对Fragment执行操作的事务
		*/
		private void hideFragments(FragmentTransaction transaction) {
		   if (latelyFragment != null) {
		     transaction.hide(latelyFragment);
		   }
		    if (sortFragment != null) {
		     transaction.hide(sortFragment);
		   }
		    if (phoneFragment != null) {
		      transaction.hide(phoneFragment);
		   }
		}		  
		/**
		* 清除掉所有的选中状态。
		*/
		private void clearSelection() {
		   latelyLayout.setBackgroundColor(0xffffffff);
		   sortLayout.setBackgroundColor(0xffffffff);
		   phoneLayout.setBackgroundColor(0xffffffff);
		   }
}

效果呈现：