现在的位置: 首页 > 综合 > 正文

android 滑动菜单SlidingMenu的实现

2013年09月21日 ⁄ 综合 ⁄ 共 22674字 ⁄ 字号 评论关闭

zhuan zi :http://blog.csdn.net/jj120522/article/details/8075249

 

 

22313人阅读评论(151)收藏举报

首先我们看下面视图:

    

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

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

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

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     android:layout_width="fill_parent" 
  4.     android:layout_height="fill_parent" 
  5.     android:orientation="vertical"
  6.  
  7.     <LinearLayout 
  8.         android:id="@+id/layout_right" 
  9.         android:layout_width="fill_parent" 
  10.         android:layout_height="fill_parent" 
  11.         android:layout_marginLeft="50dp" 
  12.         android:orientation="vertical"
  13.  
  14.         <AbsoluteLayout 
  15.             android:layout_width="fill_parent" 
  16.             android:layout_height="wrap_content" 
  17.             android:background="@color/grey21" 
  18.             android:padding="10dp"
  19.  
  20.             <TextView 
  21.                 android:layout_width="wrap_content" 
  22.                 android:layout_height="wrap_content" 
  23.                 android:text="设置" 
  24.                 android:textColor="@android:color/background_light" 
  25.                 android:textSize="20sp" /> 
  26.         </AbsoluteLayout> 
  27.  
  28.         <ListView 
  29.             android:id="@+id/lv_set" 
  30.             android:layout_width="fill_parent" 
  31.             android:layout_height="fill_parent" 
  32.             android:layout_weight="1"
  33.         </ListView> 
  34.     </LinearLayout> 
  35.  
  36.     <LinearLayout 
  37.         android:id="@+id/layout_left" 
  38.         android:layout_width="fill_parent" 
  39.         android:layout_height="fill_parent" 
  40.         android:background="@color/white" 
  41.         android:orientation="vertical"
  42.  
  43.         <RelativeLayout 
  44.             android:layout_width="fill_parent" 
  45.             android:layout_height="wrap_content" 
  46.             android:background="@drawable/nav_bg"
  47.  
  48.             <ImageView 
  49.                 android:id="@+id/iv_set" 
  50.                 android:layout_width="wrap_content" 
  51.                 android:layout_height="wrap_content" 
  52.                 android:layout_alignParentRight="true" 
  53.                 android:layout_alignParentTop="true" 
  54.                 android:src="@drawable/nav_setting" /> 
  55.  
  56.             <TextView 
  57.                 android:layout_width="wrap_content" 
  58.                 android:layout_height="wrap_content" 
  59.                 android:layout_centerInParent="true" 
  60.                 android:text="我" 
  61.                 android:textColor="@android:color/background_light" 
  62.                 android:textSize="20sp" /> 
  63.         </RelativeLayout> 
  64.  
  65.         <ImageView 
  66.             android:id="@+id/iv_set" 
  67.             android:layout_width="fill_parent" 
  68.             android:layout_height="fill_parent" 
  69.             android:scaleType="fitXY" 
  70.             android:src="@drawable/bg_guide_5" /> 
  71.     </LinearLayout> 
  72.  
  73. </RelativeLayout> 

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

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

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

  1. /***
  2.      * 初始化view
  3.      */ 
  4.     void InitView() { 
  5.         layout_left = (LinearLayout) findViewById(R.id.layout_left); 
  6.         layout_right = (LinearLayout) findViewById(R.id.layout_right); 
  7.         iv_set = (ImageView) findViewById(R.id.iv_set); 
  8.         lv_set = (ListView) findViewById(R.id.lv_set); 
  9.         lv_set.setAdapter(new ArrayAdapter<String>(this, R.layout.item, 
  10.                 R.id.tv_item, title)); 
  11.         lv_set.setOnItemClickListener(new OnItemClickListener() { 
  12.  
  13.             @Override 
  14.             public void onItemClick(AdapterView<?> parent, View view, 
  15.                     int position,
    long id) { 
  16.                 Toast.makeText(MainActivity.this, title[position],
    1).show(); 
  17.             } 
  18.         }); 
  19.         layout_left.setOnTouchListener(this); 
  20.         iv_set.setOnTouchListener(this); 
  21.         mGestureDetector = new GestureDetector(this); 
  22.         // 禁用长按监听 
  23.         mGestureDetector.setIsLongpressEnabled(false); 
  24.         getMAX_WIDTH(); 
  25.     } 

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

  1. /***
  2.      * 获取移动距离 移动的距离其实就是layout_left的宽度
  3.      */ 
  4.     void getMAX_WIDTH() { 
  5.         ViewTreeObserver viewTreeObserver = layout_left.getViewTreeObserver(); 
  6.         // 获取控件宽度 
  7.         viewTreeObserver.addOnPreDrawListener(new OnPreDrawListener() { 
  8.             @Override 
  9.             public
    boolean onPreDraw() { 
  10.                 if (!hasMeasured) { 
  11.                     window_width = getWindowManager().getDefaultDisplay() 
  12.                             .getWidth(); 
  13.                     RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) layout_left 
  14.                             .getLayoutParams(); 
  15.                     layoutParams.width = window_width; 
  16.                     layout_left.setLayoutParams(layoutParams); 
  17.                     MAX_WIDTH = layout_right.getWidth(); 
  18.                     Log.v(TAG, "MAX_WIDTH=" + MAX_WIDTH +
    "width=" 
  19.                             + window_width); 
  20.                     hasMeasured = true
  21.                 } 
  22.                 return true
  23.             } 
  24.         }); 
  25.  
  26.     } 

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

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

    

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

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

ViewTreeObserver,这个类主要用于对布局文件的监听.强烈建议同学们参考这篇文章
android ViewTreeObserver详细讲解,相信让你对ViewTreeObserver有更一步的了解.

其他的就是对GestureDetector手势的应用,下面我把代码贴出来:

  1. package com.jj.slidingmenu; 
  2.  
  3. import android.app.Activity; 
  4. import android.os.AsyncTask; 
  5. import android.os.Bundle; 
  6. import android.util.Log; 
  7. import android.view.GestureDetector; 
  8. import android.view.KeyEvent; 
  9. import android.view.MotionEvent; 
  10. import android.view.View; 
  11. import android.view.ViewTreeObserver; 
  12. import android.view.ViewTreeObserver.OnPreDrawListener; 
  13. import android.view.Window; 
  14. import android.view.View.OnTouchListener; 
  15. import android.widget.AdapterView; 
  16. import android.widget.AdapterView.OnItemClickListener; 
  17. import android.widget.ArrayAdapter; 
  18. import android.widget.ImageView; 
  19. import android.widget.LinearLayout; 
  20. import android.widget.ListView; 
  21. import android.widget.RelativeLayout; 
  22. import android.widget.Toast; 
  23. import android.widget.LinearLayout.LayoutParams; 
  24.  
  25. /***
  26. * 滑动菜单
  27. *
  28. * @author jjhappyforever...
  29. *
  30. */ 
  31. public class MainActivity
    extends Activity implements OnTouchListener, 
  32.         GestureDetector.OnGestureListener { 
  33.     private boolean hasMeasured =
    false;// 是否Measured. 
  34.     private LinearLayout layout_left; 
  35.     private LinearLayout layout_right; 
  36.     private ImageView iv_set; 
  37.     private ListView lv_set; 
  38.  
  39.     /** 每次自动展开/收缩的范围 */ 
  40.     private int MAX_WIDTH =
    0
  41.     /** 每次自动展开/收缩的速度 */ 
  42.     private final
    static int SPEED =
    30
  43.  
  44.     private GestureDetector mGestureDetector;// 手势 
  45.     private boolean isScrolling =
    false
  46.     private float mScrollX;
    // 滑块滑动距离 
  47.     private int window_width;// 屏幕的宽度 
  48.  
  49.     private String TAG =
    "jj"
  50.  
  51.     private String title[] = {
    "待发送队列", "同步分享设置",
    "编辑我的资料", "找朋友",
    "告诉朋友"
  52.             "节省流量", "推送设置",
    "版本更新", "意见反馈",
    "积分兑换", "精品应用",
    "常见问题", "退出当前帐号" }; 
  53.  
  54.     /***
  55.      * 初始化view
  56.      */ 
  57.     void InitView() { 
  58.         layout_left = (LinearLayout) findViewById(R.id.layout_left); 
  59.         layout_right = (LinearLayout) findViewById(R.id.layout_right); 
  60.         iv_set = (ImageView) findViewById(R.id.iv_set); 
  61.         lv_set = (ListView) findViewById(R.id.lv_set); 
  62.         lv_set.setAdapter(new ArrayAdapter<String>(this, R.layout.item, 
  63.                 R.id.tv_item, title)); 
  64.         lv_set.setOnItemClickListener(new OnItemClickListener() { 
  65.  
  66.             @Override 
  67.             public
    void onItemClick(AdapterView<?> parent, View view, 
  68.                     int position,
    long id) { 
  69.                 Toast.makeText(MainActivity.this, title[position],
    1).show(); 
  70.             } 
  71.         }); 
  72.         layout_left.setOnTouchListener(this); 
  73.         iv_set.setOnTouchListener(this); 
  74.         mGestureDetector = new GestureDetector(this); 
  75.         // 禁用长按监听 
  76.         mGestureDetector.setIsLongpressEnabled(false); 
  77.         getMAX_WIDTH(); 
  78.     } 
  79.  
  80.     /***
  81.      * 获取移动距离 移动的距离其实就是layout_left的宽度
  82.      */ 
  83.     void getMAX_WIDTH() { 
  84.         ViewTreeObserver viewTreeObserver = layout_left.getViewTreeObserver(); 
  85.         // 获取控件宽度 
  86.         viewTreeObserver.addOnPreDrawListener(new OnPreDrawListener() { 
  87.             @Override 
  88.             public boolean onPreDraw() { 
  89.                 if (!hasMeasured) { 
  90.                     window_width = getWindowManager().getDefaultDisplay() 
  91.                             .getWidth(); 
  92.                     RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) layout_left 
  93.                             .getLayoutParams(); 
  94.                     // layoutParams.width = window_width; 
  95.                     layout_left.setLayoutParams(layoutParams); 
  96.                     MAX_WIDTH = layout_right.getWidth(); 
  97.                     Log.v(TAG, "MAX_WIDTH=" + MAX_WIDTH +
    "width=" 
  98.                             + window_width); 
  99.                     hasMeasured = true
  100.                 } 
  101.                 return
    true
  102.             } 
  103.         }); 
  104.  
  105.     } 
  106.  
  107.     @Override 
  108.     public void onCreate(Bundle savedInstanceState) { 
  109.         super.onCreate(savedInstanceState); 
  110.         requestWindowFeature(Window.FEATURE_NO_TITLE); 
  111.         setContentView(R.layout.main); 
  112.         InitView(); 
  113.  
  114.     } 
  115.  
  116.     // 返回键 
  117.     @Override 
  118.     public boolean onKeyDown(int keyCode, KeyEvent event) { 
  119.         if (KeyEvent.KEYCODE_BACK == keyCode && event.getRepeatCount() ==
    0) { 
  120.             RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) layout_left 
  121.                     .getLayoutParams(); 
  122.             if (layoutParams.leftMargin <
    0) { 
  123.                 new AsynMove().execute(SPEED); 
  124.                 return false
  125.             } 
  126.         } 
  127.  
  128.         return super.onKeyDown(keyCode, event); 
  129.     } 
  130.  
  131.     @Override 
  132.     public boolean onTouch(View v, MotionEvent event) { 
  133.         // 松开的时候要判断,如果不到半屏幕位子则缩回去, 
  134.         if (MotionEvent.ACTION_UP == event.getAction() && isScrolling ==
    true) { 
  135.             RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) layout_left 
  136.                     .getLayoutParams(); 
  137.             // 缩回去 
  138.             if (layoutParams.leftMargin < -window_width /
    2) { 
  139.                 new AsynMove().execute(-SPEED); 
  140.             } else
  141.                 new AsynMove().execute(SPEED); 
  142.             } 
  143.         } 
  144.  
  145.         return mGestureDetector.onTouchEvent(event); 
  146.     } 
  147.  
  148.     @Override 
  149.     public boolean onDown(MotionEvent e) { 
  150.         mScrollX = 0
  151.         isScrolling = false
  152.         // 将之改为true,不然事件不会向下传递. 
  153.         return true
  154.     } 
  155.  
  156.     @Override 
  157.     public void onShowPress(MotionEvent e) { 
  158.  
  159.     } 
  160.  
  161.     /***
  162.      * 点击松开执行
  163.      */ 
  164.     @Override 
  165.     public boolean onSingleTapUp(MotionEvent e) { 
  166.         RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) layout_left 
  167.                 .getLayoutParams(); 
  168.         // 左移动 
  169.         if (layoutParams.leftMargin >=
    0) { 
  170.             new AsynMove().execute(-SPEED); 
  171.         } else
  172.             // 右移动 
  173.             new AsynMove().execute(SPEED); 
  174.         } 
  175.  
  176.         return true
  177.     } 
  178.  
  179.     /***
  180.      * e1 是起点,e2是终点,如果distanceX=e1.x-e2.x>0说明向左滑动。反之亦如此.
  181.      */ 
  182.     @Override 
  183.     public boolean onScroll(MotionEvent e1, MotionEvent e2,
    float distanceX, 
  184.             float distanceY) { 
  185.         isScrolling = true
  186.         mScrollX += distanceX;// distanceX:向左为正,右为负 
  187.         RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) layout_left 
  188.                 .getLayoutParams(); 
  189.         layoutParams.leftMargin -= mScrollX; 
  190.         if (layoutParams.leftMargin >=
    0) { 
  191.             isScrolling = false;// 拖过头了不需要再执行AsynMove了 
  192.             layoutParams.leftMargin = 0
  193.  
  194.         } else if (layoutParams.leftMargin <= -MAX_WIDTH) { 
  195.             // 拖过头了不需要再执行AsynMove了 
  196.             isScrolling = false
  197.             layoutParams.leftMargin = -MAX_WIDTH; 
  198.         } 
  199.         layout_left.setLayoutParams(layoutParams); 
  200.         return false
  201.     } 
  202.  
  203.     @Override 
  204.     public void onLongPress(MotionEvent e) { 
  205.  
  206.     } 
  207.  
  208.     @Override 
  209.     public boolean onFling(MotionEvent e1, MotionEvent e2,
    float velocityX, 
  210.             float velocityY) { 
  211.         return false
  212.     } 
  213.  
  214.     class AsynMove extends AsyncTask<Integer, Integer, Void> { 
  215.  
  216.         @Override 
  217.         protected Void doInBackground(Integer... params) { 
  218.             int times = 0
  219.             if (MAX_WIDTH % Math.abs(params[0]) ==
    0)// 整除 
  220.                 times = MAX_WIDTH / Math.abs(params[0]); 
  221.             else 
  222.                 times = MAX_WIDTH / Math.abs(params[0]) +
    1;// 有余数 
  223.  
  224.             for (int i =
    0; i < times; i++) { 
  225.                 publishProgress(params[0]); 
  226.                 try
  227.                     Thread.sleep(Math.abs(params[0])); 
  228.                 } catch (InterruptedException e) { 
  229.                     e.printStackTrace(); 
  230.                 } 
  231.             } 
  232.  
  233.             return
    null
  234.         } 
  235.  
  236.         /**
  237.          * update UI
  238.          */ 
  239.         @Override 
  240.         protected void onProgressUpdate(Integer... values) { 
  241.             RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) layout_left 
  242.                     .getLayoutParams(); 
  243.             // 右移动 
  244.             if (values[0] >
    0) { 
  245.                 layoutParams.leftMargin = Math.min(layoutParams.leftMargin 
  246.                         + values[0],
    0); 
  247.                 Log.v(TAG, "移动右" + layoutParams.rightMargin); 
  248.             } else
  249.                 // 左移动 
  250.                 layoutParams.leftMargin = Math.max(layoutParams.leftMargin 
  251.                         + values[0], -MAX_WIDTH); 
  252.                 Log.v(TAG, "移动左" + layoutParams.rightMargin); 
  253.             } 
  254.             layout_left.setLayoutParams(layoutParams); 
  255.  
  256.         } 
  257.  
  258.     } 
  259.  

上面代码注释已经很明确,相信大家都看的明白,我就不过多解释了。

效果图:截屏出来有点卡,不过在手机虚拟机上是不卡的.



源码下载

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



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

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

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

  1. package com.jj.slidingmenu; 
  2.  
  3. import android.content.Context; 
  4. import android.util.AttributeSet; 
  5. import android.util.Log; 
  6. import android.view.GestureDetector; 
  7. import android.view.MotionEvent; 
  8. import android.view.GestureDetector.OnGestureListener; 
  9. import android.view.View; 
  10. import android.widget.ListView; 
  11. import android.widget.Toast; 
  12.  
  13. public class MyListView
    extends ListView implements OnGestureListener { 
  14.  
  15.     private GestureDetector gd; 
  16.     // 事件状态 
  17.     public static
    final char

抱歉!评论已关闭.