Android学习之SlidingMenu实现
SlidingMenu现在貌似成为了应用程序的标配了。越来越多的软件均使用了SlidingMenu，如人人(下图)：
对于这个功能已经有开源项目实现了，其代码在github有，网址为https://github.com/jfeinstein10/SlidingMenu，我也下下来并按官方教程实验了一番，但总有错，没办法只好转战其他方法。
当然，首先是去网上扫荡一下，这里拜读了一篇博文，android 滑动菜单SlidingMenu的实现，它是向右滑动，而我则在其基础上修改了部分代码实现了向左滑动，具体效果如下：
 |
 |
| 未滑动或点击设置按钮 | 向右滑动或点击设置按钮 |
1 布局
主体界面的布局：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="@+id/layout_left"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="200dp"
android:orientation="vertical" >
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="@color/grey21"
android:padding="10dp" >
<TextView
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="设置"
android:textColor="@android:color/background_light"
android:textSize="20sp" />
</AbsoluteLayout>
<com.example.slidemenutest.MyLinearLayout
android:id="@+id/mylaout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<ListView
android:id="@+id/lv_set"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</ListView>
</com.example.slidemenutest.MyLinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/layout_right"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:background="@color/white"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/nav_bg" >
<ImageView
android:id="@+id/iv_set"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="@drawable/nav_setting" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="我的地盘"
android:textColor="@android:color/background_light"
android:textSize="20sp" />
</RelativeLayout>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="@drawable/bg_guide_5" />
</LinearLayout>
</RelativeLayout>主界面包含左右两个Layout，左边的初始时将会隐藏，只有向右滑动或点击设置按钮才会显现，当其显现时向左滑动或点击设置按钮，它将会再次隐藏。
其中android:layout_marginRight="200dp"表示左边的layout最终将会距离右边200dp（移动的是右边的layout）,这个可以根据应用的最终显示效果来自定义。
左边的Layout仅包含一个TextView和一个ListView，ListView的每一项的布局很简单，只有一个TextView，如果你想弄的丰富些，只需自定义布局即可。item.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" >
<TextView
android:id="@+id/tv_item"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textColor="@color/black"
android:textSize="20sp" />
</LinearLayout>
package com.example.slidemenutest;
import android.content.Context;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.view.GestureDetector.SimpleOnGestureListener;
import android.widget.LinearLayout;
/***
* 自定义布局文件
*/
public class MyLinearLayout extends LinearLayout {
private GestureDetector mGestureDetector;
View.OnTouchListener mGestureListener;
private boolean isLock = false;// 左右移动锁.
public OnScrollListener onScrollListener;// 自定义滑动接口
private boolean b;// 拦截touch标识
public MyLinearLayout(Context context) {
super(context);
}
public void setOnScrollListener(OnScrollListener onScrollListener) {
this.onScrollListener = onScrollListener;
}
public MyLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
mGestureDetector = new GestureDetector(new MySimpleGesture());
}
/***
* 事件分发
*/
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
b = mGestureDetector.onTouchEvent(ev);// 获取手势返回值.
/***
* 松开时记得处理缩回...
*/
if (ev.getAction() == MotionEvent.ACTION_UP) {
onScrollListener.doLoosen();
}
return super.dispatchTouchEvent(ev);
}
/***
* 事件拦截处理
* 要明白机制，如果返回ture的话，那就是进行拦截，处理自己的ontouch. 返回false的话，那么就会向下传递...
*/
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
super.onInterceptTouchEvent(ev);
return b;
}
/***
* 事件处理
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
isLock = false;
return super.onTouchEvent(event);
}
/***
* 自定义手势执行
*/
class MySimpleGesture extends SimpleOnGestureListener {
@Override
public boolean onDown(MotionEvent e) {
isLock = true;
return super.onDown(e);
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2,
float distanceX, float distanceY) {
if (!isLock)
onScrollListener.doScroll(distanceX);
// 垂直大于水平
if (Math.abs(distanceY) > Math.abs(distanceX)) {
return false;
} else {
return true;
}
}
}
/***
* 自定义接口 实现滑动
*
*/
public interface OnScrollListener {
void doScroll(float distanceX);// 滑动...
void doLoosen();// 手指松开后执行...
}
}
2 具体实现
具体的实现代码如下：
package com.example.slidemenutest;
import com.example.slidemenutest.MyLinearLayout.OnScrollListener;
import android.os.Bundle;
import android.app.Activity;
import android.os.AsyncTask;
import android.util.Log;
import android.view.GestureDetector;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.view.ViewTreeObserver.OnPreDrawListener;
import android.view.Window;
import android.view.View.OnTouchListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.Toast;
public class MainActivity extends Activity implements OnTouchListener,
GestureDetector.OnGestureListener, OnItemClickListener {
private boolean hasMeasured = false;// 是否Measured.
private LinearLayout layout_left;// 左边布局
private LinearLayout layout_right;// 右边布局
private ImageView iv_set;// 图片
private ListView lv_set;// 设置菜单
/** 每次自动展开/收缩的范围 */
private int MAX_WIDTH = 0;
/** 每次自动展开/收缩的速度 */
private final static int SPEED = 30;
private final static int sleep_time = 5;
private GestureDetector mGestureDetector;// 手势
private boolean isScrolling = false;
private float mScrollX = 0; // 滑块滑动距离
private int window_width;// 屏幕的宽度
private String TAG = "CJL";
private View view = null;// 点击的view
private String title[] = { "用户", "同步", "标准", "帮助", "关于"};
private MyLinearLayout mylayout;
/***
* 初始化view
*/
void InitView() {
layout_left = (LinearLayout) findViewById(R.id.layout_left);
layout_right = (LinearLayout) findViewById(R.id.layout_right);
iv_set = (ImageView) findViewById(R.id.iv_set);
lv_set = (ListView) findViewById(R.id.lv_set);
mylayout = (MyLinearLayout) findViewById(R.id.mylaout);
lv_set.setAdapter(new ArrayAdapter<String>(this, R.layout.item,
R.id.tv_item, title));
/***
* 实现该接口
*/
mylayout.setOnScrollListener(new OnScrollListener() {
@Override
public void doScroll(float distanceX) {
doScrolling(distanceX);
}
@Override
public void doLoosen() {
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) layout_right
.getLayoutParams();
Log.e(TAG, "layoutParams.rightMargin="
+ layoutParams.rightMargin);
// 缩回去
if (layoutParams.rightMargin < -window_width / 2) {
new AsynMove().execute(-SPEED);
} else {
new AsynMove().execute(SPEED);
}
}
});
// 点击监听
lv_set.setOnItemClickListener(this);
layout_right.setOnTouchListener(this);
layout_left.setOnTouchListener(this);
iv_set.setOnTouchListener(this);
mGestureDetector = new GestureDetector(this);
// 禁用长按监听
mGestureDetector.setIsLongpressEnabled(false);
getMAX_WIDTH();
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
InitView();
}
/***
* listview 正在滑动时执行.
*/
void doScrolling(float distanceX) {
isScrolling = true;
mScrollX += distanceX;// distanceX:向左为正，右为负
RelativeLayout.LayoutParams layoutParams_left = (RelativeLayout.LayoutParams) layout_left
.getLayoutParams();
RelativeLayout.LayoutParams layoutParams_right = (RelativeLayout.LayoutParams) layout_right
.getLayoutParams();
layoutParams_right.rightMargin += mScrollX;
layoutParams_left.rightMargin = window_width
+ layoutParams_right.rightMargin;
if (layoutParams_right.rightMargin >= 0) {
isScrolling = false;// 拖过头了不需要再执行AsynMove了
layoutParams_right.rightMargin = 0;
layoutParams_left.rightMargin = window_width;
} else if (layoutParams_right.rightMargin <= -MAX_WIDTH) {
// 拖过头了不需要再执行AsynMove了
isScrolling = false;
layoutParams_left.rightMargin = window_width - MAX_WIDTH;
layoutParams_right.rightMargin = -MAX_WIDTH;
}
layout_left.setLayoutParams(layoutParams_left);
layout_right.setLayoutParams(layoutParams_right);
}
/***
* 获取移动距离
*/
void getMAX_WIDTH() {
ViewTreeObserver viewTreeObserver = layout_right.getViewTreeObserver();
// 获取控件宽度
viewTreeObserver.addOnPreDrawListener(new OnPreDrawListener() {
@Override
public boolean onPreDraw() {
if (!hasMeasured) {
window_width = getWindowManager().getDefaultDisplay()
.getWidth();
MAX_WIDTH = layout_left.getWidth();
RelativeLayout.LayoutParams layoutParams_left = (RelativeLayout.LayoutParams) layout_left
.getLayoutParams();
RelativeLayout.LayoutParams layoutParams_right = (RelativeLayout.LayoutParams) layout_right
.getLayoutParams();
ViewGroup.LayoutParams layoutParams_mylayout = mylayout
.getLayoutParams();
// 设置layout_left的初始位置.
layoutParams_left.rightMargin = window_width;
layout_left.setLayoutParams(layoutParams_left);
// 注意：设置lv_set的宽度防止被在移动的时候控件被挤压
layoutParams_mylayout.width = MAX_WIDTH;
mylayout.setLayoutParams(layoutParams_mylayout);
// 注意： 设置layout_right的宽度。防止被在移动的时候控件被挤压
layoutParams_right.width = window_width;
layout_right.setLayoutParams(layoutParams_right);
Log.v(TAG, "MAX_WIDTH=" + MAX_WIDTH + "width="
+ window_width);
hasMeasured = true;
}
return true;
}
});
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {
RelativeLayout.LayoutParams layoutParams_right = (RelativeLayout.LayoutParams) layout_right
.getLayoutParams();
if (layoutParams_right.rightMargin < 0) {
new AsynMove().execute(-SPEED);
return false;
}
}
return super.onKeyDown(keyCode, event);
}
@Override
public boolean onTouch(View v, MotionEvent event) {
view = v;// 记录点击的控件
// 松开的时候要判断，如果不到半屏幕位子则缩回去，
if (MotionEvent.ACTION_UP == event.getAction() && isScrolling == true) {
RelativeLayout.LayoutParams layoutParams_left = (RelativeLayout.LayoutParams) layout_left
.getLayoutParams();
// 缩回去
if (layoutParams_left.rightMargin > window_width - MAX_WIDTH / 2) {
new AsynMove().execute(-SPEED);
} else {
new AsynMove().execute(SPEED);
}
}
return mGestureDetector.onTouchEvent(event);
}
@Override
public boolean onDown(MotionEvent e) {
int position = lv_set.pointToPosition((int) e.getX(), (int) e.getY());
if (position != ListView.INVALID_POSITION) {
View child = lv_set.getChildAt(position
- lv_set.getFirstVisiblePosition());
if (child != null)
child.setPressed(true);
}
mScrollX = 0;
isScrolling = false;
// 将之改为true，才会传递给onSingleTapUp,不然事件不会向下传递.
return true;
}
@Override
public void onShowPress(MotionEvent e) {
}
/***
* 点击松开执行
*/
@Override
public boolean onSingleTapUp(MotionEvent e) {
// 点击的不是layout_left
if (view != null && view == iv_set) {
RelativeLayout.LayoutParams layoutParams_right = (RelativeLayout.LayoutParams) layout_right
.getLayoutParams();
// 右移动
if (layoutParams_right.rightMargin >= 0) {
new AsynMove().execute(SPEED);
lv_set.setSelection(0);// 设置为首位.
} else {
// 左移动
new AsynMove().execute(-SPEED);
}
} else if (view != null && view == layout_right) {
RelativeLayout.LayoutParams layoutParams_right = (android.widget.RelativeLayout.LayoutParams) layout_right
.getLayoutParams();
if (layoutParams_right.rightMargin < 0) {
// 说明layout_left处于移动最左端状态，这个时候如果点击layout_left应该直接所以原有状态.(更人性化)
// 左移动
new AsynMove().execute(-SPEED);
}
}
return true;
}
/***
* 滑动监听 就是一个点移动到另外一个点. distanceX=后面点x-前面点x，如果大于0，说明后面点在前面点的右边及向右滑动
*/
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
float distanceY) {
// 执行滑动.
doScrolling(distanceX);
return false;
}
@Override
public void onLongPress(MotionEvent e) {
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
return false;
}
class AsynMove extends AsyncTask<Integer, Integer, Void> {
@Override
protected Void doInBackground(Integer... params) {
int times = 0;
if (MAX_WIDTH % Math.abs(params[0]) == 0)// 整除
times = MAX_WIDTH / Math.abs(params[0]);
else
times = MAX_WIDTH / Math.abs(params[0]) + 1;// 有余数
for (int i = 0; i < times; i++) {
publishProgress(params[0]);
try {
Thread.sleep(sleep_time);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
return null;
}
/**
* update UI
*/
@Override
protected void onProgressUpdate(Integer... values) {
RelativeLayout.LayoutParams layoutParams_left = (RelativeLayout.LayoutParams) layout_left
.getLayoutParams();
RelativeLayout.LayoutParams layoutParams_right = (RelativeLayout.LayoutParams) layout_right
.getLayoutParams();
if (values[0] < 0) {
// 左移动
layoutParams_left.rightMargin = Math
.min(layoutParams_left.rightMargin - values[0],
window_width);
layoutParams_right.rightMargin = Math.min(
layoutParams_right.rightMargin - values[0], 0);
} else {
// 右移动
layoutParams_left.rightMargin = Math.max(
layoutParams_left.rightMargin - values[0], window_width
- MAX_WIDTH);
layoutParams_right.rightMargin = Math.max(
layoutParams_right.rightMargin - values[0], -MAX_WIDTH);
System.out.println("left=" + layoutParams_left.rightMargin
+ "，right=" + layoutParams_right.rightMargin);
}
layout_left.setLayoutParams(layoutParams_left);
layout_right.setLayoutParams(layoutParams_right);
}
}
@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
RelativeLayout.LayoutParams layoutParams_right = (RelativeLayout.LayoutParams) layout_right
.getLayoutParams();
// 只要没有滑动则都属于点击
if (layoutParams_right.rightMargin == -MAX_WIDTH)
Toast.makeText(MainActivity.this, title[position], 1).show();
}
}
在研究具体的代码中，其实从向左滑动变为向右滑动还是需要费点事的，你需要理解其具体的内容。
因为本例为向右滑动，所以参照均用的是.rightMargin，layout_right向右滑动时，其右边距屏幕右边为负值且值在减小且最多移动了200dp；layout_right向左滑动时，其右边距屏幕右边为负值且值在增大并到0截止；layout_left的右边离屏幕右边的初始边距为屏幕宽度，右滑动时，其右边距屏幕右边为正值且值在减小并减小到我们设定的200dp；向左滑动时，layout_left右边距屏幕右边为正值且值在增大且最大增加到屏幕宽度；
函数InitView() 是用来初始化屏幕的，并调用了getMAX_WIDTH()方法。
class AsynMove主要是实现了点击设置按钮需要进行的各项操作。