Android 可拖拽的GridView效果实现, 长按可拖拽和item实时交换

转帖（http://blog.csdn.net/xiaanming/article/details/17718579）

在Android开发中，我们常常用到ListView和GridView，而有的时候系统的ListView，GridView并不能满足我们的需求，所以我们需要自己定义一个ListView或者GridView,我的上一篇文章中就是自定义的一个左右滑动删除item的例子，大家有兴趣的可以去看看 Android 使用Scroller实现绚丽的ListView左右滑动删除Item效果，今天这篇文章就给大家来自定义GridView的控件，GridView主要是来显示网格的控件，在Android的开发中使用很普通，相对于TextView，Button这些控件来说要来的复杂些，今天给大家带来长按GridView的item,然后将其拖拽其他item上面，使得GridView的item发生交换，比较典型的就是我们的Launcher，网上有很多关于GridView的拖动的Demo，但是大部分都是相同的，而且存在一些Bug,而且大部分都是点击GridView的item然后进行拖动，或者item之间不进行实时交换，今天给大家更加详细的介绍GridView拖拽，并且将Demo做的更完美，大家更容易接受，也许很多人听到这个感觉实现起来很复杂，就关掉的这篇文章，其实告诉大家，只要知道了思路就感觉一点都不复杂了，不信大家可以接着往下看看，首先还是跟大家说说实现的思路

1. 根据手指按下的X,Y坐标来获取我们在GridView上面点击的item
2. 手指按下的时候使用Handler和Runnable来实现一个定时器，假如定时时间为1000毫秒，在1000毫秒内，如果手指抬起了移除定时器，没有抬起并且手指点击在GridView的item所在的区域，则表示我们长按了GridView的item
3. 如果我们长按了item则隐藏item,然后使用WindowManager来添加一个item的镜像在屏幕用来代替刚刚隐藏的item
4. 当我们手指在屏幕移动的时候，更新item镜像的位置，然后在根据我们移动的X,Y的坐标来获取移动到GridView的哪一个位置
5. 到GridView的item过多的时候，可能一屏幕显示不完，我们手指拖动item镜像到屏幕下方，要触发GridView想上滚动，同理，当我们手指拖动item镜像到屏幕上面，触发GridView向下滚动
6. GridView交换数据，刷新界面，移除item的镜像

看完上面的这些思路你是不是找到了些感觉了呢，心里痒痒的想动手试试吧，好吧，接下来就带大家根据思路来实现可拖拽的GridView，新建一个项目就叫DragGridView
新建一个类DragGridView继承GridView,先来看看DragGridView的代码，然后在根据代码进行相关的讲解

[java] view plaincopy

1. package com.example.draggridview;
3. import android.app.Activity;
4. import android.content.Context;
5. import android.graphics.Bitmap;
6. import android.graphics.PixelFormat;
7. import android.graphics.Rect;
8. import android.os.Handler;
9. import android.os.Vibrator;
10. import android.util.AttributeSet;
11. import android.view.Gravity;
12. import android.view.MotionEvent;
13. import android.view.View;
14. import android.view.WindowManager;
15. import android.widget.AdapterView;
16. import android.widget.GridView;
17. import android.widget.ImageView;
19. /**
20.  * @blog http://blog.csdn.net/xiaanming 
21.  * 
22.  * @author xiaanming
23.  *
24.  */
25. public class DragGridView extends GridView{
26.     /**
27.      * DragGridView的item长按响应的时间， 默认是1000毫秒，也可以自行设置
28.      */
29.     private long dragResponseMS = 1000;
31.     /**
32.      * 是否可以拖拽，默认不可以
33.      */
34.     private boolean isDrag = false;
36.     private int mDownX;
37.     private int mDownY;
38.     private int moveX;
39.     private int moveY;
40.     /**
41.      * 正在拖拽的position
42.      */
43.     private int mDragPosition;
45.     /**
46.      * 刚开始拖拽的item对应的View
47.      */
48.     private View mStartDragItemView = null;
50.     /**
51.      * 用于拖拽的镜像，这里直接用一个ImageView
52.      */
53.     private ImageView mDragImageView;
55.     /**
56.      * 震动器
57.      */
58.     private Vibrator mVibrator;
60.     private WindowManager mWindowManager;
61.     /**
62.      * item镜像的布局参数
63.      */
64.     private WindowManager.LayoutParams mWindowLayoutParams;
66.     /**
67.      * 我们拖拽的item对应的Bitmap
68.      */
69.     private Bitmap mDragBitmap;
71.     /**
72.      * 按下的点到所在item的上边缘的距离
73.      */
74.     private int mPoint2ItemTop ;
76.     /**
77.      * 按下的点到所在item的左边缘的距离
78.      */
79.     private int mPoint2ItemLeft;
81.     /**
82.      * DragGridView距离屏幕顶部的偏移量
83.      */
84.     private int mOffset2Top;
86.     /**
87.      * DragGridView距离屏幕左边的偏移量
88.      */
89.     private int mOffset2Left;
91.     /**
92.      * 状态栏的高度
93.      */
94.     private int mStatusHeight;
96.     /**
97.      * DragGridView自动向下滚动的边界值
98.      */
99.     private int mDownScrollBorder;
101.     /**
102.      * DragGridView自动向上滚动的边界值
103.      */
104.     private int mUpScrollBorder;
106.     /**
107.      * DragGridView自动滚动的速度
108.      */
109.     private static final int speed = 20;
111.     /**
112.      * item发生变化回调的接口
113.      */
114.     private OnChanageListener onChanageListener;
118.     public DragGridView(Context context) {
119.         this(context, null);
120.     }
122.     public DragGridView(Context context, AttributeSet attrs) {
123.         this(context, attrs, 0);
124.     }
126.     public DragGridView(Context context, AttributeSet attrs, int defStyle) {
127.         super(context, attrs, defStyle);
128.         mVibrator = (Vibrator) context.getSystemService(Context.VIBRATOR_SERVICE);
129.         mWindowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
130.         mStatusHeight = getStatusHeight(context); //获取状态栏的高度
132.     }
134.     private Handler mHandler = new Handler();
136.     //用来处理是否为长按的Runnable
137.     private Runnable mLongClickRunnable = new Runnable() {
139.         @Override
140.         public void run() {
141.             isDrag = true; //设置可以拖拽
142.             mVibrator.vibrate(50); //震动一下
143.             mStartDragItemView.setVisibility(View.INVISIBLE);//隐藏该item
145.             //根据我们按下的点显示item镜像
146.             createDragImage(mDragBitmap, mDownX, mDownY);
147.         }
148.     };
150.     /**
151.      * 设置回调接口
152.      * @param onChanageListener
153.      */
154.     public void setOnChangeListener(OnChanageListener onChanageListener){
155.         this.onChanageListener = onChanageListener;
156.     }
158.     /**
159.      * 设置响应拖拽的毫秒数，默认是1000毫秒
160.      * @param dragResponseMS
161.      */
162.     public void setDragResponseMS(long dragResponseMS) {
163.         this.dragResponseMS = dragResponseMS;
164.     }
166.     @Override
167.     public boolean dispatchTouchEvent(MotionEvent ev) {
168.         switch(ev.getAction()){
169.         case MotionEvent.ACTION_DOWN:
170.             mDownX = (int) ev.getX();
171.             mDownY = (int) ev.getY();
173.             //根据按下的X,Y坐标获取所点击item的position
174.             mDragPosition = pointToPosition(mDownX, mDownY);
177.             if(mDragPosition == AdapterView.INVALID_POSITION){
178.                 return super.dispatchTouchEvent(ev);
179.             }
181.             //使用Handler延迟dragResponseMS执行mLongClickRunnable
182.             mHandler.postDelayed(mLongClickRunnable, dragResponseMS);
184.             //根据position获取该item所对应的View
185.             mStartDragItemView = getChildAt(mDragPosition – getFirstVisiblePosition());
187.             //下面这几个距离大家可以参考我的博客上面的图来理解下
188.             mPoint2ItemTop = mDownY – mStartDragItemView.getTop();
189.             mPoint2ItemLeft = mDownX – mStartDragItemView.getLeft();
191.             mOffset2Top = (int) (ev.getRawY() – mDownY);
192.             mOffset2Left = (int) (ev.getRawX() – mDownX);
194.             //获取DragGridView自动向上滚动的偏移量，小于这个值，DragGridView向下滚动
195.             mDownScrollBorder = getHeight() /4;
196.             //获取DragGridView自动向下滚动的偏移量，大于这个值，DragGridView向上滚动
197.             mUpScrollBorder = getHeight() * 3/4;
201.             //开启mDragItemView绘图缓存
202.             mStartDragItemView.setDrawingCacheEnabled(true);
203.             //获取mDragItemView在缓存中的Bitmap对象
204.             mDragBitmap = Bitmap.createBitmap(mStartDragItemView.getDrawingCache());
205.             //这一步很关键，释放绘图缓存，避免出现重复的镜像
206.             mStartDragItemView.destroyDrawingCache();
209.             break;
210.         case MotionEvent.ACTION_MOVE:
211.             int moveX = (int)ev.getX();
212.             int moveY = (int) ev.getY();
214.             //如果我们在按下的item上面移动，只要不超过item的边界我们就不移除mRunnable
215.             if(!isTouchInItem(mStartDragItemView, moveX, moveY)){
216.                 mHandler.removeCallbacks(mLongClickRunnable);
217.             }
218.             break;
219.         case MotionEvent.ACTION_UP:
220.             mHandler.removeCallbacks(mLongClickRunnable);
221.             mHandler.removeCallbacks(mScrollRunnable);
222.             break;
223.         }
224.         return super.dispatchTouchEvent(ev);
225.     }
228.     /**
229.      * 是否点击在GridView的item上面
230.      * @param itemView
231.      * @param x
232.      * @param y
233.      * @return
234.      */
235.     private boolean isTouchInItem(View dragView, int x, int y){
236.         if(dragView == null){
237.             return false;
238.         }
239.         int leftOffset = dragView.getLeft();
240.         int topOffset = dragView.getTop();
241.         if(x < leftOffset || x > leftOffset + dragView.getWidth()){
242.             return false;
243.         }
245.         if(y < topOffset || y > topOffset + dragView.getHeight()){
246.             return false;
247.         }
249.         return true;
250.     }
254.     @Override
255.     public boolean onTouchEvent(MotionEvent ev) {
256.         if(isDrag && mDragImageView != null){
257.             switch(ev.getAction()){
258.             case MotionEvent.ACTION_MOVE:
259.                 moveX = (int) ev.getX();
260.                 moveY = (int) ev.getY();
261.                 //拖动item
262.                 onDragItem(moveX, moveY);
263.                 break;
264.             case MotionEvent.ACTION_UP:
265.                 onStopDrag();
266.                 isDrag = false;
267.                 break;
268.             }
269.             return true;
270.         }
271.         return super.onTouchEvent(ev);
272.     }
275.     /**
276.      * 创建拖动的镜像
277.      * @param bitmap 
278.      * @param downX
279.      *          按下的点相对父控件的X坐标
280.      * @param downY
281.      *          按下的点相对父控件的X坐标
282.      */
283.     private void createDragImage(Bitmap bitmap, int downX , int downY){
284.         mWindowLayoutParams = new WindowManager.LayoutParams();
285.         mWindowLayoutParams.format = PixelFormat.TRANSLUCENT; //图片之外的其他地方透明
286.         mWindowLayoutParams.gravity = Gravity.TOP | Gravity.LEFT;
287.         mWindowLayoutParams.x = downX – mPoint2ItemLeft + mOffset2Left;
288.         mWindowLayoutParams.y = downY – mPoint2ItemTop + mOffset2Top – mStatusHeight;
289.         mWindowLayoutParams.alpha = 0.55f; //透明度
290.         mWindowLayoutParams.width = WindowManager.LayoutParams.WRAP_CONTENT;
291.         mWindowLayoutParams.height = WindowManager.LayoutParams.WRAP_CONTENT;
292.         mWindowLayoutParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE
293.                     | WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE ;
295.         mDragImageView = new ImageView(getContext());
296.         mDragImageView.setImageBitmap(bitmap);
297.         mWindowManager.addView(mDragImageView, mWindowLayoutParams);
298.     }
300.     /**
301.      * 从界面上面移动拖动镜像
302.      */
303.     private void removeDragImage(){
304.         if(mDragImageView != null){
305.             mWindowManager.removeView(mDragImageView);
306.             mDragImageView = null;
307.         }
308.     }
310.     /**
311.      * 拖动item，在里面实现了item镜像的位置更新，item的相互交换以及GridView的自行滚动
312.      * @param x
313.      * @param y
314.      */
315.     private void onDragItem(int moveX, int moveY){
316.         mWindowLayoutParams.x = moveX – mPoint2ItemLeft + mOffset2Left;
317.         mWindowLayoutParams.y = moveY – mPoint2ItemTop + mOffset2Top – mStatusHeight;
318.         mWindowManager.updateViewLayout(mDragImageView, mWindowLayoutParams); //更新镜像的位置
319.         onSwapItem(moveX, moveY);
321.         //GridView自动滚动
322.         mHandler.post(mScrollRunnable);
323.     }
326.     /**
327.      * 当moveY的值大于向上滚动的边界值，触发GridView自动向上滚动
328.      * 当moveY的值小于向下滚动的边界值，触犯GridView自动向下滚动
329.      * 否则不进行滚动
330.      */
331.     private Runnable mScrollRunnable = new Runnable() {
333.         @Override
334.         public void run() {
335.             int scrollY;
336.             if(moveY > mUpScrollBorder){
337.                  scrollY = speed;
338.                  mHandler.postDelayed(mScrollRunnable, 25);
339.             }else if(moveY < mDownScrollBorder){
340.                 scrollY = -speed;
341.                  mHandler.postDelayed(mScrollRunnable, 25);
342.             }else{
343.                 scrollY = 0;
344.                 mHandler.removeCallbacks(mScrollRunnable);
345.             }
347.             //当我们的手指到达GridView向上或者向下滚动的偏移量的时候，可能我们手指没有移动，但是DragGridView在自动的滚动
348.             //所以我们在这里调用下onSwapItem()方法来交换item
349.             onSwapItem(moveX, moveY);
352.             smoothScrollBy(scrollY, 10);
353.         }
354.     };
357.     /**
358.      * 交换item,并且控制item之间的显示与隐藏效果
359.      * @param moveX
360.      * @param moveY
361.      */
362.     private void onSwapItem(int moveX, int moveY){
363.         //获取我们手指移动到的那个item的position
364.         int tempPosition = pointToPosition(moveX, moveY);
366.         //假如tempPosition 改变了并且tempPosition不等于-1,则进行交换
367.         if(tempPosition != mDragPosition && tempPosition != AdapterView.INVALID_POSITION){
368.             if(onChanageListener != null){
369.                 onChanageListener.onChange(mDragPosition, tempPosition);
370.             }
372.             getChildAt(tempPosition – getFirstVisiblePosition()).setVisibility(View.INVISIBLE);//拖动到了新的item,新的item隐藏掉
373.             getChildAt(mDragPosition – getFirstVisiblePosition()).setVisibility(View.VISIBLE);//之前的item显示出来
375.             mDragPosition = tempPosition;
376.         }
377.     }
380.     /**
381.      * 停止拖拽我们将之前隐藏的item显示出来，并将镜像移除
382.      */
383.     private void onStopDrag(){
384.         View view = getChildAt(mDragPosition – getFirstVisiblePosition());
385.         if(view != null){
386.             view.setVisibility(View.VISIBLE);
387.         }
388.         ((DragAdapter)this.getAdapter()).setItemHide(-1);
389.         removeDragImage();
390.     }
392.     /**
393.      * 获取状态栏的高度
394.      * @param context
395.      * @return
396.      */
397.     private static int getStatusHeight(Context context){
398.         int statusHeight = 0;
399.         Rect localRect = new Rect();
400.         ((Activity) context).getWindow().getDecorView().getWindowVisibleDisplayFrame(localRect);
401.         statusHeight = localRect.top;
402.         if (0 == statusHeight){
403.             Class<?> localClass;
404.             try {
405.                 localClass = Class.forName(“com.android.internal.R$dimen”);
406.                 Object localObject = localClass.newInstance();
407.                 int i5 = Integer.parseInt(localClass.getField(“status_bar_height”).get(localObject).toString());
408.                 statusHeight = context.getResources().getDimensionPixelSize(i5);
409.             } catch (Exception e) {
410.                 e.printStackTrace();
411.             }
412.         }
413.         return statusHeight;
414.     }
417.     /**
418.      * 
419.      * @author xiaanming
420.      *
421.      */
422.     public interface OnChanageListener{
424.         /**
425.          * 当item交换位置的时候回调的方法，我们只需要在该方法中实现数据的交换即可
426.          * @param form
427.          *          开始的position
428.          * @param to 
429.          *          拖拽到的position
430.          */
431.         public void onChange(int form, int to);
432.     }
433. }

首先看DragGridView的事件分发方法，不了解Android事件分发的可以先去了解下，Android事件分发对于自定义控件很重要，简单说下，当我们点击DragGridView的Item,先会去执行dispatchTouchEvent()方法将事件分发下去，所以我们要重写dispatchTouchEvent()方法在手指按下的时候根据pointToPosition()方法来获取我们按下的item的position,根据getChildAt()方法来获取该position上面所对应的View, 并且开启长按的定时器，默认时间为1000毫秒，如果在1000毫秒内手指抬起或者手指在屏幕上滑动出了该item，则取消长按定时器，否则就表示可以进行拖拽，手机友好的震动一下，隐藏我们长按的Item，屏幕调用createDragImage()方法来创建我们长按的item的镜像，创建Item的镜像使用的是WindowManager类，该类可以创建一个窗体显示在Activity之上，再此之前大家先要理解这几个距离，理解这几个距离之前要首先知道getRawX(),getRawY()和getX(),getY()的区别，getRawX(),getRawY()是相对于屏幕的原点的距离，而getX(),getY()是相对于控件左上方的点的距离，为了方便大家理解我用Word简单的画了下图，画得不好，大家将就的看下，红色框框为我们的GridView

• mPoint2ItemTop 手指按下的点到该Item的上边缘的距离，如上图的1号线
• mPoint2ItemLeft 手指按下的点到该Item的左边缘的距离，如上图的2号线
• mOffset2Top  DragGridView的上边缘到屏幕上边缘的距离，如上图的3号线，这个距离包裹状态栏，标题栏，或者一些在DragGridView上面的布局的高度，这个很重要我们现实Item镜像需要用到
• mOffset2Left DragGridView的左边缘到屏幕左边缘的距离，如上图的4号线，我这个Demo的这个距离为0，因为我设置DragGridView的宽度为充满屏幕，但是我们要考虑假如DragGridView与屏幕左边缘设置了间隙或者左边有其他的布局的情形
• mDownScrollBorder 这个距离表示当DragGridView的item过多的时候，手机一屏显示不完全，我们拖动Item镜像到这个高度的时候，DragGridView自动向下滚动，如上图的5号线
• .mUpScrollBorder 这个和mDownScrollBorder相反，当我们大于这个高度的时候，DragGridView自动向上滚动，如上图的6号线

[html] view plaincopy

1. <RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”
2.     xmlns:tools=“http://schemas.android.com/tools”
3.     android:layout_width=“match_parent”
4.     android:layout_height=“match_parent” >
6.     <com.example.draggridview.DragGridView
7.         android:id=“@+id/dragGridView”
8.         android:listSelector=“@android:color/transparent”
9.         android:layout_width=“match_parent”
10.         android:layout_height=“match_parent”
11.         android:cacheColorHint=“@android:color/transparent”
12.         android:verticalSpacing=“10dip”
13.         android:horizontalSpacing=“10dip”
14.         android:stretchMode=“columnWidth”
15.         android:gravity=“center”
16.         android:numColumns=“3” >
17.     </com.example.draggridview.DragGridView>
19. </RelativeLayout>

接下来我们看看DragGridView的item的布局，上面一个ImageView下面一个TextView

[html] view plaincopy

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=“wrap_content”
5.     android:background=“@android:color/transparent” >
7.     <ImageView
8.         android:id=“@+id/item_image”
9.         android:scaleType=“centerCrop”
10.         android:layout_width=“wrap_content”
11.         android:layout_height=“wrap_content”
12.         android:layout_centerHorizontal=“true” >
13.     </ImageView>
15.     <TextView
16.         android:id=“@+id/item_text”
17.         android:layout_width=“wrap_content”
18.         android:layout_height=“wrap_content”
19.         android:layout_below=“@+id/item_image”
20.         android:layout_centerHorizontal=“true” >
21.     </TextView>
23. </RelativeLayout>

布局搞定了我们就来看看主页面MainActivity的代码吧

[java] view plaincopy

1. package com.example.draggridview;
3. import java.util.ArrayList;
4. import java.util.Collections;
5. import java.util.HashMap;
6. import java.util.List;
8. import android.app.Activity;
9. import android.os.Bundle;
10. import android.widget.SimpleAdapter;
12. import com.example.draggridview.DragGridView.OnChanageListener;
14. /**
15.  * @blog http://blog.csdn.net/xiaanming 
16.  * 
17.  * @author xiaanming
18.  *
19.  */
20. public class MainActivity extends Activity {
21.     private List<HashMap<String, Object>> dataSourceList = new ArrayList<HashMap<String, Object>>();
23.     @Override
24.     protected void onCreate(Bundle savedInstanceState) {
25.         super.onCreate(savedInstanceState);
26.         setContentView(R.layout.activity_main);
28.         DragGridView mDragGridView = (DragGridView) findViewById(R.id.dragGridView);
29.         for (int i = 0; i < 30; i++) {
30.             HashMap<String, Object> itemHashMap = new HashMap<String, Object>();
31.             itemHashMap.put(“item_image”,R.drawable.com_tencent_open_notice_msg_icon_big);
32.             itemHashMap.put(“item_text”, “拖拽 “ + Integer.toString(i));
33.             dataSourceList.add(itemHashMap);
34.         }
37.         final SimpleAdapter mSimpleAdapter = new SimpleAdapter(this, dataSourceList,
38.                 R.layout.grid_item, new String[] { “item_image”, “item_text” },
39.                 new int[] { R.id.item_image, R.id.item_text });
41.         mDragGridView.setAdapter(mSimpleAdapter);
43.         mDragGridView.setOnChangeListener(new OnChanageListener() {
45.             @Override
46.             public void onChange(int from, int to) {
47.                 HashMap<String, Object> temp = dataSourceList.get(from);
48.                 //直接交互item
49. //              dataSourceList.set(from, dataSourceList.get(to));
50. //              dataSourceList.set(to, temp);
51. //              dataSourceList.set(to, temp);
54.                 //这里的处理需要注意下
55.                 if(from < to){
56.                     for(int i=from; i<to; i++){
57.                         Collections.swap(dataSourceList, i, i+1);
58.                     }
59.                 }else if(from > to){
60.                     for(int i=from; i>to; i–){
61.                         Collections.swap(dataSourceList, i, i-1);
62.                     }
63.                 }
65.                 dataSourceList.set(to, temp);
67.                 mSimpleAdapter.notifyDataSetChanged();
70.             }
71.         });
73.     }
75. }

这里面的代码还是比较简单，主要讲下onChange()方法，我们要为mDragGridView设置一个OnChanageListener的回调接口，在onChange()方法里面实现数据的交换逻辑，第一个参数from为item开始的位置，第二个参数to为item拖拽到的位置，刚开始我使用的交换逻辑是

[java] view plaincopy

1. HashMap<String, Object> temp = dataSourceList.get(from);
2.                 //直接交互item
3. //              dataSourceList.set(from, dataSourceList.get(to));
4. //              dataSourceList.set(to, temp);

直接交换的item的数据，然后看了下网易新闻的拖拽的GridView，他不是直接实现两个item直接的数据交换，所以将数据交换逻辑改成了下面的方式
简单说下，数据的交换逻辑，比如我们将position从5拖拽到7这个位置，我注释掉的逻辑是直接将5和7的数据交换，而后面的那种逻辑是将6的位置数据移动到5，将7的位置移动到6，然后再7显示5  6->5, 7->6, 5->7不知道大家理解了没有。

Share this: