Android侧滑菜单完整详细示例(改进版)
浏览数：35 /
时间：2015年06月11日
MainActivity如下:
main.xml如下:
package cc.cd;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.Toast;
import android.app.Activity;
import android.content.Context;
/**
* Demo描述:
* 将Patience5中使用的侧滑菜单封装为一个自定义控件从而便于复用
*
* 该示例在Patience5的不同之处:
* 1 Patience5中采用的是LinearLayout布局,而该自定义控件继承自RelativeLayout
* 2 在Patience5中是不断改变menuView的leftMargin而在此处是不断改变contentView的
* rightMargin.这一点在阅读代码时要注意.
*
* 参考资料:
* http://blog.csdn.net/guolin_blog/article/details/8744400
* Thank you very much
*/
public class MainActivity extends Activity {
private Context mContext;
private ListView mContentListView;
private Button mContentMenuButton;
private SlidingMenuRelativeLayout mSlidingMenuRelativeLayout;
private String [] listViewItems=new String [20];
private ArrayAdapter<String> mArrayAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
init();
}
private void init(){
mContext=this;
mContentListView=(ListView) findViewById(R.id.contentListView);
mContentMenuButton=(Button) findViewById(R.id.contentMenuButton);
mContentMenuButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
boolean isMenuVisible=mSlidingMenuRelativeLayout.isMenuVisible();
if (isMenuVisible) {
mSlidingMenuRelativeLayout.scrollToContent();
} else {
mSlidingMenuRelativeLayout.scrollToMenu();
}
}
});
mSlidingMenuRelativeLayout=(SlidingMenuRelativeLayout) findViewById(R.id.slidingMenuRelativeLayout);
//滑动事件绑定在contentListView上
mSlidingMenuRelativeLayout.setBindView(mContentListView);
initListViewData();
mArrayAdapter=new ArrayAdapter<String>(mContext, android.R.layout.simple_list_item_1, listViewItems);
mContentListView.setAdapter(mArrayAdapter);
mContentListView.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3) {
String item = listViewItems[position];
Toast.makeText(mContext, item, Toast.LENGTH_SHORT).show();
}
});
}
private void initListViewData(){
String temp=null;
for (int i = 0; i < 20; i++) {
temp="This is "+i;
listViewItems[i]=temp;
}
}
}
SlidingMenuRelativeLayout如下:
package cc.cd;
import android.content.Context;
import android.os.AsyncTask;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.Toast;
/**
* 示例说明:
* 1 该自定义控件继承自RelativeLayout
* 2 在布局文件中有两部分menuView和contentView.因为是RelativeLayout布局
* 所以这两者是重叠的.
* 3 通过不断改变contentView的rightMargin值来显示和隐藏menuView
* 4 请注意在xml布局文件中设置了contentView对齐方式为layout_alignParentRight
* 设置了menuView对齐方式为 android:layout_alignParentLeft.
* 所以注意代码:
* //设置contentView的最小和最大rightMargin值
* contentParamsMinRightMargin=-mMenuLayoutParams.width;
* contentParamsMaxRightMargin=0;
* 这个还是挺巧妙的.因为contentView是相对于父控件右对齐的.所以在原始状态下
* 他的rightMargin的值为0.当手指按在contentView上滑向屏幕的右侧时可以不断减小
* 它的rightMargin,从而导致contentView移向屏幕的右侧本来被其遮盖的menuView
* 也就随之显现.
* 所以contentView的最大rightMargin值=0,这个也就是我们进入App后看到的:
* 显示了contentView,遮盖了menuView.它的rightMargin=0;与父控件右侧对齐.
* 当contentView移向屏幕的右边时,它的rightMargin在逐渐减小直到rightMargin
* 的绝对值对于menuView的宽度.
*
*
* 代码细节:
* 1 mMenuLayoutParams和mContentLayoutParams都是
* MarginLayoutParams类型的,因为menuView和conentView的父控件
* 是自定义的SlidingMenuRelativeLayout,而不是常用的系统XXXLayout
* 2 在手指在ListView上滑动然后抬起,有时会出现ListView的item被按下且一直没有
* 弹起的情况.造成该现象的原因暂时不明,但可用unFocusBindView()方法使得
* ListView失去焦点.该方法在示例中两次被调用.可以将其注释后观察效果.
* 关于这点,在代码中仍然存在小bug.需以后继续优化.
*/
public class SlidingMenuRelativeLayout extends RelativeLayout {
private int screenWidth;
private View contentView;
private View menuView;
private View mBindView;
private float xDown;
private float xMove;
private float xUp;
private float yDown;
private float yMove;
private float yUp;
private Button mButton;
private Context mContext;
// 当前是否在滑动
private boolean isSliding;
// 在被判定为滚动之前用户手指可移动的最大值
private int scaledTouchSlop;
// menu是否可见的标志位,该值在滑动过程中无效.
// 只有在滑动结束后,完全显示或隐藏menu时才会更改此值
private boolean isMenuVisible = false;
private int contentParamsMaxRightMargin = 0;
private int contentParamsMinRightMargin = 0;
// 速度追踪
private VelocityTracker mVelocityTracker;
// 阈值
public static final int VELOCITY_THRESHOLD = 200;
// TAG
private final static String TAG = "SlidingMenuRelativeLayout";
// menu的布局LayoutParams
private MarginLayoutParams mMenuLayoutParams;
// content的布局LayoutParams
private MarginLayoutParams mContentLayoutParams;
public SlidingMenuRelativeLayout(Context context) {
super(context);
}
public SlidingMenuRelativeLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public SlidingMenuRelativeLayout(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
if (changed) {
// 初始化contentView
contentView = getChildAt(1);
mContentLayoutParams = (MarginLayoutParams) contentView.getLayoutParams();
// 将contentView的宽度设置为屏幕的宽度
mContentLayoutParams.width = screenWidth;
contentView.setLayoutParams(mContentLayoutParams);
// 初始化menuView
menuView = getChildAt(0);
mMenuLayoutParams = (MarginLayoutParams) menuView.getLayoutParams();
// 设置contentView的最小和最大rightMargin值.
contentParamsMinRightMargin = -mMenuLayoutParams.width;
contentParamsMaxRightMargin = 0;
mButton = (Button) menuView.findViewById(R.id.menuButton);
mButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(mContext, "Hello", Toast.LENGTH_SHORT).show();
}
});
}
}
private void init(Context context) {
mContext = context;
// 获取屏幕宽度
WindowManager windowManager = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
screenWidth = windowManager.getDefaultDisplay().getWidth();
// 获取ScaledTouchSlop
scaledTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
}
/**
* 注册处理Touch事件的View 在改示例中处理了ListView的Touch来显示和隐藏menuView的.
* 在实际开发中可以依据需求设置其他为其他控件
*/
public void setBindView(View bindView) {
mBindView = bindView;
mBindView.setOnTouchListener(new TouchListenerImpl());
}
// 使BindView失去焦点
public void unFocusBindView() {
if (mBindView != null) {
mBindView.setPressed(false);
mBindView.setFocusable(false);
mBindView.setFocusableInTouchMode(false);
}
}
private class TouchListenerImpl implements OnTouchListener {
@Override
public boolean onTouch(View v, MotionEvent event) {
// 开始速度追踪
startVelocityTracker(event);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
xDown = event.getRawX();
yDown = event.getRawY();
break;
case MotionEvent.ACTION_MOVE:
xMove = event.getRawX();
yMove = event.getRawY();
int distanceX = (int) (xMove - xDown);
int distanceY = (int) (yMove - yDown);
// 手指滑向屏幕右侧,distanceX为正数
if (!isMenuVisible&& distanceX >= scaledTouchSlop
&& (isSliding || Math.abs(distanceY) <= scaledTouchSlop)) {
isSliding = true;
mContentLayoutParams.rightMargin = -distanceX;
// 处理越界的情况
if (mContentLayoutParams.rightMargin < contentParamsMinRightMargin) {
mContentLayoutParams.rightMargin = contentParamsMinRightMargin;
}
// 设置contentView的LayoutParams
contentView.setLayoutParams(mContentLayoutParams);
}
// 手指滑向屏幕左侧,distanceX为负数
if (isMenuVisible && -distanceX >= scaledTouchSlop) {
isSliding = true;
mContentLayoutParams.rightMargin = contentParamsMinRightMargin - distanceX;
// 处理越界的情况
if (mContentLayoutParams.rightMargin > contentParamsMaxRightMargin) {
mContentLayoutParams.rightMargin = contentParamsMaxRightMargin;
}
// 设置contentView的LayoutParams
contentView.setLayoutParams(mContentLayoutParams);
}
break;
case MotionEvent.ACTION_UP:
xUp = event.getRawX();
int upDistanceX = (int) (xUp - xDown);
if (isSliding) {
// 判断手势意图想显示menu
if (wantToShowMenu()) {
// 判断是否显示menu
if (shouldScrollToMenu()) {
scrollToMenu();
} else {
scrollToContent();
}
}
// 判断手势意图想显示content
if (wantToShowContent()) {
// 判断是否显示content
if (shouldScrollToContent()) {
scrollToContent();
} else {
scrollToMenu();
}
}
} else {
// 当完全显示菜单界面时,点击仅能看到的contentView可将其完全显示
if (upDistanceX < scaledTouchSlop && isMenuVisible) {
scrollToContent();
}
}
// 终止速度追踪
stopVelocityTracker();
break;
default:
break;
}
/**
* 在处理完DOWN,MOVE,UP后进行该if...else判断.
* 1 如果不是在滑动状态,则返回false.否则ListView无法滑动且其Item无法点击.
* 2 若在滑动,则让ListView失去焦点.
*/
if (!isSliding) {
return false;
} else {
unFocusBindView();
}
return true;
}
}
/**
* 判断当前手势是否想显示菜单Menu
* 判断条件:
* 1 抬起坐标大于按下坐标
* 2 menu本身不可见
*/
private boolean wantToShowMenu() {
return ((xUp - xDown > 0) && (!isMenuVisible));
}
/**
* 判断是否应该将menu完整显示出来
* 判断条件: 滑动距离大于菜单的二分之一
* 或者滑动速度大于速度阈值VELOCITY_THRESHOLD
*/
private boolean shouldScrollToMenu() {
return ((xUp - xDown > mMenuLayoutParams.width / 2) || (getScrollVelocity() > VELOCITY_THRESHOLD));
}
/**
* 将屏幕滚动到menu.即将menu完整显示.
*/
public void scrollToMenu() {
new ScrollAsyncTask().execute(-30);
}
/**
* 判断当前手势是否想显示菜单Content
* 判断条件:
* 1 抬起坐标小于按下坐标
* 2 menu本身可见
*/
private boolean wantToShowContent() {
return ((xUp - xDown < 0) && (isMenuVisible));
}
/**
* 判断是否应该将content完整显示出来
* 判断条件: 滑动距离大于菜单的二分之一
* 或者滑动速度大于速度阈值VELOCITY_THRESHOLD
*/
private boolean shouldScrollToContent() {
return ((xDown - xUp > mMenuLayoutParams.width / 2) || (getScrollVelocity() > VELOCITY_THRESHOLD));
}
/**
* 将屏幕滚动到content.即将content完整显示
*/
public void scrollToContent() {
new ScrollAsyncTask().execute(30);
}
public boolean isMenuVisible() {
return isMenuVisible;
}
/**
* 开始速度追踪
*/
private void startVelocityTracker(MotionEvent event) {
if (mVelocityTracker == null) {
mVelocityTracker = VelocityTracker.obtain();
}
mVelocityTracker.addMovement(event);
}
/**
* 获取在content上X方向的手指滑动速度
*/
private int getScrollVelocity() {
// 设置VelocityTracker单位.1000表示1秒时间内运动的像素
mVelocityTracker.computeCurrentVelocity(1000);
// 获取在1秒内X方向所滑动像素值
int xVelocity = (int) mVelocityTracker.getXVelocity();
return Math.abs(xVelocity);
}
/**
* 终止速度追踪
*/
private void stopVelocityTracker() {
if (mVelocityTracker != null) {
mVelocityTracker.recycle();
mVelocityTracker = null;
}
}
/**
* 利用异步任务不断修改contentView的LayoutParams中的rightMargin从而达到 contentView视图移动的效果
*/
private class ScrollAsyncTask extends AsyncTask<Integer, Integer, Integer> {
@Override
protected Integer doInBackground(Integer... speed) {
int contentLayoutParamsRightMargin = mContentLayoutParams.rightMargin;
while (true) {
// 每次变化的speed
contentLayoutParamsRightMargin = contentLayoutParamsRightMargin + speed[0];
// 若越界,则处理越界且跳出循环
if (contentLayoutParamsRightMargin > contentParamsMaxRightMargin) {
contentLayoutParamsRightMargin = contentParamsMaxRightMargin;
break;
}
// 若越界,则处理越界且跳出循环
if (contentLayoutParamsRightMargin < contentParamsMinRightMargin) {
contentLayoutParamsRightMargin = contentParamsMinRightMargin;
break;
}
// 通知进度更新
publishProgress(contentLayoutParamsRightMargin);
// 线程睡眠15毫秒,便于体现滚动效果
try {
Thread.sleep(15);
} catch (Exception e) {
}
}
// 依据滑动的速度设置标志位isMenuVisible
if (speed[0] > 0) {
isMenuVisible = false;
} else {
isMenuVisible = true;
}
isSliding = false;
return contentLayoutParamsRightMargin;
}
@Override
protected void onProgressUpdate(Integer... rightMargin) {
super.onProgressUpdate(rightMargin);
mContentLayoutParams.rightMargin = rightMargin[0];
contentView.setLayoutParams(mContentLayoutParams);
unFocusBindView();
}
@Override
protected void onPostExecute(Integer rightMargin) {
super.onPostExecute(rightMargin);
mContentLayoutParams.rightMargin = rightMargin;
contentView.setLayoutParams(mContentLayoutParams);
}
}
}main.xml如下:
<cc.cd.SlidingMenuRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/slidingMenuRelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="@+id/menuRelativeLayout"
android:layout_width="270dip"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:background="#00ccff">
<TextView
android:id="@+id/menuTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="This is Menu"
android:textColor="#000000"
android:textSize="25sp" />
<Button
android:id="@+id/menuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Click here"
android:textColor="#000000"
android:textSize="25sp"
/>
</RelativeLayout>
<LinearLayout
android:id="@+id/contentLinearLayout"
android:layout_width="320dip"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:background="#e9e9e9"
android:orientation="vertical" >
<Button
android:id="@+id/contentMenuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu" />
<ListView
android:id="@+id/contentListView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:cacheColorHint="#00000000" />
</LinearLayout>
</cc.cd.SlidingMenuRelativeLayout>郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
