Android中GridView拖拽的效果【android进化三十六】

  最 近看到联想，摩托罗拉等，手机launcher中有个效果，进入mainmenu后，里面的应用程序的图标可以拖来拖去，所以我也参照网上给的代码，写了 一个例子。还是很有趣的，实现的流畅度没有人家的那么好，我只是模仿这种效果，我写的这个拖拽是两个图标之间进行交换，所以，当从一行的某个位置，换到下 一行的另一列的时候，发现有好几个图标都改变位置了，因为是相邻两个交换位置，所以每经过相邻的图标的时候都改变位置。先弄个雏形，以后再更新优化。

转载请标明出处：http://blog.csdn.net/wdaming1986/article/details/7436881

先看几张效果图，再来研究代码：

      横行拖拽：

                    

  纵向拖拽的效果图：

                  

下面贴上代码---->在GragGridViewApp-4-7这个工程里面：

1、在包com.cn.daming.adapter中，有三个类----->

   1.1、DragAdapter.java这个类中的代码如下：   

1. <span style="color:#000000;FONT-SIZE: 16px">package com.cn.daming.adapter;
2. import java.util.ArrayList;
3. import java.util.Collections;
4. import android.content.Context;
5. import android.view.View;
6. import android.view.ViewGroup;
7. import android.widget.BaseAdapter;
8. public abstract class DragAdapter extends BaseAdapter {
9. protected Context mContext;
10. protected ArrayList<DragMessage> mlist;
11. public DragAdapter(Context mContext, ArrayList<DragMessage> mlist) {
12. this.mContext = mContext;
13. this.mlist = mlist;
14. }
15. public int getCount() {
16. if (this.mlist != null) {
17. return this.mlist.size();
18. }
19. return 0;
20. }
21. public DragMessage getItem(int position) {
22. return (DragMessage)this.mlist.get(position);
23. }
24. public long getItemId(int position) {
25. return 0;
26. }
27. public void addMsg(DragMessage msg){
28. this.mlist.add(msg);
29. }
30. final void reFlag(){
31. for (DragMessage msg : this.mlist) {
32. msg.flag = 0;
33. }
34. notifyDataSetChanged();
35. }
36. final void swap(int srcPosition, int dragPosition){
37. Collections.swap(this.mlist, srcPosition, dragPosition);
38. notifyDataSetChanged();
39. }
40. final void setFlag(int position, int flag){
41. getItem(position).flag = flag;
42. notifyDataSetChanged();
43. }
44. public abstract View getView(int position, View convertView, ViewGroup parent);
45. }
46. </span>

  

   1.2、DragMessage.java这个类中的代码如下：

1. package com.cn.daming.adapter;
2. public class DragMessage {
3. public static final int MOVE_FLAG = 1;
4. public static final int STATIC_FLAG = 0;
5. public int flag = 0;
6. }

   1.3、GragGridView.java核心类中的代码如下：

1. package com.cn.daming.adapter;
2. import android.content.Context;
3. import android.graphics.Bitmap;
4. import android.graphics.Color;
5. import android.graphics.PixelFormat;
6. import android.graphics.drawable.Drawable;
7. import android.os.Handler;
8. import android.os.Looper;
9. import android.os.Message;
10. import android.util.AttributeSet;
11. import android.util.Log;
12. import android.view.Gravity;
13. import android.view.MotionEvent;
14. import android.view.View;
15. import android.view.ViewGroup;
16. import android.view.WindowManager;
17. import android.widget.AdapterView;
18. import android.widget.GridView;
19. import android.widget.ImageView;
20. public class GragGridView extends GridView{
21. private ImageView dragImageView;//拖动item的preview
22. private WindowManager windowManager;
23. private WindowManager.LayoutParams windowParams;
24. private int dragSrcPosition; //开始拖拽的位置
25. private int dragPosition;    // 结束拖拽的位置
26. private int dragPointX;//相对于item的x坐标
27. private int dragPointY;//相对于item的y坐标
28. private int dragOffsetX;
29. private int dragOffsetY;
30. private int dragImageId;
31. private int itemHeight;
32. private int itemWidth;
33. private int moveHeight = 0;
34. private int upScrollBounce;
35. private int downScrollBounce;
36. private int dragColor = Color.GRAY;
37. private int changePosition = -1;
38. private long scrollDelayMillis = 10L;
39. private int middleX;
40. private int middleY;
41. private boolean isDrag = false;
42. private RefreshHandler scrollDelayUp = new RefreshHandler(Looper.getMainLooper(), true);
43. private RefreshHandler scrollDelayDown = new RefreshHandler(Looper.getMainLooper(), false);
44. private int scrollHeight = 4;
45. private int maxSH = 20;
46. private int minSH = 4;
47. public void setMoveHeight(int height) {
48. this.moveHeight = height;
49. }
50. public void setDragColor(int color) {
51. this.dragColor = color;
52. }
53. public void setDragImageId(int id) {
54. this.dragImageId = id;
55. }
56. public GragGridView(Context context, AttributeSet attrs) {
57. super(context, attrs);
58. }
59. @Override
60. public boolean onInterceptTouchEvent(MotionEvent ev) {
61. if (ev.getAction() == MotionEvent.ACTION_DOWN) {
62. int x = (int)ev.getX();
63. int y = (int)ev.getY();
64. this.dragSrcPosition = this.dragPosition = pointToPosition(x, y);
65. if (this.dragPosition == -1) {
66. return super.onInterceptTouchEvent(ev);
67. }
68. ViewGroup itemView = (ViewGroup)getChildAt(this.dragPosition -
69. getFirstVisiblePosition());
70. //得到当前点在item内部的偏移量 即相对于item左上角的坐标
71. this.itemHeight = itemView.getHeight();
72. this.dragPointX = (x - itemView.getLeft());
73. this.dragPointY = (y - itemView.getTop());
74. this.dragOffsetX = (int)(ev.getRawX() - x);
75. this.dragOffsetY = (int)(ev.getRawY() - y);
76. View dragger = itemView.findViewById(this.dragImageId);
77. if ((dragger != null) && (x > dragger.getLeft()&& x < dragger.getRight()) &&
78. (y > dragger.getTop() && y < dragger.getBottom())) {
79. if(this.moveHeight <= 0 || (this.moveHeight >= getHeight()/2)) {
80. this.upScrollBounce = (getHeight() / 3);
81. this.downScrollBounce = (getHeight() * 2 / 3);
82. } else {
83. this.upScrollBounce = this.moveHeight;
84. this.downScrollBounce = (getHeight() - this.moveHeight);
85. }
86. //解决问题3
87. //每次都销毁一次cache，重新生成一个bitmap
88. itemView.destroyDrawingCache();
89. itemView.setDrawingCacheEnabled(true);
90. Drawable background = itemView.getBackground();
91. itemView.setBackgroundColor(this.dragColor);
92. Bitmap bitmap = Bitmap.createBitmap(itemView.getDrawingCache());
93. itemView.setBackgroundDrawable(background);
94. //建立item的缩略图
95. startDrag(bitmap, x, y);
96. }
97. return false;
98. }
99. return super.onInterceptTouchEvent(ev);
100. }
101. @Override
102. public boolean onTouchEvent(MotionEvent ev) {
103. if ((this.dragImageView != null) && (this.dragPosition != -1)) {
104. int action = ev.getAction();
105. int moveY = (int)ev.getY();
106. int moveX = (int)ev.getX();
107. switch(action) {
108. case MotionEvent.ACTION_UP:
109. int upX = (int)ev.getX();
110. int upY = (int)ev.getY();
111. stopDrag();
112. onDrop(upX, upY);
113. break;
114. case MotionEvent.ACTION_MOVE:
115. if (moveX <= 0)
116. this.middleX = 0;
117. else if (moveX >= getWidth())
118. this.middleX = getWidth();
119. else {
120. this.middleX = moveX;
121. }
122. if (moveY <= 0)
123. this.middleY = 0;
124. else if (moveY >= getHeight())
125. this.middleY = getHeight();
126. else {
127. this.middleY = moveY;
128. }
129. dragPositionChanged();
130. onDrag(moveX, moveY);
131. }
132. return true;
133. }
134. return super.onTouchEvent(ev);
135. }
136. private void onDrag(int x, int y) {
137. if (this.dragImageView != null) {
138. this.windowParams.alpha = 0.8F;
139. if (this.middleX - this.dragPointX <= 0)
140. this.windowParams.x = this.dragOffsetX;
141. else if (this.middleX - this.dragPointX >= getWidth() - this.itemWidth)
142. this.windowParams.x = (getWidth() - this.itemWidth + this.dragOffsetX);
143. else {
144. this.windowParams.x = (this.middleX - this.dragPointX + this.dragOffsetX);
145. }
146. if (this.middleY - this.dragPointY <= 0)
147. this.windowParams.y = this.dragOffsetY;
148. else if (this.middleY - this.dragPointY >= getHeight() - this.itemHeight)
149. this.windowParams.y = (getHeight() - this.itemHeight + this.dragOffsetY);
150. else {
151. this.windowParams.y = (this.middleY - this.dragPointY + this.dragOffsetY);
152. }
153. this.windowManager.updateViewLayout(this.dragImageView, this.windowParams);
154. }
155. int tempPosition = pointToPosition(this.middleX, this.middleY);
156. Log.v("daming", "GragGridView ---> 177 tempPosition == "+tempPosition);
157. if (tempPosition != -1) {
158. this.dragPosition = tempPosition;
159. }
160. if ((y >= this.upScrollBounce) && (y <= this.downScrollBounce)) {
161. this.isDrag = false;
162. return;
163. }
164. if (y < this.upScrollBounce) {
165. float a = this.upScrollBounce - this.middleY;
166. float b = this.upScrollBounce;
167. float c = a / b;
168. this.scrollHeight = (int)(c * (this.maxSH - this.minSH) + this.minSH);
169. this.isDrag = true;
170. this.scrollDelayUp.sleep(0L);
171. } else if (y > this.downScrollBounce) {
172. float a = this.middleY - this.downScrollBounce;
173. float b = this.upScrollBounce;
174. float c = a / b;
175. this.scrollHeight = (int)(c * (this.maxSH - this.minSH) + this.minSH);
176. this.isDrag = true;
177. this.scrollDelayDown.sleep(0L);
178. }
179. }
180. private void startDrag(Bitmap bm, int x, int y) {
181. stopDrag();
182. this.windowParams = new WindowManager.LayoutParams();
183. //Gravity.TOP|Gravity.LEFT;这个必须加
184. this.windowParams.gravity = Gravity.TOP|Gravity.LEFT;
185. //得到preview左上角相对于屏幕的坐标
186. this.windowParams.x = (x - this.dragPointX + this.dragOffsetX);
187. this.windowParams.y = (y - this.dragPointY + this.dragOffsetY);
188. //设置拖拽item的宽和高
189. this.windowParams.width = WindowManager.LayoutParams.WRAP_CONTENT;
190. this.windowParams.height = WindowManager.LayoutParams.WRAP_CONTENT;
191. this.windowParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE
192. | WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE
193. | WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON
194. | WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN;
195. this.windowParams.format = PixelFormat.TRANSLUCENT;
196. this.windowParams.windowAnimations = 0;
197. ImageView imageView = new ImageView(getContext());
198. imageView.setImageBitmap(bm);
199. this.windowManager = ((WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE));//“window”
200. this.windowManager.addView(imageView, this.windowParams);
201. this.dragImageView = imageView;
202. }
203. private void stopDrag() {
204. if (this.dragImageView != null) {
205. this.windowManager.removeView(this.dragImageView);
206. this.dragImageView = null;
207. }
208. this.changePosition = -1;
209. this.isDrag = false;
210. }
211. private void dragPositionChanged(){
212. DragAdapter adapter = (DragAdapter)getAdapter();
213. if (this.changePosition != this.dragPosition) {
214. if (this.changePosition == -1)
215. {
216. this.changePosition = this.dragPosition;
217. adapter.setFlag(this.changePosition, 1);
218. return;
219. }
220. adapter.swap(this.changePosition, this.dragPosition);
221. this.changePosition = this.dragPosition;
222. }
223. }
224. public void setMaxSH(int sh){
225. this.maxSH = sh;
226. }
227. public void setMinSH(int sh){
228. this.minSH = sh;
229. }
230. private void onDrop(int x, int y){
231. //为了避免滑动到分割线的时候，返回-1的问题
232. int tempPosition = pointToPosition(x, y);
233. if(tempPosition!=INVALID_POSITION){
234. dragPosition = tempPosition;
235. }
236. //超出边界处理
237. if(y<getChildAt(0).getTop()){
238. //超出上边界
239. dragPosition = 0;
240. }else if(y>getChildAt(getChildCount()-1).getBottom()||
241. (y>getChildAt(getChildCount()-1).getTop()&&x>getChildAt(getChildCount()-1).getRight())){
242. //超出下边界
243. dragPosition = getAdapter().getCount()-1;
244. }
245. //数据交换
246. if(dragPosition!=dragSrcPosition&&dragPosition>-1&&dragPosition<getAdapter().getCount()){
247. DragAdapter adapter = (DragAdapter)getAdapter();
248. adapter.reFlag();
249. }
250. //      DragAdapter adapter = (DragAdapter)getAdapter();
251. //      adapter.reFlag();
252. }
253. private void actDown(){
254. int tempPosition = pointToPosition(this.middleX, this.middleY);
255. if (tempPosition != AdapterView.INVALID_POSITION) {
256. this.dragPosition = tempPosition;
257. }
258. dragPositionChanged();
259. }
260. private void actUp(){
261. int tempPosition = pointToPosition(this.middleX, this.middleY);
262. if (tempPosition != AdapterView.INVALID_POSITION) {
263. this.dragPosition = tempPosition;
264. }
265. dragPositionChanged();
266. }
267. class RefreshHandler extends Handler {
268. boolean isUp;
269. public RefreshHandler(Looper looper, boolean isUp){
270. super(looper);
271. this.isUp = isUp;
272. }
273. public RefreshHandler(Looper l) {
274. super(l);
275. }
276. public void handleMessage(Message msg){
277. if (GragGridView.this.isDrag) {
278. if (this.isUp)
279. GragGridView.this.actUp();
280. else {
281. GragGridView.this.actDown();
282. }
283. sleep(GragGridView.this.scrollDelayMillis);
284. }
285. }
286. public void sleep(long delayMillis) {
287. sendMessageDelayed(obtainMessage(0), delayMillis);
288. }
289. }
290. }

2、在包com.cn.daming.draggridview中，有两个类---->

   2.1、GragGridViewAppActivity.java入口类中的代码：

1. <span style="color:#000000;FONT-SIZE: 16px">package com.cn.daming.draggridview;
2. import java.util.ArrayList;
3. import android.app.Activity;
4. import android.content.Context;
5. import android.graphics.Color;
6. import android.graphics.drawable.Drawable;
7. import android.os.Bundle;
8. import android.view.LayoutInflater;
9. import android.view.View;
10. import android.view.ViewGroup;
11. import android.widget.ImageView;
12. import android.widget.TextView;
13. import com.cn.daming.adapter.DragAdapter;
14. import com.cn.daming.adapter.DragMessage;
15. import com.cn.daming.adapter.GragGridView;
16. public class GragGridViewAppActivity extends Activity {
17. private MyAdapter myAdapter;
18. private ArrayList<DragMessage> mlist = new ArrayList<DragMessage>();
19. private GragGridView mGridView;
20. @Override
21. public void onCreate(Bundle savedInstanceState) {
22. super.onCreate(savedInstanceState);
23. setContentView(R.layout.drag_grid_activity);
24. initDate();
25. mGridView = (GragGridView)findViewById(R.id.drag_grid);
26. myAdapter = new MyAdapter(this, mlist);
27. mGridView.setAdapter(myAdapter);
28. //设置触发拖动的区域，用一个ImageView来设置,这个必须设置
29. mGridView.setDragImageId(R.id.grag_grid_item_view);
30. //以下这些都做了相应的处理，不设置没关系，而且效果也不错
31. //设置拖动浮项的背景色
32. //      mListView.setDragColor(Color.RED);
33. //设置滚动的最大像素
34. //      mListView.setMaxSH(sh);
35. //设置滚动的最小像素
36. //      mListView.setMinSH(sh);
37. //设置滚动区的高度（2*height应该小于ListView自己的高度）
38. //      mListView.setMoveHeight(height);
39. }
40. private void initDate(){
41. for (int i = 1; i <= 100; i++) {
42. MyMessage msg = new MyMessage();
43. String str = "DM_" + i;
44. msg.msg = str;
45. mlist.add(msg);
46. }
47. }
48. class MyAdapter extends DragAdapter{
49. Drawable background;
50. public MyAdapter(Context mContext, ArrayList<DragMessage> mlist) {
51. super(mContext, mlist);
52. }
53. @Override
54. public View getView(int position, View convertView, ViewGroup parent) {
55. View view = convertView;
56. ViewHolder holder = null;
57. if (view == null) {
58. view = LayoutInflater.from(mContext).inflate(
59. R.layout.drag_grid_item, null);
60. holder = new ViewHolder();
61. holder.tv = (TextView) view
62. .findViewById(R.id.drag_grid_item_text);
63. holder.iv = (ImageView) view
64. .findViewById(R.id.drag_grid_item_image);
65. view.setTag(holder);
66. } else {
67. holder = (ViewHolder) view.getTag();
68. }
69. holder.tv.setText(((MyMessage)getItem(position)).msg);
70. holder.iv.setBackgroundResource(R.drawable.title2);
71. if(background == null){
72. background = view.getBackground();}
73. if(getItem(position).flag == DragMessage.MOVE_FLAG){
74. view.setBackgroundColor(Color.GRAY);
75. }
76. else{
77. view.setBackgroundDrawable(background);
78. }
79. return view;
80. }
81. }
82. private class ViewHolder {
83. TextView tv;
84. ImageView iv;
85. }
86. }</span>

   2.2、MyMessage.java中的代码：

1. <span style="color:#000000;FONT-SIZE: 16px">package com.cn.daming.draggridview;
2. import com.cn.daming.adapter.DragMessage;
3. public class MyMessage extends DragMessage{
4. public String msg;
5. }
6. </span>

3、布局文件layout有两个----->

   3.1、drag_grid_activity.xml中的代码如下：

1. <span style="color:#000000;FONT-SIZE: 16px"><?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout 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. <com.cn.daming.adapter.GragGridView
7. android:id="@+id/drag_grid"
8. android:layout_width="fill_parent"
9. android:layout_height="fill_parent"
10. android:numColumns="auto_fit"
11. android:columnWidth="70dp"
12. android:stretchMode="columnWidth"
13. android:gravity="center"
14. android:layout_gravity="center"
15. android:cacheColorHint="#00000000"/>
16. </LinearLayout></span>

   3.2、drag_grid_item.xml中的代码如下：

1. <span style="color:#000000;FONT-SIZE: 16px"><?xml version="1.0" encoding="utf-8"?>
2. <!-- 一定要使用相对布局 -->
3. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
4. android:background="#FFFFFF"
5. android:id="@+id/grag_grid_item_view"
6. android:layout_width="fill_parent"
7. android:layout_height="fill_parent">
8. <TextView
9. android:id="@+id/drag_grid_item_text"
10. android:layout_width="wrap_content"
11. android:layout_height="50dp"
12. android:paddingLeft="5dip"
13. android:gravity="center"
14. android:textColor="#ffff00ff"
15. android:layout_below="@+id/drag_grid_item_image"
16. android:capitalize="none"
17. />
18. <ImageView
19. android:id="@+id/drag_grid_item_image"
20. android:layout_width="50dp"
21. android:layout_height="50dp"
22. android:scaleType="center"
23. />
24. </RelativeLayout> </span>

有问题的可以留言，欢迎大家来讨论研究，分享知识，共同进步！

以下是我在开发中遇到问题的参考资料：

http://www.cnblogs.com/qianxudetianxia/archive/2011/06/19/2084886.html

http://lipeng88213.iteye.com/blog/1099621

http://hi.baidu.com/jwq359699768/blog/item/f2caee8741e71131c75cc369.html

源代码下载地址：http://download.csdn.net/detail/wdaming1986/4207350