碼上歡樂
相關內容    簡體    繁體

android 滑動菜單SlidingMenu的實現

本文轉載自   查看原文   2013-07-12 10:16   3927    轉載/ Android之旅

先我們看下面視圖：

      

這種效果大家都不陌生，網上好多都說是仿人人網的，估計人家牛逼出來的早吧，我也參考了一一些例子，實現起來有三種方法，我下面簡單介紹下：

方法一：其實就是對GestureDetector手勢的應用及布局文件的設計.

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

 

[java]  view plain copy
 
  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.相信大家都理解.

布局文件就介紹到這里，下面看代碼.

 

[java]  view plain copy
 
  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.     }  

這里要對手勢進行監聽，我想大家都知道怎么做，在這里我要說明一個方法：

 

 

[java]  view plain copy
 
  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手勢的應用，下面我把代碼貼出來：

 

[java]  view plain copy
 
  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.   
  260. }  

上面代碼注釋已經很明確，相信大家都看的明白，我就不過多解釋了。

 

效果圖：截屏出來有點卡，不過在手機虛擬機上是不卡的.

 

源碼下載

 

怎么樣，看着還行吧，我們在看下面一個示例：

 

簡單說明一下，當你滑動的時候左邊會跟着右邊一起滑動，這個效果比上面那個酷吧，上面那個有點死板，其實實現起來也比較容易，只需要把我們上面那個稍微修改下，對layout_right也進行時時更新，這樣就實現了這個效果了，如果上面那個理解了，這個很輕松就解決了，在這里我又遇到一個問題：此時的listview的item監聽不到手勢，意思就是我左右滑動listview他沒有進行滑動。

本人對touch眾多事件監聽攔截等熟悉度不夠，因此這里我用到自己寫的方法，也許比較麻煩，如果有更好的解決辦法，請大家一定要分享哦，再次 thanks for you 了.

具體解決辦法：我們重寫listview,對此listview進行手勢監聽，我們自定義一個接口來實現，具體代碼如下：

 

[java]  view plain copy
 
  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 FLING_CLICK = 0;  
  18.     public static final char FLING_LEFT = 1;  
  19.     public static final char FLING_RIGHT = 2;  
  20.     public static char flingState = FLING_CLICK;  
  21.   
  22.     private float distanceX;// 水平滑動的距離  
  23.   
  24.     private MyListViewFling myListViewFling;  
  25.   
  26.     public static boolean isClick = false;// 是否可以點擊  
  27.   
  28.     public void setMyListViewFling(MyListViewFling myListViewFling) {  
  29.         this.myListViewFling = myListViewFling;  
  30.     }  
  31.   
  32.     public float getDistanceX() {  
  33.         return distanceX;  
  34.     }  
  35.   
  36.     public char getFlingState() {  
  37.         return flingState;  
  38.     }  
  39.   
  40.     private Context context;  
  41.   
  42.     public MyListView(Context context) {  
  43.         super(context);  
  44.   
  45.     }  
  46.   
  47.     public MyListView(Context context, AttributeSet attrs) {  
  48.         super(context, attrs);  
  49.         this.context = context;  
  50.         gd = new GestureDetector(this);  
  51.     }  
  52.   
  53.     /** 
  54.      * 覆寫此方法，以解決ListView滑動被屏蔽問題 
  55.      */  
  56.     @Override  
  57.     public boolean dispatchTouchEvent(MotionEvent event) {  
  58.         myListViewFling.doFlingOver(event);// 回調執行完畢.  
  59.         this.gd.onTouchEvent(event);  
  60.   
  61.         return super.dispatchTouchEvent(event);  
  62.     }  
  63.   
  64.     @Override  
  65.     public boolean onTouchEvent(MotionEvent ev) {  
  66.         /*** 
  67.          * 當移動的時候 
  68.          */  
  69.         if (ev.getAction() == MotionEvent.ACTION_DOWN)  
  70.             isClick = true;  
  71.         if (ev.getAction() == MotionEvent.ACTION_MOVE)  
  72.             isClick = false;  
  73.         return super.onTouchEvent(ev);  
  74.     }  
  75.   
  76.     @Override  
  77.     public boolean onDown(MotionEvent e) {  
  78.         int position = pointToPosition((int) e.getX(), (int) e.getY());  
  79.         if (position != ListView.INVALID_POSITION) {  
  80.             View child = getChildAt(position - getFirstVisiblePosition());  
  81.         }  
  82.         return true;  
  83.     }  
  84.   
  85.     @Override  
  86.     public void onShowPress(MotionEvent e) {  
  87.   
  88.     }  
  89.   
  90.     @Override  
  91.     public boolean onSingleTapUp(MotionEvent e) {  
  92.   
  93.         return false;  
  94.     }  
  95.   
  96.     @Override  
  97.     public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,  
  98.             float distanceY) {  
  99.         // 左滑動  
  100.         if (distanceX > 0) {  
  101.             flingState = FLING_RIGHT;  
  102.             Log.v("jj", "左distanceX=" + distanceX);  
  103.             myListViewFling.doFlingLeft(distanceX);// 回調  
  104.             // 右滑動.  
  105.         } else if (distanceX < 0) {  
  106.             flingState = FLING_LEFT;  
  107.             Log.v("jj", "右distanceX=" + distanceX);  
  108.             myListViewFling.doFlingRight(distanceX);// 回調  
  109.         }  
  110.   
  111.         return false;  
  112.     }  
  113.   
  114.     /*** 
  115.      * 上下文菜單 
  116.      */  
  117.     @Override  
  118.     public void onLongPress(MotionEvent e) {  
  119.         // System.out.println("Listview long press");  
  120.         // int position = pointToPosition((int) e.getX(), (int) e.getY());  
  121.         // if (position != ListView.INVALID_POSITION) {  
  122.         // View child = getChildAt(position - getFirstVisiblePosition());  
  123.         // if (child != null) {  
  124.         // showContextMenuForChild(child);  
  125.         // this.requestFocusFromTouch();  
  126.         // }  
  127.         //  
  128.         // }  
  129.     }  
  130.   
  131.     @Override  
  132.     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
  133.             float velocityY) {  
  134.   
  135.         return false;  
  136.     }  
  137.   
  138.     /*** 
  139.      * 回調接口 
  140.      *  
  141.      * @author jjhappyforever... 
  142.      *  
  143.      */  
  144.     interface MyListViewFling {  
  145.         void doFlingLeft(float distanceX);// 左滑動執行  
  146.   
  147.         void doFlingRight(float distanceX);// 右滑動執行  
  148.   
  149.         void doFlingOver(MotionEvent event);// 拖拽松開時執行  
  150.   
  151.     }  
  152.   
  153. }  

而在MainActivity.java里面實現該接口,我這么一說，我想有的同學們都明白了，具體實現起來代碼有點多，我把代碼上傳到網上，大家可以下載后用心看，我想大家都能夠明白的.（在這里我鄙視一下自己，肯定通過對手勢監聽攔截實現對listview的左右滑動，但是自己學業不經，再次再說一下，如有好的解決方案，請一定要分享我一下哦.）

另外有一個問題：當listivew超出一屏的時候，此時的listview滑動的時候可以上下左右一起滑動,在此沒有解決這個問題，如有解決請分享我哦.

 

效果圖：

 

源碼下載

 

補充說明：上面這個例子有點小BUG，就是右邊菜單過長的話，我不僅可以上下滑動，同時也可以左右滑動，這點肯定不是我們想要的效果，其實下面已經解決了這個問題，就是我們自定義一個布局文件，在布局文件中進行對Touch事件監聽.效果比上面好的多，至於網上別的樣式，我想大家都應該可以效仿實現，這里就不一一講解了，關鍵：大家要明白原理，遇到問題知道怎么處理，話費時間長沒關系，只要可以搞定.（網上有的朋友說這個有重影，有的布局會變形，其實和我們的布局有關，因為我們用的是AbsoluteLayout布局，但是只要你懂得怎么用，那些問題都不是問題.）

 

更正后源碼下載

 

 

由於篇符較長，先說到這里，其實android 自定義ViewGroup和對view進行切圖動畫實現滑動菜單SlidingMenu也可以實現.具體參考下一篇文章：android 自定義ViewGroup和對view進行切圖動畫實現滑動菜單SlidingMenu

 

/*********************************************************************************************/

 

下面介紹下：

android 滑動菜單SlidingMenu之拓展（解決ListView滑動沖突）

                

 

 

百度新聞客戶端可以手勢左划右划，而操作的對象是一個ListView,大家都知道SlidingMenu里的ListView加手勢GestureDetector就是蛋疼的操作，但是百度人家就這么搞，而且做的相當棒，其他的應用我很少見到如此的，不得不說，牛逼有牛逼的道理.

網上我搜查了，沒有找到類似的案例，只能自己琢磨了，功夫不負有心人啊，終於實現了，方法比較笨戳，下面我簡單講解下：

實現原理：Touch事件的攔截與分發.

在項目中，由於點擊不同的菜單要顯示不同的內容，所以右邊最好弄成活動布局，就是添加一個Linerlayout，動態添加相應布局，這樣擴展比較容易.但是這個Linerlayout我們要自己定義，因為我們要攔截一些Touch事件.(實現：當我們上下滑動，ListView上下滑動，當我們左右滑動ListView禁止上下滑動，進行左右滑動)

 

 

[java]  view plain copy
 
  1. package com.hytrip.ui.custom;  
  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.View;  
  9. import android.view.GestureDetector.SimpleOnGestureListener;  
  10. import android.widget.LinearLayout;  
  11.   
  12. /*** 
  13.  * 行程詳情的自定義布局 
  14.  *  
  15.  * @author zhangjia 
  16.  *  
  17.  */  
  18. public class JourneyLinearLayout extends LinearLayout {  
  19.     private GestureDetector mGestureDetector;  
  20.     View.OnTouchListener mGestureListener;  
  21.   
  22.     private boolean isLock = true;  
  23.   
  24.     private OnScrollListener onScrollListener;// 自定義接口  
  25.   
  26.     private boolean b;  
  27.   
  28.     public JourneyLinearLayout(Context context) {  
  29.         super(context);  
  30.     }  
  31.   
  32.     public void setOnScrollListener(OnScrollListener onScrollListener) {  
  33.         this.onScrollListener = onScrollListener;  
  34.     }  
  35.   
  36.     public JourneyLinearLayout(Context context, AttributeSet attrs) {  
  37.         super(context, attrs);  
  38.         mGestureDetector = new GestureDetector(new MySimpleGesture());  
  39.     }  
  40.   
  41.     @Override  
  42.     public boolean dispatchTouchEvent(MotionEvent ev) {  
  43.         Log.e("jj", "dispatchTouchEvent...");  
  44.         // 獲取手勢返回值  
  45.         b = mGestureDetector.onTouchEvent(ev);  
  46.         // 松開手要執行一些操作。(關閉 or 打開)  
  47.         if (ev.getAction() == MotionEvent.ACTION_UP) {  
  48.             onScrollListener.doLoosen();  
  49.         }  
  50.         return super.dispatchTouchEvent(ev);  
  51.     }  
  52.   
  53.     @Override  
  54.     public boolean onInterceptTouchEvent(MotionEvent ev) {  
  55.         Log.e("jj", "onInterceptTouchEvent...");  
  56.         super.onInterceptTouchEvent(ev);  
  57.         return b;  
  58.     }  
  59.     /*** 
  60.      * 在這里我簡單說明一下 
  61.      */  
  62.     @Override  
  63.     public boolean onTouchEvent(MotionEvent event) {  
  64.         Log.e("jj", "onTouchEvent...");  
  65.         isLock = false;  
  66.         return super.onTouchEvent(event);  
  67.     }  
  68.   
  69.     /*** 
  70.      * 自定義手勢執行 
  71.      *  
  72.      * @author zhangjia 
  73.      *  
  74.      */  
  75.     class MySimpleGesture extends SimpleOnGestureListener {  
  76.   
  77.         @Override  
  78.         public boolean onDown(MotionEvent e) {  
  79.             Log.e("jj", "onDown...");  
  80.             isLock = true;  
  81.             return super.onDown(e);  
  82.         }  
  83.   
  84.         @Override  
  85.         public boolean onScroll(MotionEvent e1, MotionEvent e2,  
  86.                 float distanceX, float distanceY) {  
  87.   
  88.             if (!isLock)  
  89.                 onScrollListener.doScroll(distanceX);  
  90.   
  91.             // 垂直大於水平  
  92.             if (Math.abs(distanceY) > Math.abs(distanceX)) {  
  93.                 // Log.e("jjj", "ll...垂直...");  
  94.                 return false;  
  95.             } else {  
  96.                 // Log.e("jjj", "ll...水平...");  
  97.                 // Log.e("jj", "distanceX===" + distanceX);  
  98.                 return true;  
  99.             }  
  100.   
  101.         }  
  102.     }  
  103.   
  104.     /*** 
  105.      * 自定義接口 實現滑動... 
  106.      *  
  107.      * @author zhangjia 
  108.      *  
  109.      */  
  110.     public interface OnScrollListener {  
  111.         void doScroll(float distanceX);// 滑動...  
  112.   
  113.         void doLoosen();// 手指松開后執行...  
  114.     }  
  115.   
  116. }  

 

 

說明1：順序：dispatchTouchEvent》GestureDetector》onInterceptTouchEvent》onTouchEvent.

說明2：onInterceptTouchEvent 返回true,則攔截孩子touch事件，執行當前OnTouch事件，而返回false，則不執行OnTouch事件，事件傳遞給孩子執行。。。

 

因為onInterceptTouchEvent 是用於攔截Touch的，不適用於執行一些操作，所以把注入手勢操作方法分發事件dispatchTouchEvent中.

下面是自定義的一個接口（方法1：滑動中。。。方法2：松開自動合攏。。。），用於實現手勢移動操作，在SlidingMenuActivity.java中實現其接口.

(寫的比較凌亂，但是如果你仔細看的話一定會明白的，弄懂事件的傳遞對你自定義想實現一些牛叉View會有幫助的.鄙人正在研究中...)

    

 因為是模型，所以樣子很丑，不過重要的是實現方法.

弄懂上面那個，下面我們在深入看一下：最上面最后一張圖片，我們在滑動中間圖片的時候ListView肯定是不要進行左划或者右划，是不是有點頭大了，其實分析好了，也不難，我們只要對上面那個自定義類稍微修調一下：我們在滑動左右滑動判斷一下，如果是ListView的HeadView，那么我們就不進行手勢操作，這樣ViewPager就可以左右滑動，而ListView就不會左右滑動了，如果不是HeadView還照常就Ok了，簡單吧。

下面是示例圖：

                     

 

   左右拖拽圖片局域（ListView未受影響）                左右拖拽（非圖片）局域

 

 @jj120522  這個大大才是原創，轉載學習。

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Android UI（三）SlidingMenu實現滑動菜單（詳細 官方） 【Android UI設計與開發】10：滑動菜單欄（二）SlidingMenu 動畫效果的實現 Android 側滑菜單的簡單實現（SlidingMenu） 使用SlidingMenu 實現Android側滑菜單效果 【Android UI設計與開發】9：滑動菜單欄（一）開源項目SlidingMenu的使用和示例 android 自己實現qqminihd 左右滑動菜單效果 Android實現導航菜單左右滑動效果 Android上實現各種風格的隱藏菜單,比如左右滑動菜單、上下滑動顯示隱藏菜單 Android之 左右滑動菜單 Android 開源項目側邊欄菜單(SlidingMenu)使用詳解
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM