Android高手进阶篇4-实现侧滑菜单框架，一分钟集成到项目中

先来看下面的这张效果图：

上面这张效果图是百度影音的，现在在Android上很流行，最初是由facebook自己实现的，而后各大应用有跟风之势，那么这种侧滑效果是如何实现的呢？

网上现在这种侧滑菜单的例子很对，也有开源的框架sliderMenu，而且可以定义很多样式，但大部分例子，都只是实现了这种类似效果，没有实现一种可移植的框架，仅仅是单页面效果而已，而且集成起来复杂，鉴于此，我自己实现了一套侧滑菜单的框架：

1、最常用的支持左右策划

2、多个页面切换也好不费力，页面切换的逻辑已经实现好了，集成进来，只需要关注自己项目的业务逻辑

3、支持多个页面集成

4、支持退出业务逻辑

先上我自己实现的效果图：

下面 说一下实现原理：

布局文件采用FrameLayout, 在一个FrameLayout下有二个子布局，一个是菜单，另一个是LeftSliderLayout，而LeftSliderLayout下面可以放二个子布局：第一个是阴影布局（左边阴影），第二个是要拖动的内容。，当向右拖动LeftSliderLayout时，就显示露出菜单布局。而向左拖动LeftSliderLayout时，就覆盖菜单布局。

1.FrameLayout的布局文件local_media_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <include android:id="@+id/main_layout_below" layout="@layout/main_layout_below" />

    <com.zhaoxufeng.leftsliderlayout.lib.LeftSliderLayout
        android:id="@+id/main_slider_layout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <!-- Shadow Child -->
        <ImageView
                android:layout_width="15px"
                android:layout_height="fill_parent"
                android:contentDescription="@null"
                android:scaleType="fitXY"
                android:src="@drawable/main_side_shadow" />

        <!-- Main Child -->
        <include android:id="@+id/main_slider_main" layout="@layout/local_media" />

    </com.zhaoxufeng.leftsliderlayout.lib.LeftSliderLayout>

</FrameLayout>

上面 xml 中main_layout_below是对应的左边菜单Menu布局文件（这个布局文件是固定的）,local_media是你要的拖动布局

2、LeftSliderLayout.java代码

package com.zhaoxufeng.leftsliderlayout.lib;

import android.content.Context;
import android.graphics.Rect;
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.Scroller;

public class LeftSliderLayout extends ViewGroup {

    private static final String TAG = "LeftSliderLayout"  ;

    private Scroller mScroller;
    private VelocityTracker mVelocityTracker;

    /**
     * Constant value for touch state
     * TOUCH_STATE_REST : no touch
     * TOUCH_STATE_SCROLLING : scrolling
     */
    private static final int TOUCH_STATE_REST = 0;
    private static final int TOUCH_STATE_SCROLLING = 1;
    private int mTouchState = TOUCH_STATE_REST;

    /**
     * Distance in pixels a touch can wander before we think the user is scrolling
     */
    private int mTouchSlop;

    /**
     * Values for saving axis of the last touch event.
     */
    private float mLastMotionX;
    private float mLastMotionY;

    /**
     * Values for VelocityTracker to compute current velocity.
     * VELOCITY_UNITS in dp
     * mVelocityUnits in px
     */
    private static final int VELOCITY_UNITS = 1000;
    private int mVelocityUnits;	

    /**
     * The minimum velocity for determining the direction.
     * MINOR_VELOCITY in dp
     * mMinorVelocity in px
     */
    private static final float MINOR_VELOCITY = 150.0f;
    private int mMinorVelocity;								

    /**
     * The width of Sliding distance from left.
     * And it should be the same with the width of the View below SliderLayout in a FrameLayout.
     * DOCK_WIDTH in dp
     * mDockWidth in px
     */
    private static final float SLIDING_WIDTH = 270.0f;
    private int mSlidingWidth;									

    /**
     * The default values of shadow.
     * VELOCITY_UNITS in dp
     * mVelocityUnits in px
     */
    private static final float DEF_SHADOW_WIDTH = 10.0f;
    private int mDefShadowWidth;								

    /**
     * Value for checking a touch event is completed.
     */
    private boolean mIsTouchEventDone = false;				

    /**
     * Value for checking slider is open.
     */
    private boolean mIsOpen = false;						

    /**
     * Value for saving the last offset of scroller ’ x-axis.
     */
    private int mSaveScrollX = 0;							

    /**
     * Value for checking slider is allowed to slide.
     */
    private boolean mEnableSlide = true;					

    private View mMainChild = null;
    private OnLeftSliderLayoutStateListener mListener = null;

	/**
	 * Instantiates a new LeftSliderLayout.
	 *
	 * @param context the associated Context
	 * @param attrs AttributeSet
	 */
    public LeftSliderLayout(Context context, AttributeSet attrs) {
    	this(context, attrs, 0);
    }

	/**
	 * Instantiates a new LeftSliderLayout.
	 *
	 * @param context the associated Context
	 * @param attrs AttributeSet
	 * @param defStyle Style
	 */
    public LeftSliderLayout(Context context, AttributeSet attrs, int defStyle) {
    	super(context, attrs, defStyle);
        mScroller = new Scroller(context);
        mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();

        /**
         * Convert values in dp to values in px;
         */
        final float fDensity = getResources().getDisplayMetrics().density;
        mVelocityUnits = (int) (VELOCITY_UNITS * fDensity + 0.5f);
        mMinorVelocity = (int) (MINOR_VELOCITY * fDensity + 0.5f);
        mSlidingWidth = (int) (SLIDING_WIDTH * fDensity + 0.5f);
        mDefShadowWidth = (int) (DEF_SHADOW_WIDTH * fDensity + 0.5f);
    }

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

    	// check Measure Mode is Exactly.
    	final int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        if (widthMode != MeasureSpec.EXACTLY) {
            throw new IllegalStateException("LeftSliderLayout only canmCurScreen run at EXACTLY mode!");
        }
        final int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        if (heightMode != MeasureSpec.EXACTLY) {
        	throw new IllegalStateException("LeftSliderLayout only can run at EXACTLY mode!");
        }

        // measure child views
        int nCount = getChildCount();
        for (int i = 2; i < nCount; i++) {
        	removeViewAt(i);
        }
        nCount = getChildCount();
        if (nCount > 0) {
        	if (nCount > 1) {
        		mMainChild = getChildAt(1);
        		getChildAt(0).measure(widthMeasureSpec, heightMeasureSpec);
			} else {
				mMainChild = getChildAt(0);
			}
        	mMainChild.measure(widthMeasureSpec, heightMeasureSpec);
		}

        // Set the scrolled position
        scrollTo(mSaveScrollX, 0);
    }

	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		final int nCount = getChildCount();
		if (nCount <= 0) {
			return;
		}

		// Set the size and position of Main Child
		if (mMainChild != null) {
			mMainChild.layout(
				l,
				t,
				l + mMainChild.getMeasuredWidth(),
				t + mMainChild.getMeasuredHeight());
		}

		// Set the size and position of Shadow Child
		if (nCount > 1) {
			int nLeftChildWidth = 0;
			View leftChild = getChildAt(0);
			ViewGroup.LayoutParams layoutParams = leftChild.getLayoutParams();
			if (layoutParams.width == ViewGroup.LayoutParams.FILL_PARENT
					|| layoutParams.width == ViewGroup.LayoutParams.MATCH_PARENT) {
				nLeftChildWidth = mDefShadowWidth;
			} else {
				nLeftChildWidth = layoutParams.width;
			}
			leftChild.layout(
					l - nLeftChildWidth,
					t,
					l,
					t + leftChild.getMeasuredHeight());
		}
	}

    @Override
	public void computeScroll() {
		if (mScroller.computeScrollOffset()) {
            Log.d(TAG,"computeScroll exeuted:" + "x:" + mScroller.getCurrX() + "Y:" + mScroller.getCurrY())  ;
			scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
			postInvalidate();
		}
    }

    @Override
	public boolean onTouchEvent(MotionEvent event) { 

    	int nCurScrollX = getScrollX();

    	// check touch point is in the rectangle of Main Child
    	if (mMainChild != null
    			&& mTouchState != TOUCH_STATE_SCROLLING
    			&& mIsTouchEventDone) {
			Rect rect = new Rect();
			mMainChild.getHitRect(rect);
			if (!rect.contains((int)event.getX() + nCurScrollX, (int)event.getY())) {
				return false;
			}
		}

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

        mVelocityTracker.addMovement(event);

        final int action = event.getAction();
        final float x = event.getX();

        switch (action) {
        case MotionEvent.ACTION_DOWN: {
        	if (!mScroller.isFinished()) {
        		mScroller.abortAnimation();
        	}

        	mIsTouchEventDone = false;
            mLastMotionX = x;
            break;
        }

        case MotionEvent.ACTION_MOVE: {
        	// check slider is allowed to slide.
        	if (!mEnableSlide) {
				break;
			}

        	// compute the x-axis offset from last point to current point
            int deltaX = (int) (mLastMotionX - x);
            if (nCurScrollX + deltaX < getMinScrollX()) {
        		deltaX = getMinScrollX() - nCurScrollX;
        		mLastMotionX = mLastMotionX - deltaX;
			} else if (nCurScrollX + deltaX > getMaxScrollX()) {
        		deltaX = getMaxScrollX() - nCurScrollX;
        		mLastMotionX = mLastMotionX - deltaX;
			} else {
				mLastMotionX = x;
			}

            // Move view to the current point
        	if (deltaX != 0) {
        		scrollBy(deltaX, 0);
			}

        	// Save the scrolled position
        	mSaveScrollX = getScrollX();
        	break;
        }

        case MotionEvent.ACTION_CANCEL:
        case MotionEvent.ACTION_UP: {

        	// check slider is allowed to slide.
        	if (!mEnableSlide) {
				break;
			}

        	final VelocityTracker velocityTracker = mVelocityTracker;
        	velocityTracker.computeCurrentVelocity(mVelocityUnits);

        	// Set open or close state, when get ACTION_UP or ACTION_CANCEL event.
        	if (nCurScrollX < 0) {
        		int velocityX = (int) velocityTracker.getXVelocity();
        		if (velocityX > mMinorVelocity) {
	            	scrollByWithAnim(getMinScrollX() - nCurScrollX);
	            	setState(true);
	            }
	            else if (velocityX < -mMinorVelocity) {
	            	scrollByWithAnim(-nCurScrollX);
	            	setState(false);
	            } else {
	            	if (nCurScrollX >= getMinScrollX() / 2) {
	            		scrollByWithAnim(- nCurScrollX);
						setState(false);
					} else {
						scrollByWithAnim(getMinScrollX() - nCurScrollX);
	            		setState(true);
					}
	            }
			} else {
				if (nCurScrollX > 0) {
					scrollByWithAnim(-nCurScrollX);
				}
				setState(false);
			}

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

            mTouchState = TOUCH_STATE_REST;
            mIsTouchEventDone = true;
            break;
        }

        }
        return true;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {

        final int action = ev.getAction();

		if (mListener != null && !mListener.OnLeftSliderLayoutInterceptTouch(ev)) {
			return false;
		}

        if ((action == MotionEvent.ACTION_MOVE)
      		  && (mTouchState != TOUCH_STATE_REST)) {
                 return true;
        }

        final float x = ev.getX();
        final float y = ev.getY();
        switch (action) {
        case MotionEvent.ACTION_DOWN:
                 mLastMotionX = x;
                 mLastMotionY = y;
                 mTouchState = mScroller.isFinished() ? TOUCH_STATE_REST : TOUCH_STATE_SCROLLING;
                 break;

        case MotionEvent.ACTION_MOVE:
                 final int xDiff = (int) Math.abs(mLastMotionX - x);
                 if (xDiff > mTouchSlop) {
                          if (Math.abs(mLastMotionY - y) / Math.abs(mLastMotionX - x) < 1)
                                   mTouchState = TOUCH_STATE_SCROLLING;
                }
                break;

        case MotionEvent.ACTION_CANCEL:
        case MotionEvent.ACTION_UP:
                 mTouchState = TOUCH_STATE_REST;
                 break;
        }
        return mTouchState != TOUCH_STATE_REST;
    }

    /**
     * With the horizontal scroll of the animation
     *
     * @param nDx x-axis offset
     */
    void scrollByWithAnim(int nDx) {
    	if (nDx == 0) {
			return;
		}

        Log.d(TAG,"scrollByWithAnim:" + "x:" + (getScrollX() + "Y:" + Math.abs(nDx)))  ;
		mScroller.startScroll(getScrollX(), 0, nDx, 0,
				Math.abs(nDx));

		invalidate();
    }

    /**
     * Get distance of the maximum horizontal scroll
     *
     * @return distance in px
     */
    private int getMaxScrollX() {
    	return 0;
    }

    /**
     * Get distance of the minimum horizontal scroll
     * @return distance in px
     */
    private int getMinScrollX() {
    	return -mSlidingWidth;
    }

    /**
     * Open LeftSlideLayout
     */
    public void open() {
        Log.d(TAG,"scroll by width:" + (getMinScrollX() - getScrollX()))  ;
    	if (mEnableSlide) {
            Log.d(TAG,"scroll by width:" + (getMinScrollX() - getScrollX()))  ;
            scrollByWithAnim(getMinScrollX() - getScrollX());
        	setState(true);
		}
    }

    /**
     * Close LeftSlideLayout
     */
    public void close() {
    	if (mEnableSlide) {
	    	scrollByWithAnim((-1) * getScrollX());
	    	setState(false);
    	}
    }

    /**
     * Determine whether LeftSlideLayout is open
     *
     * @return true-open，false-close
     */
    public boolean isOpen() {
    	return mIsOpen;
    }

    /**
     * Set state of LeftSliderLayout
     *
     * @param bIsOpen the new state
     */
    private void setState(boolean bIsOpen) {
    	boolean bStateChanged = false;
    	if (mIsOpen && !bIsOpen) {
			bStateChanged = true;
		} else if (!mIsOpen && bIsOpen) {
			bStateChanged = true;
		}

    	mIsOpen = bIsOpen;

    	if (bIsOpen) {
    		mSaveScrollX = getMaxScrollX();
		} else {
			mSaveScrollX = 0;
		}

    	if (bStateChanged && mListener != null) {
			mListener.OnLeftSliderLayoutStateChanged(bIsOpen);
		}
    }

    /**
     * enable slide action of LeftSliderLayout
     *
     * @param bEnable
     */
    public void enableSlide(boolean bEnable) {
		mEnableSlide = bEnable;
	}

    /**
     * Set listener to LeftSliderLayout
     */
    public void setOnLeftSliderLayoutListener(OnLeftSliderLayoutStateListener listener) {
    	mListener = listener;
    }

    /**
     * LeftSliderLayout Listener
     *
     */
    public interface OnLeftSliderLayoutStateListener { 

    	/**
    	 * Called when LeftSliderLayout’s state has been changed.
    	 *
    	 * @param bIsOpen the new state
    	 */
    	public void OnLeftSliderLayoutStateChanged(boolean bIsOpen);

    	/**
    	 * Called when LeftSliderLayout has got onInterceptTouchEvent.
    	 *
    	 * @param ev Touch Event
    	 * @return true - LeftSliderLayout need to manage the InterceptTouchEvent.
    	 *         false - LeftSliderLayout don't need to manage the InterceptTouchEvent.
    	 */
    	public boolean OnLeftSliderLayoutInterceptTouch(MotionEvent ev);
   }
}

LeftSliderLayout有一个Listener。它有二个函数，一个是LeftSliderLayout的打开与关闭的状态改变；另一个是InterceptTouchEvent的回调，主要解决的是在拖动内容中有要处理左右滑动的控件与LeftSliderLayout的左右滑动的事件有冲突，当它返回true时，LeftSliderLayout会处理左右滑动，当它返回false时，就不处理左右滑动的事件。

为了实现侧滑菜单框架，故实现了一个BaseActivity,其他Activity只需要继承这个Activity就行，

3、BaseActivity.java代码

package com.zhaoxufeng.leftsliderlayout.example;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.*;
import com.zhaoxufeng.leftsliderlayout.R;
import com.zhaoxufeng.leftsliderlayout.lib.LeftSliderLayout;

import java.util.ArrayList;
import java.util.List;

/**
 * 基类Activity,SliderMenu的基础统一框架
 * User: zhiwen.nan
 * Date: 13-10-7
 * Time: 下午8:31
 *
 */
public class BaseActivity extends Activity implements LeftSliderLayout.OnLeftSliderLayoutStateListener, View.OnClickListener {

    private  LeftSliderLayout leftSliderLayout;
    private ImageView mOpenButton;
    private TextView mTitleText;
    private ListView mListView;
    private List<ListItem> mDataList;
    private  long waitTime = 2000;
    private  long touchTime = 0;
    private static final  String TAG = "BaseActivity"  ;

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

    @Override
    protected void onResume() {
        super.onResume();
        bindView();
        initialDataList();
        ListViewAdapter listViewAdapter = new ListViewAdapter(BaseActivity.this,mDataList) ;
        mListView.setAdapter(listViewAdapter);
        mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                finish();
                switch (i)  {
                    case 0:
                        mTitleText.setText(getText(R.string.categ_local_video_list));
                        Intent intent = new Intent(BaseActivity.this,LocalMediaActivity.class)  ;
                        startActivity(intent);
                        break;
                    case 1:
                        mTitleText.setText(getText(R.string.cate_leida));
                        Intent radIntent = new Intent(BaseActivity.this,RadoActivity.class)  ;
                        startActivity(radIntent);
                        break;
                    case 2:
                        mTitleText.setText(getText(R.string.hot_viedo));
                        Intent hotIntent = new Intent(BaseActivity.this,HotMediaListActivity.class)  ;
                        startActivity(hotIntent);
                        break;
                    case 3:
                        mTitleText.setText(getText(R.string.cate_favrouite_list));
                        Intent collectIntent = new Intent(BaseActivity.this,CollectListActivity.class)  ;
                        startActivity(collectIntent);
                        break;
                    default:
                        leftSliderLayout.close();
                        break;

                }
            }
        });
    }

    @Override
    public void onClick(View view) {

    }

    @Override
    public void OnLeftSliderLayoutStateChanged(boolean bIsOpen) {

        if (bIsOpen) {
//            Toast.makeText(this, "LeftSliderLayout is open!", Toast.LENGTH_SHORT).show();
            Log.d(TAG," leftsilder is open")  ;
        } else {
           // Toast.makeText(this, "LeftSliderLayout is close!", Toast.LENGTH_SHORT).show();
            Log.d(TAG," leftsilder is close")  ;
        }

    }

    @Override
    public boolean OnLeftSliderLayoutInterceptTouch(MotionEvent ev) {

        return false;
    }

    private  void initialDataList(){
        mDataList = new ArrayList<ListItem>() ;
        for (int i = 0; i<= 3; i ++)       {
            ListItem listItem = new ListItem();
            listItem.setImageType(i);
            mDataList.add(listItem);

        }
    }

    private  void bindView(){
        leftSliderLayout = (LeftSliderLayout) findViewById(R.id.main_slider_layout);
        leftSliderLayout.setOnLeftSliderLayoutListener(this);
        mOpenButton = (ImageView)findViewById(R.id.openButton) ;
        mTitleText = (TextView)findViewById(R.id.titleText) ;
        mListView = (ListView)findViewById(R.id.listTab)  ;

        mOpenButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(leftSliderLayout.isOpen()) {
                    leftSliderLayout.close();
                } else {
                    leftSliderLayout.open();
                }

            }
        });

    }

    public  void openLeftSlider(boolean isToOpen){
        if(isToOpen)    {
            leftSliderLayout.open();
        }else {
            leftSliderLayout.close();
        }

    }

    public  void enableSlider(boolean isEnable)    {
         if(isEnable)  {
              leftSliderLayout.enableSlide(true);
         } else {
             leftSliderLayout.enableSlide(false);
         }
    }

    @Override
    public void onBackPressed() {
        if(!leftSliderLayout.isOpen())   {
            leftSliderLayout.open();
        } else {
            long currentTime = System.currentTimeMillis();
            if((currentTime-touchTime)>=waitTime) {
                Toast.makeText(this, "再按一次退出", Toast.LENGTH_SHORT).show();
                touchTime = currentTime;
            }else {
                finish();
                //todo
                //退出业务逻辑 ，根据项目需求来写
            }
        }

    }
}

关于左侧菜单的业务逻辑都在BaseActivity里处理，另外返回的逻辑也在里面处理，顶部统一的导航栏打开菜单栏业务逻辑，还有左侧菜单跳转的业务逻辑

4、LocalMediaActivity.java

package com.zhaoxufeng.leftsliderlayout.example;

import android.app.Activity;
import android.database.Cursor;
import android.os.Bundle;
import android.provider.Contacts;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.*;
import com.zhaoxufeng.leftsliderlayout.R;
import com.zhaoxufeng.leftsliderlayout.lib.LeftSliderLayout;
import com.zhaoxufeng.leftsliderlayout.lib.LeftSliderLayout.OnLeftSliderLayoutStateListener;

import java.util.ArrayList;
import java.util.List;

/**
 * @author zhiwen.nan
 * @since 1.0
 * 本地视频界面
 */
public class LocalMediaActivity extends BaseActivity {

    private ListView mListView;
    private TextView mTitleText;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.local_media_fragment);

        mListView = (ListView)findViewById(R.id.localVideoList) ;

        mTitleText = (TextView)findViewById(R.id.titleText)  ;
        mTitleText.setText("本地视频");

        Cursor cursor = getContentResolver().query(Contacts.People.CONTENT_URI, null, null, null, null);
        startManagingCursor(cursor);
        ListAdapter listAdapter = new SimpleCursorAdapter(this, android.R.layout.simple_expandable_list_item_1,
                cursor,new String[]{Contacts.People.NAME},new int[]{android.R.id.text1});
        mListView.setAdapter(listAdapter);

    }

    @Override
    public boolean OnLeftSliderLayoutInterceptTouch(MotionEvent ev) {

        return true;
    }

}

LocalMediaActivity是自己定义的Activty和业务逻辑界面，只需继承BaseActivity即可，其他Activity类似。

以上就是核心代码，源代码下载：

http://download.csdn.net/detail/nanzhiwen666/6394347