android 滑动菜单SlidingMenu的实现

2024年 4月
一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

github上类似项目

https://github.com/jfeinstein10/SlidingMenu

https://github.com/yueyueniao2012/SlidingMenu

转自： http://blog.csdn.net/jj120522/article/details/8075249

首先我们看下面视图：

这种效果大家都不陌生，网上好多都说是仿人人网的，估计人家牛逼出来的早吧，我也参考了一一些例子，实现起来有三种方法，我下面简单介绍下：

方法一：其实就是对GestureDetector手势的应用及布局文件的设计 .

布局文件main.xml 采用RelativeLayout布局.

<?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"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/layout_right"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginLeft="50dp"
        android:orientation="vertical" >

        <AbsoluteLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@color/grey21"
            android:padding="10dp" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="设置"
                android:textColor="@android:color/background_light"
                android:textSize="20sp" />
        </AbsoluteLayout>

        <ListView
            android:id="@+id/lv_set"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1" >
        </ListView>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout_left"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        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="wrap_content"
                android:layout_alignParentRight="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:id="@+id/iv_set"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:scaleType="fitXY"
            android:src="@drawable/bg_guide_5" />
    </LinearLayout>

</RelativeLayout>

layout_right ：这个大布局文件， layout_left:距离左边50dp像素.(我们要移动的是 layout_left ).

看到这个图我想大家都很清晰了吧，其实: 我们就是把layout_left这个布局控件整理向左移动，至于移动多少，就要看layout_right有多宽了。layout_left移动到距离左边的边距就是layout_right的宽及-MAX_WIDTH.相信大家都理解.

布局文件就介绍到这里，下面看代码.

/***
   * 初始化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);
    lv_set.setAdapter(new ArrayAdapter<String>(this, R.layout.item,
        R.id.tv_item, title));
    lv_set.setOnItemClickListener(new OnItemClickListener() {

      @Override
      public void onItemClick(AdapterView<?> parent, View view,
          int position, long id) {
        Toast.makeText(MainActivity.this, title[position], 1).show();
      }
    });
    layout_left.setOnTouchListener(this);
    iv_set.setOnTouchListener(this);
    mGestureDetector = new GestureDetector(this);
    // 禁用长按监听
    mGestureDetector.setIsLongpressEnabled(false);
    getMAX_WIDTH();
  }

这里要对手势进行监听，我想大家都知道怎么做，在这里我要说明一个方法：

/***
   * 获取移动距离 移动的距离其实就是layout_left的宽度
   */
  void getMAX_WIDTH() {
    ViewTreeObserver viewTreeObserver = layout_left.getViewTreeObserver();
    // 获取控件宽度
    viewTreeObserver.addOnPreDrawListener(new OnPreDrawListener() {
      @Override
      public boolean onPreDraw() {
        if (!hasMeasured) {
          window_width = getWindowManager().getDefaultDisplay()
              .getWidth();
          RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) layout_left
              .getLayoutParams();
          layoutParams.width = window_width;
          layout_left.setLayoutParams(layoutParams);
          MAX_WIDTH = layout_right.getWidth();
          Log.v(TAG, "MAX_WIDTH=" + MAX_WIDTH + "width="
              + window_width);
          hasMeasured = true;
        }
        return true;
      }
    });

  }

在这里我们要获取屏幕的宽度，并将屏幕宽度设置给layout_left这个控件，为什么要这么做呢，因为如果不把该控件宽度写死的话，那么系统将认为layout_left会根据不同环境宽度自动适应，也就是说我们通过layout_left.getLayoutParams动态移动该控件的时候，该控件会伸缩而不是移动。描述的有点模糊，大家请看下面示意图就明白了.

我们不为 layout_left定义死宽度效果：

getLayoutParams可以很清楚看到， layout_left被向左拉伸了，并不是我们要的效果.

还有一种解决办法就是我们在配置文件中直接把 layout_left宽度写死，不过这样不利于开发，因为分辨率的问题.因此就用 ViewTreeObserver进行对 layout_left设置宽度.

ViewTreeObserver,这个类主要用于对布局文件的监听.强烈建议同学们参考这篇文章 android ViewTreeObserver详细讲解，相信让你对ViewTreeObserver有更一步的了解.其他的就是对 GestureDetector手势的应用，下面我把代码贴出来：

package com.jj.slidingmenu;

import android.app.Activity;
import android.os.AsyncTask;
import android.os.Bundle;
import android.util.Log;
import android.view.GestureDetector;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;
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;
import android.widget.LinearLayout.LayoutParams;

/***
 * 滑动菜单
 * 
 * @author jjhappyforever...
 * 
 */
public class MainActivity extends Activity implements OnTouchListener,
    GestureDetector.OnGestureListener {
  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 GestureDetector mGestureDetector;// 手势
  private boolean isScrolling = false;
  private float mScrollX; // 滑块滑动距离
  private int window_width;// 屏幕的宽度

  private String TAG = "jj";

  private String title[] = { "待发送队列", "同步分享设置", "编辑我的资料", "找朋友", "告诉朋友",
      "节省流量", "推送设置", "版本更新", "意见反馈", "积分兑换", "精品应用", "常见问题", "退出当前帐号" };

  /***
   * 初始化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);
    lv_set.setAdapter(new ArrayAdapter<String>(this, R.layout.item,
        R.id.tv_item, title));
    lv_set.setOnItemClickListener(new OnItemClickListener() {

      @Override
      public void onItemClick(AdapterView<?> parent, View view,
          int position, long id) {
        Toast.makeText(MainActivity.this, title[position], 1).show();
      }
    });
    layout_left.setOnTouchListener(this);
    iv_set.setOnTouchListener(this);
    mGestureDetector = new GestureDetector(this);
    // 禁用长按监听
    mGestureDetector.setIsLongpressEnabled(false);
    getMAX_WIDTH();
  }

  /***
   * 获取移动距离 移动的距离其实就是layout_left的宽度
   */
  void getMAX_WIDTH() {
    ViewTreeObserver viewTreeObserver = layout_left.getViewTreeObserver();
    // 获取控件宽度
    viewTreeObserver.addOnPreDrawListener(new OnPreDrawListener() {
      @Override
      public boolean onPreDraw() {
        if (!hasMeasured) {
          window_width = getWindowManager().getDefaultDisplay()
              .getWidth();
          RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) layout_left
              .getLayoutParams();
          // layoutParams.width = window_width;
          layout_left.setLayoutParams(layoutParams);
          MAX_WIDTH = layout_right.getWidth();
          Log.v(TAG, "MAX_WIDTH=" + MAX_WIDTH + "width="
              + window_width);
          hasMeasured = true;
        }
        return true;
      }
    });

  }

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

  }

  // 返回键
  @Override
  public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (KeyEvent.KEYCODE_BACK == keyCode && event.getRepeatCount() == 0) {
      RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) layout_left
          .getLayoutParams();
      if (layoutParams.leftMargin < 0) {
        new AsynMove().execute(SPEED);
        return false;
      }
    }

    return super.onKeyDown(keyCode, event);
  }

  @Override
  public boolean onTouch(View v, MotionEvent event) {
    // 松开的时候要判断，如果不到半屏幕位子则缩回去，
    if (MotionEvent.ACTION_UP == event.getAction() && isScrolling == true) {
      RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) layout_left
          .getLayoutParams();
      // 缩回去
      if (layoutParams.leftMargin < -window_width / 2) {
        new AsynMove().execute(-SPEED);
      } else {
        new AsynMove().execute(SPEED);
      }
    }

    return mGestureDetector.onTouchEvent(event);
  }

  @Override
  public boolean onDown(MotionEvent e) {
    mScrollX = 0;
    isScrolling = false;
    // 将之改为true，不然事件不会向下传递.
    return true;
  }

  @Override
  public void onShowPress(MotionEvent e) {

  }

  /***
   * 点击松开执行
   */
  @Override
  public boolean onSingleTapUp(MotionEvent e) {
    RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) layout_left
        .getLayoutParams();
    // 左移动
    if (layoutParams.leftMargin >= 0) {
      new AsynMove().execute(-SPEED);
    } else {
      // 右移动
      new AsynMove().execute(SPEED);
    }

    return true;
  }

  /***
   * e1 是起点，e2是终点，如果distanceX=e1.x-e2.x>0说明向左滑动。反之亦如此.
   */
  @Override
  public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
      float distanceY) {
    isScrolling = true;
    mScrollX += distanceX;// distanceX:向左为正，右为负
    RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) layout_left
        .getLayoutParams();
    layoutParams.leftMargin -= mScrollX;
    if (layoutParams.leftMargin >= 0) {
      isScrolling = false;// 拖过头了不需要再执行AsynMove了
      layoutParams.leftMargin = 0;

    } else if (layoutParams.leftMargin <= -MAX_WIDTH) {
      // 拖过头了不需要再执行AsynMove了
      isScrolling = false;
      layoutParams.leftMargin = -MAX_WIDTH;
    }
    layout_left.setLayoutParams(layoutParams);
    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(Math.abs(params[0]));
        } catch (InterruptedException e) {
          e.printStackTrace();
        }
      }

      return null;
    }

    /**
     * update UI
     */
    @Override
    protected void onProgressUpdate(Integer... values) {
      RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) layout_left
          .getLayoutParams();
      // 右移动
      if (values[0] > 0) {
        layoutParams.leftMargin = Math.min(layoutParams.leftMargin
            + values[0], 0);
        Log.v(TAG, "移动右" + layoutParams.rightMargin);
      } else {
        // 左移动
        layoutParams.leftMargin = Math.max(layoutParams.leftMargin
            + values[0], -MAX_WIDTH);
        Log.v(TAG, "移动左" + layoutParams.rightMargin);
      }
      layout_left.setLayoutParams(layoutParams);

    }

  }

}

上面代码注释已经很明确，相信大家都看的明白，我就不过多解释了。效果图：截屏出来有点卡，不过在手机虚拟机上是不卡的.

源码下载

怎么样，看着还行吧，我们在看下面一个示例：

简单说明一下，当你滑动的时候左边会跟着右边一起滑动，这个效果比上面那个酷吧，上面那个有点死板，其实实现起来也比较容易，只需要把我们上面那个稍微修改下，对layout_right也进行时时更新，这样就实现了这个效果了，如果上面那个理解了，这个很轻松就解决了，在这里我又遇到一个问题：此时的listview的item监听不到手势，意思就是我左右滑动listview他没有进行滑动。

本人对touch众多事件监听拦截等熟悉度不够，因此这里我用到自己写的方法，也许比较麻烦，如果有更好的解决办法，请大家一定要分享哦，再次 thanks for you 了.

具体解决办法：我们重写listview,对此listview进行手势监听，我们自定义一个接口来实现，具体代码如下：

package com.jj.slidingmenu;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.GestureDetector.OnGestureListener;
import android.view.View;
import android.widget.ListView;
import android.widget.Toast;

public class MyListView extends ListView implements OnGestureListener {

  private GestureDetector gd;
  // 事件状态
  public static final char FLING_CLICK = 0;
  public static final char FLING_LEFT = 1;
  public static final char FLING_RIGHT = 2;
  public static char flingState = FLING_CLICK;

  private float distanceX;// 水平滑动的距离

  private MyListViewFling myListViewFling;

  public static boolean isClick = false;// 是否可以点击

  public void setMyListViewFling(MyListViewFling myListViewFling) {
    this.myListViewFling = myListViewFling;
  }

  public float getDistanceX() {
    return distanceX;
  }

  public char getFlingState() {
    return flingState;
  }

  private Context context;

  public MyListView(Context context) {
    super(context);

  }

  public MyListView(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context = context;
    gd = new GestureDetector(this);
  }

  /**
   * 覆写此方法，以解决ListView滑动被屏蔽问题
   */
  @Override
  public boolean dispatchTouchEvent(MotionEvent event) {
    myListViewFling.doFlingOver(event);// 回调执行完毕.
    this.gd.onTouchEvent(event);

    return super.dispatchTouchEvent(event);
  }

  @Override
  public boolean onTouchEvent(MotionEvent ev) {
    /***
     * 当移动的时候
     */
    if (ev.getAction() == MotionEvent.ACTION_DOWN)
      isClick = true;
    if (ev.getAction() == MotionEvent.ACTION_MOVE)
      isClick = false;
    return super.onTouchEvent(ev);
  }

  @Override
  public boolean onDown(MotionEvent e) {
    int position = pointToPosition((int) e.getX(), (int) e.getY());
    if (position != ListView.INVALID_POSITION) {
      View child = getChildAt(position - getFirstVisiblePosition());
    }
    return true;
  }

  @Override
  public void onShowPress(MotionEvent e) {

  }

  @Override
  public boolean onSingleTapUp(MotionEvent e) {

    return false;
  }

  @Override
  public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
      float distanceY) {
    // 左滑动
    if (distanceX > 0) {
      flingState = FLING_RIGHT;
      Log.v("jj", "左distanceX=" + distanceX);
      myListViewFling.doFlingLeft(distanceX);// 回调
      // 右滑动.
    } else if (distanceX < 0) {
      flingState = FLING_LEFT;
      Log.v("jj", "右distanceX=" + distanceX);
      myListViewFling.doFlingRight(distanceX);// 回调
    }

    return false;
  }

  /***
   * 上下文菜单
   */
  @Override
  public void onLongPress(MotionEvent e) {
    // System.out.println("Listview long press");
    // int position = pointToPosition((int) e.getX(), (int) e.getY());
    // if (position != ListView.INVALID_POSITION) {
    // View child = getChildAt(position - getFirstVisiblePosition());
    // if (child != null) {
    // showContextMenuForChild(child);
    // this.requestFocusFromTouch();
    // }
    //
    // }
  }

  @Override
  public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
      float velocityY) {

    return false;
  }

  /***
   * 回调接口
   * 
   * @author jjhappyforever...
   * 
   */
  interface MyListViewFling {
    void doFlingLeft(float distanceX);// 左滑动执行

    void doFlingRight(float distanceX);// 右滑动执行

    void doFlingOver(MotionEvent event);// 拖拽松开时执行

  }

}

而在MainActivity.java里面实现该接口,我这么一说，我想有的同学们都明白了，具体实现起来代码有点多，我把代码上传到网上，大家可以下载后用心看，我想大家都能够明白的.（在这里我鄙视一下自己，肯定通过对手势监听拦截实现对listview的左右滑动，但是自己学业不经，再次再说一下，如有好的解决方案，请一定要分享我一下哦.）

另外有一个问题：当listivew超出一屏的时候，此时的listview滑动的时候可以上下左右一起滑动,在此没有解决这个问题，如有解决请分享我哦.

效果图：

源码下载

由于篇符较长，先说到这里，其实android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu也可以实现.具体参考下一篇文章：

先写到这里，有不足的地方请指出，

如果对您有帮助的话请记得赞一个哦. thanks for you。

近期文章

分类目录

微信支付宝

微信公众号

赏杯咖啡

Android · 2015年3月3日 0

android 滑动菜单SlidingMenu的实现

Share this:

您可能还喜欢...

发表回复取消回复

Android · 2015年3月3日 0

Share this:

您可能还喜欢...

谷歌公司发布程序员养成指南，推荐相关在线课程

Universal-Image-Loader，android-Volley，Picasso、Fresco和Glide五大Android开源组件加载网络图片的优缺点比较

vm虚拟机 配置静态ip地址（centos）

发表回复 取消回复

vm虚拟机配置静态ip地址（centos）

发表回复取消回复