可拖拽GridView代码解析

分为三步来说明拖拽是怎么实现的。

1)如何让拖拽的Item来随着手指的移动而移动。

2)拖拽过程中相关item的移动处理

3)相关Adapter的是怎么处理的。

1)如何让拖拽的Item来随着手指的移动而移动。

在说具体的代码之前先说说拖拽效果的几个相关的坐标值,先看下图:

关于上图的几点说明:

1) ev:MotionEvent对象的引用,由于代码里是在GridView里重写的onInterceptTouchEvent(MotionEventev)的方法,所以getX()相对的是GridView的位置而不是item的位置。

2) ev.getX():手指触摸点距离自身控件左边缘的长度(自身控件在这里为GridView)

ev.getY():手指触摸点距离自身控件上边缘的长度(自身控件在这里为GridView)

也就是说getX()和getY()是以自身控件的左上角为(0,0)坐标来计算的。

ev.getRawX():手指触摸点距离屏幕左边缘的长度

ev.getRawY():手指触摸点距离屏幕上边缘的长度

也就是说getRawX()和getRawY()是以手机屏幕的左上角为(0,0)坐标来计算的

手指拖拽某一个item移动的时候,移动当然涉及到item位置的变化,item会随着手指的移动而出现在屏幕上的不同位置,具体怎么画这个位置其实是根据item左上角相对于屏幕的坐标值以及item自身的宽和高来进行绘制的。怎么计算出来手指移动的时候拖拽的那个item相对于左上角相对于屏幕的坐标呢?

观察上图,就可以计算出item左上角相对于屏幕的坐标值了。分两步

1)计算出手机触摸点相对于item的坐标值(itemViewX,itemViewY)

itemViewX= ev.getX() -item.getLeft();

itemViewY= ev.getY()-item.getTop();

2)item左上角相对于屏幕的坐标值也就是触摸点距离屏幕左边的距离和距离屏幕上边的距离的值。设该坐标值为(x,y)

所以x =ev.getRawX()-itemViewX;y = ev.getRawY()-itemViewY;

获取拖拽的View

我们知道GridView里面的item都是从相应的adapter获取的getView方法绘制出来的,但是在这里你不要认为你拖动的就是getView方法返回的那个view,事实上是该view通过相关代码转换成的一个ImageView,说白了就是你手指拖拽的那个东东就是一个ImageView。

item转成ImageView相关转换的代码如下所示(该代码是在onItemLongClick方法里实现的):

ViewGroup dragViewGroup = (ViewGroup) getChildAt(startPosition- 

getFirstVisiblePosition());

dragViewGroup.destroyDrawingCache();

dragViewGroup.setDrawingCacheEnabled(true);

Bitmap dragBitmap = Bitmap.createBitmap(dragViewGroup.getDrawingCache());

startDrag(dragBitmap, (int) ev.getRawX(),(int) ev.getRawY());

startDrag的代码如下,该方法就是就是把Bitmap转换成了ImageView,初始化该ImageIView的位置并添加到windowManager中去。

protected void startDrag(Bitmap dragBitmap,int rawX,int rawY) {

windowParams =new WindowManager.LayoutParams();

windowParams.gravity = Gravity.TOP | Gravity.LEFT;

// 计算item左上角的坐标值,初始化ImageView所在的位置

windowParams.x = rawX - itemViewX;

windowParams.y = rawY - itemViewY;

// 放大dragScale倍,可以设置拖动后的倍数

windowParams.width = (int) (dragScale * dragBitmap.getWidth());

windowParams.height = (int) (dragScale * dragBitmap.getHeight());

windowParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE

| WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE

| WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON

| WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN;

windowParams.format = PixelFormat.TRANSLUCENT;

windowParams.windowAnimations =0;

//item生成

ImageView iv =newImageView(getContext());

iv.setImageBitmap(dragBitmap);

windowManager = (WindowManager) getContext().getSystemService(

Context.WINDOW_SERVICE);//"window"

windowManager.addView(iv, windowParams);

//保存生成的imageView

dragImageView = iv;

}

既然有startDrag,肯定有stopDrag()方法,不难猜出stopDrag方法主要功能是从windowManager方法中删除startDrag方法中添加的imageView;

/** 停止的拖动,把之前拖动的那个item从windowManage里面remove掉 **/

private void stopDrag() {

if(dragImageView !=null) {

windowManager.removeView(dragImageView);

dragImageView =null;

 }

}

阶段性小结:到此为止主要是为了说明item怎么转换成ImageView的,你所拖动的就是这个ImageView,怎么要让这个ImageView随着手指的移动而移动呢?下面就具体说明。手指移动响应的是MotionEvent.ACTION_MOVE事件,随着手指的移动变化的是ImageView左上角焦点的变化。实际上就是ev.getRawX()和ev.getRawY()的变化。通过这两个值和前面说的itemViewX和itemViewY的值很容易计算出随着手指的移动ImageView的坐标点的值,并随时更新窗口就可以了。

private void onDrag(intrawx,intrawy) {

if(dragImageView !=null) {

// 设置窗口的透明度

windowParams.alpha =0.6f;

// 重新计算此时item的x和y坐标的位置

windowParams.x = rawx - itemViewX;

windowParams.y = rawy - itemViewY;

// 更新view的布局,也就是重新绘制它的位置

windowManager.updateViewLayout(dragImageView, windowParams);

}

}


当然这个onDrag方法是在onTouchEvent方法中调用的,代码如下:

@Override

public boolean onTouchEvent(MotionEvent ev) {

if(dragImageView !=null&& startPosition != AdapterView.INVALID_POSITION) {

......

switch(ev.getAction()) {

caseMotionEvent.ACTION_MOVE:// 当手势移动的时候

Log.e(tag,"--on moving--");

onDrag((int) ev.getRawX(), (int) ev.getRawY());

//移动其他的item此处先省略

.....

break;

caseMotionEvent.ACTION_UP:

// 手指抬起的时候让drawImageView从windowManage里删除

stopDrag();

....

requestDisallowInterceptTouchEvent(false);

break;

}

}

returnsuper.onTouchEvent(ev);

}

第二部分拖拽过程中相关item的移动处理



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容