Android中GridView拖拽的效果

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

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

先看几张效果图,再来研究代码:

        横行拖拽:

Android中GridView拖拽的效果                    Android中GridView拖拽的效果

  纵向拖拽的效果图:

Android中GridView拖拽的效果                  Android中GridView拖拽的效果

下面贴上代码---->在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

上一篇:Android中GridView通过自定义适配器(未优化)实现图文视图排列


下一篇:python第一站