Fragment碎片化仿人人

 其实一种好的UI布局，可以使用户感到更加的亲切与方便。最近非常流行的莫过于侧边栏了，其实我也做过很多侧边栏的应用，但是那些侧边栏的使用我都不是很满意，现在重新整理，重新写了一个相对来说我比较满意的侧边栏，其中运用的就是android3.0版本之后新加的Fragment碎片化，碎片化的使用将来也是一个趋势，所以通过我这个程序你既可以学到侧边栏，也能让你更加熟悉碎片化的使用，一举两得的事。哈哈……废话不多说了，直接上图。图片如下：

①、自定义一个View,把左侧边栏视图，中间内容视图，右侧边栏视图放在里面，这里给这个View起名叫：SlidingMenu.java

代码如下：

 package net.loonggg.view;

 import android.content.Context;
 import android.util.AttributeSet;
 import android.view.View;
 import android.widget.RelativeLayout;

 public class SlidingMenu extends RelativeLayout {

     private SlidingView mSlidingView;
     private View mMenuView;
     private View mDetailView;

     public SlidingMenu(Context context) {
         super(context);
     }

     public SlidingMenu(Context context, AttributeSet attrs) {
         super(context, attrs);
     }

     public SlidingMenu(Context context, AttributeSet attrs, int defStyle) {
         super(context, attrs, defStyle);
     }

     public void addViews(View left, View center, View right) {
         setLeftView(left);
         setRightView(right);
         setCenterView(center);
     }

     /**
      * 添加左侧边栏的view
      *
      * @param view
      */
     @SuppressWarnings("deprecation")
     public void setLeftView(View view) {
         LayoutParams behindParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
                 LayoutParams.FILL_PARENT);
         behindParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);// 在父控件的左边
         addView(view, behindParams);
         mMenuView = view;
     }

     /**
      * 添加右侧边栏的view
      *
      * @param view
      */
     @SuppressWarnings("deprecation")
     public void setRightView(View view) {
         LayoutParams behindParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
                 LayoutParams.FILL_PARENT);
         behindParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);// 在父控件的右边
         addView(view, behindParams);
         mDetailView = view;
     }

     /**
      * 添加中间内容的view
      *
      * @param view
      */
     @SuppressWarnings("deprecation")
     public void setCenterView(View view) {
         LayoutParams aboveParams = new LayoutParams(LayoutParams.FILL_PARENT,
                 LayoutParams.FILL_PARENT);
         mSlidingView = new SlidingView(getContext());
         mSlidingView.setView(view);
         addView(mSlidingView, aboveParams);
         mSlidingView.setMenuView(mMenuView);
         mSlidingView.setDetailView(mDetailView);
         mSlidingView.invalidate();
     }

     public void showLeftView() {
         mSlidingView.showLeftView();
     }

     public void showRightView() {
         mSlidingView.showRightView();
     }
 }

②、通过一个中间的View,去控制左右侧边栏的滑进与滑出，这个也是自定义的一个View,名字叫：SlidingView.java

代码如下：

 package net.loonggg.view;

 import android.content.Context;
 import android.graphics.Canvas;
 import android.util.AttributeSet;
 import android.util.Log;
 import android.view.MotionEvent;
 import android.view.VelocityTracker;
 import android.view.View;
 import android.view.ViewConfiguration;
 import android.view.ViewGroup;
 import android.widget.FrameLayout;
 import android.widget.Scroller;

 public class SlidingView extends ViewGroup {

     private FrameLayout mContainer;
     private Scroller mScroller;
     private VelocityTracker mVelocityTracker;
     private int mTouchSlop;
     private float mLastMotionX;
     private float mLastMotionY;
     private static final int SNAP_VELOCITY = 1000;
     private View mMenuView;
     private View mDetailView;

     public SlidingView(Context context) {
         super(context);
         init();
     }

     public SlidingView(Context context, AttributeSet attrs) {
         super(context, attrs);
         init();
     }

     public SlidingView(Context context, AttributeSet attrs, int defStyle) {
         super(context, attrs, defStyle);
         init();
     }

     @Override
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
         mContainer.measure(widthMeasureSpec, heightMeasureSpec);
     }

     @Override
     protected void onLayout(boolean changed, int l, int t, int r, int b) {
         final int width = r - l;
         final int height = b - t;
         mContainer.layout(0, 0, width, height);
     }

     private void init() {
         mContainer = new FrameLayout(getContext());
         mContainer.setBackgroundColor(0xff000000);
         mScroller = new Scroller(getContext());
         mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
         super.addView(mContainer);
     }

     public void setView(View v) {
         if (mContainer.getChildCount() > 0) {
             mContainer.removeAllViews();
         }
         mContainer.addView(v);
     }

     @Override
     public void scrollTo(int x, int y) {
         super.scrollTo(x, y);
         postInvalidate();
     }

     @Override
     public void computeScroll() {
         if (!mScroller.isFinished()) {
             if (mScroller.computeScrollOffset()) {
                 int oldX = getScrollX();
                 int oldY = getScrollY();
                 int x = mScroller.getCurrX();
                 int y = mScroller.getCurrY();
                 if (oldX != x || oldY != y) {
                     scrollTo(x, y);
                 }
                 // Keep on drawing until the animation has finished.
                 invalidate();
             } else {
                 clearChildrenCache();
             }
         } else {
             clearChildrenCache();
         }
     }

     private boolean mIsBeingDragged;

     @Override
     public boolean onInterceptTouchEvent(MotionEvent ev) {

         final int action = ev.getAction();
         final float x = ev.getX();
         final float y = ev.getY();

         switch (action) {
         case MotionEvent.ACTION_DOWN:
             mLastMotionX = x;
             mLastMotionY = y;
             mIsBeingDragged = false;
             break;

         case MotionEvent.ACTION_MOVE:
             final float dx = x - mLastMotionX;
             final float xDiff = Math.abs(dx);
             final float yDiff = Math.abs(y - mLastMotionY);
             if (xDiff > mTouchSlop && xDiff > yDiff) {
                 mIsBeingDragged = true;
                 mLastMotionX = x;
             }
             break;

         }
         return mIsBeingDragged;
     }

     @Override
     public boolean onTouchEvent(MotionEvent ev) {

         if (mVelocityTracker == null) {
             mVelocityTracker = VelocityTracker.obtain();
         }
         mVelocityTracker.addMovement(ev);

         final int action = ev.getAction();
         final float x = ev.getX();
         final float y = ev.getY();

         switch (action) {
         case MotionEvent.ACTION_DOWN:
             if (!mScroller.isFinished()) {
                 mScroller.abortAnimation();
             }
             mLastMotionX = x;
             mLastMotionY = y;
             if (getScrollX() == -getMenuViewWidth()
                     && mLastMotionX < getMenuViewWidth()) {
                 return false;
             }

             if (getScrollX() == getDetailViewWidth()
                     && mLastMotionX > getMenuViewWidth()) {
                 return false;
             }

             break;
         case MotionEvent.ACTION_MOVE:
             if (mIsBeingDragged) {
                 enableChildrenCache();
                 final float deltaX = mLastMotionX - x;
                 mLastMotionX = x;
                 float oldScrollX = getScrollX();
                 float scrollX = oldScrollX + deltaX;

                 if (deltaX < 0 && oldScrollX < 0) { // left view
                     final float leftBound = 0;
                     final float rightBound = -getMenuViewWidth();
                     if (scrollX > leftBound) {
                         scrollX = leftBound;
                     } else if (scrollX < rightBound) {
                         scrollX = rightBound;
                     }
                     // mDetailView.setVisibility(View.INVISIBLE);
                     // mMenuView.setVisibility(View.VISIBLE);
                 } else if (deltaX > 0 && oldScrollX > 0) { // right view
                     final float rightBound = getDetailViewWidth();
                     final float leftBound = 0;
                     if (scrollX < leftBound) {
                         scrollX = leftBound;
                     } else if (scrollX > rightBound) {
                         scrollX = rightBound;
                     }
                     // mDetailView.setVisibility(View.VISIBLE);
                     // mMenuView.setVisibility(View.INVISIBLE);
                 }

                 scrollTo((int) scrollX, getScrollY());

             }
             break;
         case MotionEvent.ACTION_CANCEL:
         case MotionEvent.ACTION_UP:
             if (mIsBeingDragged) {
                 final VelocityTracker velocityTracker = mVelocityTracker;
                 velocityTracker.computeCurrentVelocity(1000);
                 int velocityX = (int) velocityTracker.getXVelocity();
                 velocityX = 0;
                 Log.e("ad", "velocityX == " + velocityX);
                 int oldScrollX = getScrollX();
                 int dx = 0;
                 if (oldScrollX < 0) {
                     if (oldScrollX < -getMenuViewWidth() / 2
                             || velocityX > SNAP_VELOCITY) {
                         dx = -getMenuViewWidth() - oldScrollX;
                     } else if (oldScrollX >= -getMenuViewWidth() / 2
                             || velocityX < -SNAP_VELOCITY) {
                         dx = -oldScrollX;
                     }
                 } else {
                     if (oldScrollX > getDetailViewWidth() / 2
                             || velocityX < -SNAP_VELOCITY) {
                         dx = getDetailViewWidth() - oldScrollX;
                     } else if (oldScrollX <= getDetailViewWidth() / 2
                             || velocityX > SNAP_VELOCITY) {
                         dx = -oldScrollX;
                     }
                 }

                 smoothScrollTo(dx);
                 clearChildrenCache();

             }

             break;

         }
         if (mVelocityTracker != null) {
             mVelocityTracker.recycle();
             mVelocityTracker = null;
         }

         return true;
     }

     private int getMenuViewWidth() {
         if (mMenuView == null) {
             return 0;
         }
         return mMenuView.getWidth();
     }

     private int getDetailViewWidth() {
         if (mDetailView == null) {
             return 0;
         }
         return mDetailView.getWidth();
     }

     @Override
     protected void onDraw(Canvas canvas) {
         super.onDraw(canvas);
     }

     public View getDetailView() {
         return mDetailView;
     }

     public void setDetailView(View mDetailView) {
         this.mDetailView = mDetailView;
     }

     public View getMenuView() {
         return mMenuView;
     }

     public void setMenuView(View mMenuView) {
         this.mMenuView = mMenuView;
     }

     // void toggle() {
     // int menuWidth = mMenuView.getWidth();
     // int oldScrollX = getScrollX();
     // if (oldScrollX == 0) {
     // smoothScrollTo(-menuWidth);
     // } else if (oldScrollX == -menuWidth) {
     // smoothScrollTo(menuWidth);
     // }
     // }

     /**
      * 左侧边栏的关闭与显示
      */
     public void showLeftView() {
         int menuWidth = mMenuView.getWidth();
         int oldScrollX = getScrollX();
         if (oldScrollX == 0) {
             smoothScrollTo(-menuWidth);
         } else if (oldScrollX == -menuWidth) {
             smoothScrollTo(menuWidth);
         }
     }

     /**
      * 右侧边栏的关闭与显示
      */
     public void showRightView() {
         int menuWidth = mDetailView.getWidth();
         int oldScrollX = getScrollX();
         if (oldScrollX == 0) {
             smoothScrollTo(menuWidth);
         } else if (oldScrollX == menuWidth) {
             smoothScrollTo(-menuWidth);
         }
     }

     void smoothScrollTo(int dx) {
         int duration = 500;
         int oldScrollX = getScrollX();
         mScroller.startScroll(oldScrollX, getScrollY(), dx, getScrollY(),
                 duration);
         invalidate();
     }

     void enableChildrenCache() {
         final int count = getChildCount();
         for (int i = 0; i < count; i++) {
             final View layout = (View) getChildAt(i);
             layout.setDrawingCacheEnabled(true);
         }
     }

     void clearChildrenCache() {
         final int count = getChildCount();
         for (int i = 0; i < count; i++) {
             final View layout = (View) getChildAt(i);
             layout.setDrawingCacheEnabled(false);
         }
     }

 }

③、在MainActivity的布局文件中，引用咱们自定义的侧边栏View,MainActivity的布局文件代码如下：activity_main.xml:

 <?xml version="1.0" encoding="utf-8"?>
 <net.loonggg.view.SlidingMenu xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/slidingMenu"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent" />

④、MainActivity继承碎片化FragmentActivity，其代码如下:

 package net.loonggg.fragment;

 import net.loonggg.view.SlidingMenu;
 import android.content.Intent;
 import android.os.Bundle;
 import android.support.v4.app.FragmentActivity;
 import android.support.v4.app.FragmentTransaction;
 import android.view.View;
 import android.view.Window;

 public class MainActivity extends FragmentActivity {
     private SlidingMenu mSlidingMenu;// 侧边栏的view
     private LeftFragment leftFragment; // 左侧边栏的碎片化view
     private RightFragment rightFragment; // 右侧边栏的碎片化view
     private SampleListFragment centerFragment;// 中间内容碎片化的view
     private FragmentTransaction ft; // 碎片化管理的事务

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         // 去标题栏
         requestWindowFeature(Window.FEATURE_NO_TITLE);
         setContentView(R.layout.activity_main);
         mSlidingMenu = (SlidingMenu) findViewById(R.id.slidingMenu);
         mSlidingMenu.setLeftView(getLayoutInflater().inflate(
                 R.layout.left_frame, null));
         mSlidingMenu.setRightView(getLayoutInflater().inflate(
                 R.layout.right_frame, null));
         mSlidingMenu.setCenterView(getLayoutInflater().inflate(
                 R.layout.center_frame, null));

         ft = this.getSupportFragmentManager().beginTransaction();
         leftFragment = new LeftFragment();
         rightFragment = new RightFragment();
         ft.replace(R.id.left_frame, leftFragment);
         ft.replace(R.id.right_frame, rightFragment);

         centerFragment = new SampleListFragment();
         ft.replace(R.id.center_frame, centerFragment);
         ft.commit();

     }

     public void llronclick(View v) {
         switch (v.getId()) {
         case R.id.llr_energy_management:

             Intent intent = new Intent(this, DetailsActivity.class);
             startActivity(intent);
             break;

         default:
             break;
         }
     }

     public void showLeft() {
         mSlidingMenu.showLeftView();
     }

     public void showRight() {
         mSlidingMenu.showRightView();
     }

 }

⑤、左中右，左侧边栏，中间内容部分，右侧边栏，分别用Fragment代替，呈现出你想要的界面，这里我们只需要写Fragment就可以了，中间部分我们用SampleListFragment代替其中间内容部分，SampleListFragment的代码如下：

 package net.loonggg.fragment;

 import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;

 import android.content.Intent;
 import android.os.Bundle;
 import android.support.v4.app.ListFragment;
 import android.util.Log;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.view.ViewGroup;
 import android.widget.ImageView;
 import android.widget.ListView;
 import android.widget.SimpleAdapter;

 public class SampleListFragment extends ListFragment {
     private ImageView lv_left;
     private ImageView iv_right;

     public View onCreateView(LayoutInflater inflater, ViewGroup container,
             Bundle savedInstanceState) {
         View mView = inflater.inflate(R.layout.list, null);
         lv_left = (ImageView) mView.findViewById(R.id.iv_left);
         iv_right = (ImageView) mView.findViewById(R.id.iv_right);
         return mView;
     }

     public void onActivityCreated(Bundle savedInstanceState) {
         super.onActivityCreated(savedInstanceState);
         Map<String, Object> item1 = new HashMap<String, Object>();
         item1.put("list_title", getString(R.string.title1));
         item1.put("list_image", R.drawable.p1);
         item1.put("list_contect", getString(R.string.test));
         Map<String, Object> item2 = new HashMap<String, Object>();
         item2.put("list_title", getString(R.string.title1));
         item2.put("list_image", R.drawable.p2);
         item2.put("list_contect", getString(R.string.test));
         Map<String, Object> item3 = new HashMap<String, Object>();
         item3.put("list_title", getString(R.string.title1));
         item3.put("list_image", R.drawable.p3);
         item3.put("list_contect", getString(R.string.test));
         Map<String, Object> item4 = new HashMap<String, Object>();
         item4.put("list_title", getString(R.string.title1));
         item4.put("list_image", R.drawable.p4);
         item4.put("list_contect", getString(R.string.test));
         Map<String, Object> item5 = new HashMap<String, Object>();
         item5.put("list_title", getString(R.string.title1));
         item5.put("list_image", R.drawable.p5);
         item5.put("list_contect", getString(R.string.test));
         Map<String, Object> item6 = new HashMap<String, Object>();
         item6.put("list_title", getString(R.string.title1));
         item6.put("list_image", R.drawable.p6);
         item6.put("list_contect", getString(R.string.test));
         Map<String, Object> item7 = new HashMap<String, Object>();
         item7.put("list_title", getString(R.string.title1));
         item7.put("list_image", R.drawable.p7);
         item7.put("list_contect", getString(R.string.test));
         List<Map<String, Object>> data = new ArrayList<Map<String, Object>>();
         data.add(item1);
         data.add(item2);
         data.add(item3);
         data.add(item4);
         data.add(item5);
         data.add(item6);
         data.add(item7);

         String[] from = new String[] { "list_title", "list_image",
                 "list_contect" };
         int[] to = new int[] { R.id.list_title, R.id.list_image,
                 R.id.list_contect };
         SimpleAdapter adapter = new SimpleAdapter(getActivity(), data,
                 R.layout.list_item, from, to);
         setListAdapter(adapter);

         lv_left.setOnClickListener(new OnClickListener() {

             public void onClick(View v) {
                 ((MainActivity) getActivity()).showLeft();
             }
         });

         iv_right.setOnClickListener(new OnClickListener() {

             public void onClick(View v) {
                 ((MainActivity) getActivity()).showRight();
             }
         });
     }

     @Override
     public void onListItemClick(ListView l, View v, int position, long id) {
         super.onListItemClick(l, v, position, id);
         Intent intent = new Intent(getActivity(), DetailsActivity.class);
         startActivity(intent);
     }
 }

⑥、左侧边栏的View用LeftFragment替代，LeftFragment代码如下：

 package net.loonggg.fragment;

 import android.os.Bundle;
 import android.support.v4.app.Fragment;
 import android.support.v4.app.FragmentTransaction;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.LinearLayout;

 public class LeftFragment extends Fragment {

     public View onCreateView(LayoutInflater inflater, ViewGroup container,
             Bundle savedInstanceState) {
         View view = inflater.inflate(R.layout.left_fragment, null);
         LinearLayout userLayout = (LinearLayout) view
                 .findViewById(R.id.userLayout);
         userLayout.setOnClickListener(new View.OnClickListener() {

             public void onClick(View v) {
                 UserFragment user = new UserFragment();
                 FragmentTransaction ft = getActivity()
                         .getSupportFragmentManager().beginTransaction();
                 ft.replace(R.id.center_frame, user);
                 ft.commit();
                 ((MainActivity) getActivity()).showLeft();
             }
         });

         LinearLayout mainPage = (LinearLayout) view.findViewById(R.id.mainPage);
         mainPage.setOnClickListener(new View.OnClickListener() {

             @Override