Android之侧滑菜单，即右边菜单

侧滑菜单有很多，比较有名有：SlidingMenu.，其实我们有时侯仅仅需要一个功能点：侧滑。
LeftSliderLayout的出现就是解决了这个问题。它很简单只有一个java源文件，使用起来也很方便。有很多应用都在使用它。

它实现的原理很简单：在一个FrameLayout下有二个子布局，一个是菜单，另一个是LeftSliderLayout。当向右拖动LeftSliderLayout时，就显示露出菜单布局。而向左拖动LeftSliderLayout时，就覆盖菜单布局。
它的使用也简单：创建一个FrameLayout，在FrameLayout添加二个布局：菜单布局和LeftSliderLayout。其中，菜单布局的宽度要与LeftSliderLayout的SLIDING_WIDTH保持一致。而LeftSliderLayout下面可以放二个子布局：第一个是阴影布局（左边阴影），第二个是要拖动的内容。
LeftSliderLayout有一个Listener。它有二个函数，一个是LeftSliderLayout的打开与关闭的状态改变；另一个是InterceptTouchEvent的回调，主要解决的是在拖动内容中有要处理左右滑动的控件与LeftSliderLayout的左右滑动的事件有冲突，当它返回true时，LeftSliderLayout会处理左右滑动，当它返回false时，就不处理左右滑动的事件。



实现代码如下：

（1）main_layout_above.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:orientation="vertical"
android:background="@android:color/white" >

<Button
android:id="@+id/main_btn_enable"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="enableSlider"
android:onClick="onClick"/>

<Button
android:id="@+id/main_btn_disable"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="disableSlider"
android:onClick="onClick"/>

<Button
android:id="@+id/main_btn_open"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="openSlider"
android:onClick="onClick"/>

<Button
android:id="@+id/main_btn_close"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="closeSlider"
android:onClick="onClick"/>

<HorizontalScrollView
android:id="@+id/main_horizontal_scroll_view"
android:layout_width="fill_parent"
android:layout_height="240dp"
android:scrollbars="none"
android:paddingTop="3.0dip"
android:paddingBottom="3.0dip"
android:fadingEdge="none"
android:background="#ff808080">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="horizontal" >

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:contentDescription="@null"
android:src="@drawable/main_image_1" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:contentDescription="@null"
android:src="@drawable/main_image_2" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:contentDescription="@null"
android:src="@drawable/main_image_3" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:contentDescription="@null"
android:src="@drawable/main_image_4" />

</LinearLayout>

</HorizontalScrollView>

</LinearLayout>

（2）main_layout_below.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="260dp"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="@android:color/darker_gray" >

<Button
android:id="@+id/main_btn_below"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="btnBelow"
android:onClick="onClick" />

</RelativeLayout>

（3）main.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/main_layout_above" />

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

(4)LeftSliderLayout.java

package com.zhaoxufeng.leftsliderlayout.lib;

import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
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 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 = 260.0f;
private int mSlidingWidth;

/**
* The default values of shadow.
* VELOCITY_UNITS in dp
* mVelocityUnits in px
*/
private static final float DEF_SHADOW_WIDTH = 30.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()) {
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;
}

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() {
if (mEnableSlide) {
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锛宖alse-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鈥檚 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);
}
}

(5)MainActivity.java

package com.zhaoxufeng.leftsliderlayout.example;

import com.zhaoxufeng.leftsliderlayout.R;
import com.zhaoxufeng.leftsliderlayout.lib.LeftSliderLayout;
import com.zhaoxufeng.leftsliderlayout.lib.LeftSliderLayout.OnLeftSliderLayoutStateListener;

import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Toast;
import android.app.Activity;

public class MainActivity extends Activity implements OnLeftSliderLayoutStateListener, OnClickListener {

//https://github.com/xMobile/LeftSliderLayout

LeftSliderLayout leftSliderLayout;
View horizontalScrollView;

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

horizontalScrollView = (View) findViewById(R.id.main_horizontal_scroll_view);
leftSliderLayout = (LeftSliderLayout) findViewById(R.id.main_slider_layout);
leftSliderLayout.setOnLeftSliderLayoutListener(this);
}

@Override
public void OnLeftSliderLayoutStateChanged(boolean bIsOpen) {
if (bIsOpen) {
Toast.makeText(this, "LeftSliderLayout is open!", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(this, "LeftSliderLayout is close!", Toast.LENGTH_SHORT).show();
}

}

@Override
public boolean OnLeftSliderLayoutInterceptTouch(MotionEvent ev) {
if (isViewTouched(horizontalScrollView, ev.getRawX(), ev.getRawY())) {
return false;
}
return true;
}

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.main_btn_enable: {
leftSliderLayout.enableSlide(true);
break;
}

case R.id.main_btn_disable: {
leftSliderLayout.enableSlide(false);
break;
}

case R.id.main_btn_open: {
leftSliderLayout.open();
break;
}

case R.id.main_btn_close: {
leftSliderLayout.close();
break;
}

case R.id.main_btn_below: {
Toast.makeText(this, "btnBelow is clicked!", Toast.LENGTH_SHORT).show();
break;
}

default:
break;
}
}

private boolean isViewTouched(View view, float fX, float fY) {
int location[] = new int[2];
view.getLocationOnScreen(location);

int nStartY = location[1];
int nEndY = location[1] + view.getHeight();

int nStartX = location[0];
int nEndX = location[0] + view.getWidth();

if ((fY >= nStartY && fY < nEndY) && (fX > nStartX && fX < nEndX)) {
return true;
}

return false;
}

}

通过研读以上代码，对于侧边滑动的宽度可以进行调节，

可以调节 SLIDING_WIDTH 值调节滑动菜单的宽度

同时可以调节xml文件的宽度对下面的界面进行调节。
LeftSliderLayout源代码在GitHub地址：https://github.com/xMobile/LeftSliderLayout