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>

对于左边的listView所处的LinearLayout使用了自定义的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());}/*** * 事件分发 */@Overridepublic boolean dispatchTouchEvent(MotionEvent ev) {b = mGestureDetector.onTouchEvent(ev);// 获取手势返回值./*** * 松开时记得处理缩回... */if (ev.getAction() == MotionEvent.ACTION_UP) {onScrollListener.doLoosen();}return super.dispatchTouchEvent(ev);}/*** * 事件拦截处理 * 要明白机制，如果返回ture的话，那就是进行拦截，处理自己的ontouch. 返回false的话，那么就会向下传递... */@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {super.onInterceptTouchEvent(ev);return b;}/*** * 事件处理 */@Overridepublic boolean onTouchEvent(MotionEvent event) {isLock = false;return super.onTouchEvent(event);}/*** * 自定义手势执行 */class MySimpleGesture extends SimpleOnGestureListener {@Overridepublic boolean onDown(MotionEvent e) {isLock = true;return super.onDown(e);}@Overridepublic 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;// 点击的viewprivate 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() {@Overridepublic void doScroll(float distanceX) {doScrolling(distanceX);}@Overridepublic 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();}@Overridepublic 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() {@Overridepublic 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;}});}@Overridepublic 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);}@Overridepublic 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);}@Overridepublic 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;}@Overridepublic void onShowPress(MotionEvent e) {}/*** * 点击松开执行 */@Overridepublic boolean onSingleTapUp(MotionEvent e) {// 点击的不是layout_leftif (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，说明后面点在前面点的右边及向右滑动 */@Overridepublic boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,float distanceY) {// 执行滑动.doScrolling(distanceX);return false;}@Overridepublic void onLongPress(MotionEvent e) {}@Overridepublic boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) {return false;}class AsynMove extends AsyncTask<Integer, Integer, Void> {@Overrideprotected Void doInBackground(Integer... params) {int times = 0;if (MAX_WIDTH % Math.abs(params[0]) == 0)// 整除times = MAX_WIDTH / Math.abs(params[0]);elsetimes = 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 */@Overrideprotected 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);}}@Overridepublic 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主要是实现了点击设置按钮需要进行的各项操作。