HardBirch

说说Android桌面(Launcher应用)背后的故事(八)——让桌面的精灵穿越起来

时间:11-12-16 栏目:安卓学习笔记 作者:张飞不张,文采横飞 评论:10 点击: 6,181 次

           有了前面的工作,基本上这个桌面就已经像模像样了,但是,和系统自带的Launcher相比,还差得很远。其中,系统Launcher的桌面上的item是可以任意穿越(移动)的。同时,在其穿越的过程中,你也可以将其kill掉。在这篇文章中,就让我们来看看桌面上的精灵如何实现她们穿越的梦想….

         系统Launcher为了实现item的拖拽,可谓下了很大的功夫,面面俱到。为了实现拖拽的功能,其定义了一组比较抽象的概念:拖拽源(DragSource);拖拽目的地(DragTarget);拖拽控制器(DragController);和拖拽界面(DragLayer)。DragSource主要用来表示桌面上的item可以从哪些位置被拖动,这里的“哪些位置”就是用DragSource来标识。比如,系统Launcher中的Workspace,AllAppsGridView,Folder都是DragSource,也就是在这些位置里的item可以被拖拽。DragTarget则对应的,表示可以容纳一个item的位置。比如,系统Launcher中的Workspace,Folder,DeleteZone就是DragTarget,也就是我们可以拖着某个item在这些位置上放下,item就被移到这个位置了。同时,为了处理多个桌面之间的拖动,其定义了一个DragScroller来负责处理多个桌面之间拖动的时候的逻辑。一个item在桌面上的生命周期有来,自然也得有去的时候,拖拽的时候,桌面下方的某块区域固定为删除区域(DeleteZone),这样,当被拖拽的item在这个区域内被释放的时候,就意味着其在桌面上生命的结束。

有了这个基本的了解,再进入代码中寻求更细的答案就不再费事了。下面,就让我们继续实现我们未完成的功能:

我们知道,前面的部分,所有的动作都是始于用户长按桌面某个空白的区域,那么当用户长按的是桌面上的某个item,我们要处理什么呢?对,就是拖拽了。所以,在Launcher中的onLongClick事件中,我们要加入长按某个item的处理。完整的onLongClick方法如下:

 /** * 在这个方法中需要判断当前长按的事件是在空白的区域还是某个item */ @Override public boolean onLongClick(View v) { //ActivityUtils.alert(getApplication(), "长按"); if(!(v instanceof UorderCellLayout)){ v = (View)v.getParent(); //如果当前点击的是item,得到其父控件,即UorderCellLayout } CellInfo cellInfo = (CellInfo)v.getTag(); //这里获取cellInfo信息 if(cellInfo == null){ Log.v(TAG, "CellInfo is null"); return true; } //Log.v(TAG, ""+cellInfo.toString()); /** * 注意,我们在CellLayout中获取当前位置信息的时候,就一并判断了当前位置上是否是item,如果是,则将 * item保存在cellinfo.view中 */ if(cellInfo.view == null){ //说明是空白区域 Log.v(TAG, "onLongClick,cellInfo.valid:"+cellInfo.valid); if(cellInfo.valid){ //如果是有效的区域 addCellInfo = cellInfo; showPasswordDialog(REQUEST_CODE_SETUP, null); } }else{ //处理拖拽 mWorkspace.startDrag(cellInfo); } return true; }

 

在这个方法中当判断当前用户长按的是一个item的时候,执行mWorkspace.startDrag(cellInfo);所以,我们进入这个方法中看看其处理逻辑:

 /** * 开始拖拽,这个方法并不真正处理拖拽行为,而是交付给DragController来完成 * @param cellInfo */ public void startDrag(UorderCellLayout.CellInfo cellInfo){ View child = cellInfo.view; UorderCellLayout layout = (UorderCellLayout)getChildAt(mCurrentScreen); layout.onDragChild(child); cellInfo.screen = mCurrentScreen; //启动拖拽 mDragController.startDrag(this, child, cellInfo); invalidate(); }

 

在这个方法中,只是做了一些辅助的处理,真正实现拖拽的是DragController接口的实现者。那么,到这里,就自然的追溯到Workspace布局控件的父控件DragLayer控件了。接下来,就让我们进入DragLayer中一探item移动的秘密:

由于DragLayer实现了DragController接口,所以,我们先从刚刚中断的地方开始,先来看看startDrag中的逻辑,在这个方法里,屏蔽了输入法,创建了移动的Bitmap,同时,放大了一定的倍数,并设置了相关的动画参数。完整的代码如下:

 public void startDrag(UorderWorkspace workspace, View v, CellInfo cellInfo) { Log.v(TAG, "开始拖拽..."); //隐藏输入法 if(mInputManager == null){ mInputManager = (InputMethodManager)getContext().getSystemService(Context.INPUT_METHOD_SERVICE); } mInputManager.hideSoftInputFromWindow(getWindowToken(), 0); if(mDragListener != null){ mDragListener.onDragStart(); } Log.w(TAG, "当前view的scrollX,scrollY:"+v.getScrollX()+","+v.getScrollY()); mDragRect.set(v.getScrollX(), v.getScrollY(), 0, 0); offsetDescendantRectToMyCoords(v, mDragRect); //将孩子的坐标系移到父坐标系中 //这里的mLastMotionX是在onInterceptTouchEvent中获取的 mTouchOffsetX = (int)(mLastMotionX - mDragRect.left); mTouchOffsetY = (int)(mLastMotionY - mDragRect.top); v.clearFocus(); v.setPressed(false); /** * 下面需要创建View对应的Bitmap,移动过程你看到的被你拖拽的对象是一个Bitmap对象 */ //设置绘制缓存 boolean willNotCache = v.willNotCacheDrawing(); v.setWillNotCacheDrawing(false); v.buildDrawingCache(); Bitmap bitmap = v.getDrawingCache(); int width = bitmap.getWidth(); int height = bitmap.getHeight(); /** * 我们知道,在Launcher中,我们长按某个item的时候,首先,一个动画效果将其弹起,并放大一定的倍数 * 这里,就是计算放大的倍数,并按照该放大倍数绘制Bitmap */ Matrix matrix = new Matrix(); float scaleFactor = v.getWidth(); //计算缩放比例 scaleFactor = (scaleFactor + SCALE_SIZE) /scaleFactor; matrix.setScale(scaleFactor, scaleFactor); //根据指定的缩放比例创建一个Bitmap mDragBitmap = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true); //清除绘制缓存 v.destroyDrawingCache(); v.setWillNotCacheDrawing(willNotCache); //计算缩放后的Bitmap与View的offset mBitmapOffsetX = (mDragBitmap.getWidth()-width) / 2; mBitmapOffsetY = (mDragBitmap.getHeight()-height) /2; //将原来的item保存,并隐藏掉 mOriginator = v; v.setVisibility(View.GONE); //根据scaleFactor指定动画起始大小 /** * 这个主要是为了让桌面上的item在被弹起的时候,有一个过渡的动画效果,以免突兀 * 这里设置初始值,在dispatchDraw中处理动画逻辑 */ mAnimationTo = 1.0f; mAnimationFrom = 1.0f / scaleFactor; mAnimationState = ANIMATION_STATE_STARTING; mAnimationType = ANIMATION_TYPE_SCALE; mAnimationDuration = ANIMATION_DURATION; mDragging = true; mDrawBitmaptPaint = mPaint; mWorkspace = workspace; mCellInfo = cellInfo; invalidate(); }

 

到了这里,长按桌面某个item,item放大的原理想必就一目了然了。那么其,从原始大小向放大后的Bitmap是如何过渡的呢?这个,就让我们再到dispatchDraw中一探究竟。在这个方法中,处理了这个过渡的动画效果,其实,就是设定一个动画时间,然后在这么长时间内才从原始大小渐变到放大后的大小。完整代码如下:

 /** * 在这个方法中,我们处理item从原始大小到放大后的大小的一个过渡效果 */ protected void dispatchDraw(Canvas canvas){ super.dispatchDraw(canvas); if(mDragging && mDragBitmap != null){ if(mAnimationState == ANIMATION_STATE_STARTING){ /** * 动画开始,记下当前时间 */ mAnimationState = ANIMATION_STATE_RUNNING; mAnimationStartTime = SystemClock.uptimeMillis(); } int left = (int)(mScrollX + mLastMotionX - mTouchOffsetX - mBitmapOffsetX); int top = (int)(mScrollY + mLastMotionY - mTouchOffsetY - mBitmapOffsetY); if(mAnimationState == ANIMATION_STATE_RUNNING){ //计算当前已经正常化了多少 float normalized = (float)(SystemClock.uptimeMillis()-mAnimationStartTime)/mAnimationDuration; if(normalized >= 1.0f){ mAnimationState = ANIMATION_STATE_DONE; } normalized = Math.min(normalized, 1.0f); float value = mAnimationFrom + (mAnimationTo - mAnimationFrom)*mAnimationDuration; if(mAnimationType == ANIMATION_TYPE_SCALE){ //缩放当前的mDragBitmap int width = mDragBitmap.getWidth(); int height = mDragBitmap.getHeight(); canvas.save(); canvas.translate(left, top); canvas.translate(width*(1.0f-value), height*(1.0f-value)); canvas.scale(value, value); canvas.drawBitmap(mDragBitmap, 0.0f, 0.0f, mDrawBitmaptPaint);//因为做了translate,所以这里是0.0 canvas.restore(); } }else{ //否则开始或者停止了,则按照当前的画 canvas.drawBitmap(mDragBitmap, left, top, mDrawBitmaptPaint); } } }

 

前面都只是拖拽的准备工作,接下来就要看看拖拽是如何实现的了,那么经过前面系列文章的分析,到这里,你应该有一个自然而然的直觉:到onTouchEvent中去寻找答案。呵呵,因为要处理拖拽,无非就是处理MOTION_MOVE等事件。在这里,处理了移动区域的重新绘制,以及判断当前item所在的位置是否为屏幕的边缘20dip以内,如果是的话,则需要将其移动到下一个屏幕。同时,也需要判断当前item所在的位置是否是删除区域,如果是删除区域的话则将绘制Bitmap的画笔加一个变色蒙版,也就是我们看到当我们拖拽item经过垃圾箱区域的时候,被捉拽的item就变成红色了。下面,看看该方法的完整逻辑:

 public boolean onTouchEvent(MotionEvent event){ if(!mDragging){ Log.v(TAG, "拖拽已经停止,传递到孩子"); return false; } final int action = event.getAction(); final float x = event.getX(); final float y = event.getY(); switch (action) { case MotionEvent.ACTION_DOWN: mLastMotionX = x; mLastMotionY = y; /** * 这里我们需要判断 * 我们规定屏幕左边和右边20dip以内为非拖拽区,这样当item停留在边缘的时候 * 就标示需要移到下一个屏幕,当然如果这个方向有下一个屏幕的话 */ if(x<NON_SCROLL_ZONE || x > getWidth()-NON_SCROLL_ZONE){ Log.v(TAG, "滑动到边缘"); mScrollState = SCROLL_STATE_WAITING_OUTSIZE; if(x<NON_SCROLL_ZONE){ scrollAction.setDirection(DIRECTION_LEFT); }else{ scrollAction.setDirection(DIRECTION_RIGHT); } postDelayed(scrollAction, SCROLL_DELAY); }else{ mScrollState = SCROLL_STATE_IN_ZONE; } break; case MotionEvent.ACTION_MOVE: final int scrollX = getScrollX(); final int scrollY = getScrollY(); final int touchOffsetX = mTouchOffsetX; final int touchOffsetY = mTouchOffsetY; final int bitmapOffsetX = mBitmapOffsetX; final int bitmapOffsetY = mBitmapOffsetY; //计算上一个位置 int left = (int)(scrollX + mLastMotionX - touchOffsetX - bitmapOffsetX); int top = (int)(scrollY + mLastMotionY - touchOffsetY - bitmapOffsetY); final int width = mDragBitmap.getWidth(); final int height = mDragBitmap.getHeight(); //上一个位置信息 mDragRect.set(left-1,top-1,width+left+1,height+top+1); mLastMotionX = x; mLastMotionY = y; left = (int)(scrollX + mLastMotionX - touchOffsetX - bitmapOffsetX); top = (int)(scrollY + mLastMotionY - touchOffsetY - bitmapOffsetY); //设置新的位置,将所有拖拽经过的区域叠加在一起 mDragRect.union(left-1, top-1, width+left+1, height+top+1); //这里判断当前被拖拽的item是否在垃圾箱区域 if(mDragListener != null){ Rect rect = new Rect(); int rawX = (int)(mLastMotionX - touchOffsetX - bitmapOffsetX); int rawY = (int)(mLastMotionY - touchOffsetY - bitmapOffsetY); rect.set(rawX, rawY, rawX+width, rawY+height); boolean inDeleteZone = mDragListener.onDragMove(rect); /** * 如果是在删除区域,则拖拽的item的绘制颜色需要加个变色蒙版,系统Launcher中是变红 */ if(inDeleteZone){ mDrawBitmaptPaint = mTrashPaint; }else{ mDrawBitmaptPaint = mPaint; } } //请求重新绘制拖拽区 invalidate(mDragRect); /** * 这里判断是否在边缘,如果是,则滑动到下一个屏幕 */ if(x<NON_SCROLL_ZONE){ //当当前状态从滑动区域滑到边缘的时候进行处理 if(mScrollState == SCROLL_STATE_IN_ZONE){ mScrollState = SCROLL_STATE_WAITING_OUTSIZE; scrollAction.setDirection(DIRECTION_LEFT); //延时一定的时间,就是我们看到在边缘时,其停顿了一段时间再滑向了下一个屏幕 postDelayed(scrollAction, SCROLL_DELAY); } }else if (x > getWidth() - NON_SCROLL_ZONE){ if(mScrollState == SCROLL_STATE_IN_ZONE){ Log.w(TAG, "滑动到下一个屏幕"); mScrollState = SCROLL_STATE_WAITING_OUTSIZE; scrollAction.setDirection(DIRECTION_RIGHT); postDelayed(scrollAction, SCROLL_DELAY); } }else{ mScrollState = SCROLL_STATE_IN_ZONE; } break; case MotionEvent.ACTION_UP: removeCallbacks(scrollAction); //stopDrag(); int rawX = (int)(mLastMotionX - mTouchOffsetX - mBitmapOffsetX); int rawY = (int)(mLastMotionY - mTouchOffsetY - mBitmapOffsetY); Rect rect = new Rect(); rect.set(rawX, rawY, rawX+mDragBitmap.getWidth(), rawY+mDragBitmap.getHeight()); stopDrag((int)x,(int)y, rect); break; default: break; } return true; }

 

上面的代码中在MOVE事件中进行了移动过程的处理。代码中,应该看到了,当item被拖到边缘20dip以内的位置,其执行的逻辑是:

scrollAction.setDirection(DIRECTION_RIGHT); postDelayed(scrollAction, SCROLL_DELAY);

其中,scollAction就是一个线程,由它来完成从一个屏幕滑动到另一个屏幕。这里需要注意的是:你所看到的滑动到下一个屏幕,其实,不是你在拖拽着item滑动到下一个屏幕的,而是,下一个屏幕滑动到当前手机窗口下的。所以,这个逻辑,不是应该由DragLayer来实现,而是由Workspace来实现。所以,Workspace实现了DragScroller接口,负责处理item滑动到下一个屏幕的逻辑。其中scrollAction对应的线程类代码如下:

 class ScrollRunnable implements Runnable{ private int mDirection; @Override public void run() { if(mDragScroller != null){ if(mDirection == DIRECTION_LEFT){ mDragScroller.scrollLeft(); }else{ mDragScroller.scrollRight(); } } } public void setDirection(int dir){ this.mDirection = dir; } }

 

其根据在ACTION_MOVE中计算的位置和方向来判断其滑动到下一个屏幕的方向。上面说了,眼前的滑动行为是下一个屏幕显示到了当前手机的窗口下,而不是当前的item真的被你拖到下一个屏幕的。所以,我们需要找到DragScroller的实现者:Workspace。在Workspace中,其执行了scrollLeft和scrollRight的逻辑:

 /** * {@inheritDoc} */ @Override public void scrollLeft() { if(mCurrentScreen != INVALID_SCREEN && mCurrentScreen > 0 && mScroller.isFinished()){ snapToScreen(mCurrentScreen-1); } } /** * {@inheritDoc} */ @Override public void scrollRight() { if(mCurrentScreen != INVALID_SCREEN && mCurrentScreen < getChildCount()-1 && mScroller.isFinished()){ snapToScreen(mCurrentScreen+1); } }

 

想必您还记得前面在Workspace分析的时候,其中的snapToScreen方法,不记得的话,可以到那里去寻找答案。好了,现在这个拖动的过程就这么实现了。那么,当我们停止拖拽释放了item,其又是如何被添加到新的位置或者被删除的呢?这个看上面ACTION_UP中的部分,调用了stopDrag方法。那么我们看看这个方法的逻辑。其实,这里很简单了,就是判断当前位置是否是删除区域,如果是执行删除逻辑,如果不是,则执行移动位置逻辑。代码如下:

 public void stopDrag(int x, int y, Rect dragRect){ if(mDragging){ mDragging = false; if(mDragBitmap != null){ mDragBitmap.recycle(); } UorderCellLayout screen = mWorkspace.getCurrentCellLayout(); Log.e(TAG, "当前屏幕是:"+mWorkspace.getCurrentScreen()); Log.e(TAG, "被移动项所在的屏幕是"+mCellInfo.screen); if(mDragListener != null){ boolean inDeleteZone = mDragListener.onDragStop(dragRect); if(inDeleteZone){ //删除这个item screen.removeView(mOriginator); invalidate(); ItemInfo info = (ItemInfo)mOriginator.getTag(); UorderDBUtils.deleteItemFromDB(getContext(), info); return; } } //将当前x,y所在的坐标转换为当前屏幕中的单元格 final int[] cellXY = new int[2]; screen.pointToCellExact(x, y, cellXY); final CellInfo cellInfo = mCellInfo; cellInfo.cellX = cellXY[0]; cellInfo.cellY = cellXY[1]; cellInfo.cellHSpan = 1; cellInfo.cellVSpan = 1; Log.e(TAG, "移动后的单元格:"+cellXY[0]+","+cellXY[1]); //调用Workspace的方法,来移动当前的项 mWorkspace.moveShortcutOnDesk(mOriginator, cellInfo); if(mOriginator != null){ mOriginator.setVisibility(View.VISIBLE); } } invalidate(); }

 

上面的代码很简单,就是判断了其是否在删除区域内,如果不是调用mWorkspace.moveShortcutOnDesk(mOriginator, cellInfo);方法来完成位置的移动。那么,我们来看看这个方法,这个方法中的逻辑就是分两种情况,如果是在同一个屏幕中移动,则直接根据新的位置重新绘制就可以了,但是如果移动前和移动后不在同一个屏幕,则需要将原来的屏幕上的给删掉,在新的屏幕上添加。代码如下:

 /** * 用户长拖拽一个item移动,当其停止的时候,就根据其最新的位置,将其显示在当前最新的位置 * 同时需要更新数据库 * @param v * @param cellInfo */ public void moveShortcutOnDesk(View v, CellInfo cellInfo){ int screen = cellInfo.screen; /** * 这里需要分为两种情况来进行处理, * 1、如果在同一个CellLayout中移动,则很简单,直接设置新的位置,然后让该CellLayout重新绘制就行了 * 2、如果移动到了另一个CellLayout中,则首先需要将View从原来的CellLayout中删除掉,然后再将其添加到 * 当前屏幕的CellLayout中 */ if(screen != mCurrentScreen){ UorderCellLayout lastScreen = getCellLayout(screen); lastScreen.removeView(v); this.addInScreen(v, mCurrentScreen, cellInfo.cellX, cellInfo.cellY, cellInfo.cellHSpan, cellInfo.cellVSpan, false); }else{ UorderCellLayout group = getCurrentCellLayout(); UorderCellLayout.LayoutParams lp = (UorderCellLayout.LayoutParams)v.getLayoutParams(); lp.cellX = cellInfo.cellX; lp.cellY = cellInfo.cellY; lp.cellHSpan = cellInfo.cellHSpan; lp.cellVSpan = cellInfo.cellVSpan; group.invalidate(); } /** * 同时需要将移动后的新位置同步到数据库 */ ItemInfo item = (ItemInfo)v.getTag(); item.cellX = cellInfo.cellX; item.cellY = cellInfo.cellY; item.spanX = cellInfo.cellHSpan; item.spanY = cellInfo.cellVSpan; item.screen = mCurrentScreen; UorderDBUtils.moveItemInDB(getContext(), item); }

 

如果你对其中的一些关于拖拽的细节还不是很清楚,那么你可以看看前面两篇关于拖拽的文章,它们可以帮你很好的理解拖拽的细节性问题。

到这里,完整的item拖拽过程就介绍完毕了。我们的桌面也越来越接近系统Launcher了。但是,我们现在只支持向桌面添加Application和Shortcut,是只占据一个单元格的最简单的item了。还无法向桌面添加各式各样的Widget以及文件夹等功能。但是不要心急,什么事情都有个先后顺序,都是从简单到复杂的。

下一篇我们就要介绍如何让我们的桌面也支持各种Widget(小部件)。

说说Android桌面(Launcher应用)背后的故事(八)——让桌面的精灵穿越起来:目前有10 条留言

  1. 我想让两个item交换位置,就是长按一个item拖拽放到另一个item上,他们两个互换位置。这个该如何去实现呢

    2012-01-13 16:29 [回复]
  2. [reply]rambo19840696[/reply]
    这个很简单啊,获取被覆盖区域的item,交换两个item的布局LayoutParam的信息,重新请求布局就OK了!

    2012-01-15 21:43 [回复]
  3. 如何获得被覆盖区域的item,求详细代码,谢谢。
    留个邮箱dante198406@gmail.com

    2012-01-16 09:34 [回复]
  4. [reply]rambo19840696[/reply]
    其实很简单啊。你怎么知道你长按的区域是一个item而不是空白呢?前面系列3中已经讨论了。其实就是对当前CellLayout中所有的Child循环遍历,然后看看哪个Child包含了当前事件的坐标,那么就可以获得当前的item了。代码就是Google的Launcher,你可以从网上下一个看看。

    2012-01-17 09:04 [回复]
  5. [reply]chenjie19891104[/reply]
    好的,谢谢

    2012-01-17 09:37 [回复]
  6. 5楼
    ritterliu:

    [reply]rambo19840696[/reply]
    可以参考下folder中的realTimeReorder()

    2012-04-16 09:48 [回复]
  7. 4楼
    zhanwei_30:

    谢谢 很详细哟

    2012-04-24 10:18 [回复]
  8. 地板
    wowoshi111:

    楼主,你太强大了,向你好好学习~

    2012-05-22 20:24 [回复]
  9. 板凳
    zstarx1127:

    楼主,首先支持下,文章真的分析的很不错,但是还是有些地方不太明白,我现在想把Android系统的Launcher2该成IPhone的桌面效果,途中我遇到了文件夹效果蒙了不会了,那个拖动头疼了看了几天还是不太明白。还望给指点一下,我拖动一个应用到另一应用上边怎样让它直接就进入进入到文件夹里。

    2012-06-08 22:45 [回复]
  10. 沙发
    misly_vinky:

    如何在启动launcher的时候将已安装的应用的快捷方式添加到原生界面,而不是放入到gridview中,从gridview中拖到原生界面呢

    2012-10-07 19:59 [回复]

发表评论


QQ群互动

Linux系统与内核学习群:194051772

WP建站技术学习交流群:194062106

魔豆之路QR

魔豆的Linux内核之路

魔豆的Linux内核之路

优秀工程师当看优秀书籍

优秀程序员,要看优秀书!

赞助商广告

友荐云推荐