Android学习笔记（四）之碎片化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);
    }
}

其相应的布局文件代码如下：list.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#fff"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/banner_unit"
        android:padding="7dip" >

        <ImageView
            android:id="@+id/iv_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.1"
            android:clickable="true"
            android:src="@drawable/booklist_menu_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center_horizontal"
            android:textColor="#000"
            android:layout_weight="0.8"
            android:text="Fragment"
            android:textSize="17dp" />

        <ImageView
            android:id="@+id/iv_right"
             android:clickable="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_weight="0.1"
            android:src="@drawable/back_normal" />
    </LinearLayout>

    <ListView
        android:id="@android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </ListView>

</LinearLayout>

⑥、左侧边栏的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
            public void onClick(View v) {
                FragmentTransaction ft = getActivity()
                        .getSupportFragmentManager().beginTransaction();
                ft.replace(R.id.center_frame, new SampleListFragment());
                ft.commit();
                ((MainActivity) getActivity()).showLeft();
            }
        });
        return view;
    }

    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }

}

其对应的布局文件代码如下：left_fragment.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mlist"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/mainPage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/oper_title2"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="主页"
            android:textColor="#000"
            android:textSize="17dip" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:background="@drawable/booklist_menu_bg_unit2"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/userLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"
            android:clickable="true"
            android:orientation="vertical"
            android:padding="5dip" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:src="@drawable/booklist_menu_user" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="用户"
                android:textColor="#000" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"
            android:clickable="true"
            android:orientation="vertical"
            android:padding="5dip" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:src="@drawable/booklist_menu_synchronize" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="收藏"
                android:textColor="#000" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"
            android:clickable="true"
            android:orientation="vertical"
            android:padding="5dip" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:src="@drawable/booklist_menu_std" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="标准"
                android:textColor="#000" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"
            android:clickable="true"
            android:orientation="vertical"
            android:padding="5dip" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:src="@drawable/booklist_menu_help" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="帮助"
                android:textColor="#000" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"
            android:clickable="true"
            android:orientation="vertical"
            android:padding="5dip" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:src="@drawable/booklist_menu_about" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="关于"
                android:textColor="#000" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

⑦、右侧边栏的View用RightFragment替代，RightFragment代码如下：

package net.loonggg.fragment;

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

public class RightFragment extends Fragment {

    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.right_fragment, null);
        return view;
    }

    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

    }
}

其对应的布局文件代码如下：right_fragment.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/oper_title"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="服   务"
            android:textColor="#000"
            android:textSize="17dip" />
    </LinearLayout>

    <ScrollView
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:background="@drawable/booklist_menu_bg_unit" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:padding="5dip" >

            <LinearLayout
                android:id="@+id/llr_energy_management"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:clickable="true"
                android:onClick="llronclick" >

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.1"
                    android:src="@drawable/lxqg" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.8"
                    android:text="能源管理"
                    android:textColor="#000" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.1"
                    android:gravity="center"
                    android:src="@drawable/arrow_to_right" />
            </LinearLayout>

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:src="@drawable/line_read_option" />

            <LinearLayout
                android:id="@+id/llr_hr_management"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:clickable="true"
                android:onClick="llronclick" >

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.1"
                    android:src="@drawable/lxqg" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.8"
                    android:text="人力管理"
                    android:textColor="#000" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.1"
                    android:gravity="center"
                    android:src="@drawable/arrow_to_right" />
            </LinearLayout>

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:src="@drawable/line_read_option" />

            <LinearLayout
                android:id="@+id/llr_business_management"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:clickable="true"
                android:onClick="llronclick" >

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.1"
                    android:src="@drawable/lxqg" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.8"
                    android:text="商务管理"
                    android:textColor="#000" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.1"
                    android:gravity="center"
                    android:src="@drawable/arrow_to_right" />
            </LinearLayout>

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:src="@drawable/line_read_option" />

            <LinearLayout
                android:id="@+id/llr_financial_management"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:clickable="true"
                android:onClick="llronclick" >

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.1"
                    android:src="@drawable/lxqg" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.8"
                    android:text="金融管理"
                    android:textColor="#000" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.1"
                    android:gravity="center"
                    android:src="@drawable/arrow_to_right" />
            </LinearLayout>

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:src="@drawable/line_read_option" />

            <LinearLayout
                android:id="@+id/llr_purchasing_management"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:clickable="true"
                android:onClick="llronclick" >

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.1"
                    android:src="@drawable/lxqg" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.8"
                    android:text="采购管理"
                    android:textColor="#000" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.1"
                    android:gravity="center"
                    android:src="@drawable/arrow_to_right" />
            </LinearLayout>

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:src="@drawable/line_read_option" />

            <LinearLayout
                android:id="@+id/llr_supply_management"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:clickable="true"
                android:onClick="llronclick" >

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.1"
                    android:src="@drawable/lxqg" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.8"
                    android:text="供应管理"
                    android:textColor="#000" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.1"
                    android:gravity="center"
                    android:src="@drawable/arrow_to_right" />
            </LinearLayout>

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:src="@drawable/line_read_option" />

            <LinearLayout
                android:id="@+id/llr_project_management"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:clickable="true"
                android:onClick="llronclick" >

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.1"
                    android:src="@drawable/lxqg" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.8"
                    android:text="项目管理"
                    android:textColor="#000" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="0.1"
                    android:gravity="center"
                    android:src="@drawable/arrow_to_right" />
            </LinearLayout>

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:src="@drawable/line_read_option" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="说明我是宽度自适应的..." />
        </LinearLayout>
    </ScrollView>

</LinearLayout>

⑧、在左侧边栏中有一个点击事件，点击用户，进入用户界面，这里的用户界面也是一个Fragment，点击事件的具体代码在⑥中已经有了，现在我把用户界面的Fragment代码贴出来：UserFragment.java:

package net.loonggg.fragment;

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

public class UserFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.user, null);
        ImageView left = (ImageView) view.findViewById(R.id.iv_user_left);
        left.setOnClickListener(new View.OnClickListener() {

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

    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

    }
}

其对应的布局代码如下:user.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/banner_unit"
        android:padding="7dip" >

        <ImageView
            android:id="@+id/iv_user_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.1"
            android:clickable="true"
            android:src="@drawable/booklist_menu_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="0.8"
            android:gravity="center_horizontal"
            android:text="Fragment"
            android:textColor="#000"
            android:textSize="17dp" />

        <ImageView
            android:id="@+id/iv_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_weight="0.1"
            android:clickable="true"
            android:src="@drawable/back_normal" />
    </LinearLayout>

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="用户管理"
        android:textColor="#000000"
        android:textSize="24sp" />

</LinearLayout>

⑨、其他不重要的代码如下：

DetailsActivity.java：

package net.loonggg.fragment;

import android.app.Activity;
import android.os.Bundle;

public class DetailsActivity extends Activity {

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.details);

    }
}

其对应的布局文件代码如下：details.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#fff"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="fitXY"
        android:src="@drawable/p1" />

</LinearLayout>

还有就是string.xml的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">碎片化侧边栏</string>
    <string name="action_settings">Settings</string>
    <string name="title1">这种导弹的平均航速为5倍音速</string>
    <string name="title2">这种导弹的平均航速为5倍音速</string>
    <string name="title3">这种导弹的平均航速为5倍音速</string>
    <string name="title4">这种导弹的平均航速为5倍音速</string>
    <string name="title5">这种导弹的平均航速为5倍音速</string>
    <string name="title6">这种导弹的平均航速为5倍音速</string>
    <string name="title7">这种导弹的平均航速为5倍音速</string>
    <string name="test">美国《空军》杂志、西班牙《世界报》等媒体报道，美军计划在今年内多次试射高超音速导弹，从而将其作为威慑中俄的强力武器。有外媒指出，解放军已开发出可拦截高速导弹的防控系统，而且有潜力进一步开发拦截高超音速导弹的防空武器。


美 国《空军》杂志报道，美军将在2013年继续试射高超音速巡航导弹，这种导弹的平均航速为5倍音速，最高瞬时航速达到7倍音速。对于目前全球所有的防卫系 统来说，它都是无法防御的导弹。美国《防务新闻》更是声称，美军的“高超音速攻击时代”即将来临，目前各国军队尚无能力对这种高速攻击目标进行有效拦截， 任何导弹防御系统在它面前都形同虚设。

西班牙《世界报》报道，从2013年3月到12月，美军可能进行3次重要的实验，如果一切顺利，美军可能于2014年尝试装备少量的高超音速导弹，这种导弹有望在未来5年内形成战斗力。

报道认为，美军高超音速导弹所形成的威胁以及对世界格局的影响难以估量。美国可能在一些“敏感区域”部署这种导弹，例如东亚地区，而朝鲜和伊朗的核设施也可能成为它的攻击目标。报道强调，美军高超音速导弹的主要作用是对其他军事大国实施威慑，主要是中国和俄罗斯。

据 俄罗斯《军工信使》周刊指出，解放军在防范超音速导弹攻击方面“已经追赶上来”，中国某国防工业公开发的代号为LD-2000的陆基防空系统，已经被证实 具备实战能力。这种防空系统可为高价值目标，包括指挥所、弹道导弹发射装置等提供保护。LD-2000防空系统发射的导弹拦截高速飞行的导弹和飞机，尤其 擅长对付雷达反射面积较小的隐身巡航导弹及高速巡航导弹。报道揣测，它可以准确拦截飞行速度超过两倍音速的超音速导弹。通过改进其控制软件，该系统还可用 来拦截高速火箭弹和迫击炮弹。

报道称，LD-2000系统可加装在军用卡车底盘上，从而实现机动部署，在需要它的地方构建防范超音速导弹的密集导弹阵。这种导弹集群的火力可与美军著名的“密集阵”(专门防御来袭空中目标的防空导弹集群)媲美。

报道称，LD-2000是一款针对出口市场的产品，解放军肯定同步开发了自用型号，而且其性能必然优于LD-2000，应该可以防范速度更快的来袭目标，例如航速达到三四倍音速的巡航导弹。报道认为，这表明解放军有能力开发用来对付美军高超音速导弹的防御系统。</string>

</resources>

到这里就基本完成了。可能你现在没有看懂，我把源码放出来，供大家参考。源代码下载地址如下： 源代码