Android使用ViewDragHelper實(shí)現(xiàn)QQ聊天氣泡拖動(dòng)效果

更新時(shí)間：2021年04月23日 09:04:04 作者：sinat_26503455

這篇文章主要為大家詳細(xì)介紹了Android使用ViewDragHelper實(shí)現(xiàn)QQ聊天氣泡拖動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

QQ聊天氣泡拖動(dòng)效果Android實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下

概述

本文的目的是實(shí)現(xiàn)類(lèi)似于QQ消息提醒的氣泡的拖拽效果。網(wǎng)上已有大神的實(shí)現(xiàn)效果是通過(guò)監(jiān)聽(tīng)控件的OnTouchEvent事件的ACTION_DOWN,ACTION_MOVE,ACTION_UP事件來(lái)處理相應(yīng)的拖拽效果，這里采用ViewDragHelper的方式去實(shí)現(xiàn)拖拽，順便學(xué)習(xí)了一下ViewDragHelper的使用方式，拖拽時(shí)的粘連效果采用貝塞爾曲線來(lái)實(shí)現(xiàn)。

用ViewDragHelper實(shí)現(xiàn)拖拽效果

ViewDragHelper是Google在v4的支持包中提供的一款用來(lái)解決界面控件拖拽移動(dòng)問(wèn)題的類(lèi)，使用時(shí)首先要通過(guò)ViewDragHelper.create(ViewGroup forParent, float sensitivity, Callback cb)方法來(lái)獲取ViewDragHelper的實(shí)例對(duì)象，然后在需要支持拖拽的ViewGroup的onInterceptTouchEvent和onTouchEvent中添加代碼，最后我們需要寫(xiě)一個(gè)類(lèi)繼承ViewDragHelper.Callback，重寫(xiě)其中的方法，就能實(shí)現(xiàn)拖拽效果了。

為了實(shí)現(xiàn)拖拽效果，我們首先需要寫(xiě)一個(gè)類(lèi)DragLayout繼承LinearLayout，在其中的控件都可以利用ViewDragHelper實(shí)現(xiàn)拖拽效果，在DragLayout的初始化方法中我們獲取一個(gè)ViewDragHelper的實(shí)例

/**
 * @params ViewGroup forParent 必須是一個(gè)ViewGroup
 * @params float sensitivity 靈敏度
 * @params Callback cb 回調(diào)
 */
mDragHelper = ViewDragHelper.create(this, 1.0f, new ViewDragCallback());

三個(gè)參數(shù)中this就是當(dāng)前DragLayout類(lèi)，sensitivity表示拖拽的靈敏度，一般用1.0f即可，第三個(gè)參數(shù)即為ViewDragHelper.Callback類(lèi)型的拖拽回調(diào)，我們?cè)谥貙?xiě)回調(diào)中的函數(shù)就能實(shí)現(xiàn)拖拽效果，獲取到mDragHelper后我們需要在onInterceptTouchEvent和onTouchEvent中用mDragHelper控制屏幕的觸摸事件

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
 switch (ev.getAction()) {
  case MotionEvent.ACTION_CANCEL:
  case MotionEvent.ACTION_DOWN:
   mDragHelper.cancel(); // 相當(dāng)于調(diào)用 processTouchEvent收到ACTION_CANCEL
   break;
 }
 /**
  * 檢查是否可以攔截touch事件
  * 如果onInterceptTouchEvent可以return true 則這里return true
  */
 return mDragHelper.shouldInterceptTouchEvent(ev);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
 /**
  * 處理攔截到的事件
  * 這個(gè)方法會(huì)在返回前分發(fā)事件
  */
 mDragHelper.processTouchEvent(event);
 return true;
}

接下來(lái)就要去寫(xiě)一個(gè)類(lèi)繼承ViewDragHelper.Callback來(lái)實(shí)現(xiàn)拖拽效果了

private class ViewDragCallback extends ViewDragHelper.Callback {
 /**
  * 嘗試捕獲子view，一定要返回true
  *
  * @param view  嘗試捕獲的view
  * @param pointerId 指示器id？
  *     這里可以決定哪個(gè)子view可以拖動(dòng)
  */
 @Override
 public boolean tryCaptureView(View view, int pointerId) {
  if (view.getId() == R.id.tv_drag) {
   return true;
  } else {
   return false;
  }
 }

 /**
  * 處理水平方向上的拖動(dòng)
  *
  * @param child 被拖動(dòng)到view
  * @param left 移動(dòng)到達(dá)的x軸的距離
  * @param dx 建議的移動(dòng)的x距離
  */
 @Override
 public int clampViewPositionHorizontal(View child, int left, int dx) {
  // 兩個(gè)if主要是為了讓viewViewGroup里
  if (getPaddingLeft() > left) {
   return getPaddingLeft();
  }
  if (getWidth() - child.getWidth() < left) {
   return getWidth() - child.getWidth();
  }
  return left;
 }

 /**
  * 處理豎直方向上的拖動(dòng)
  *
  * @param child 被拖動(dòng)到view
  * @param top 移動(dòng)到達(dá)的y軸的距離
  * @param dy 建議的移動(dòng)的y距離
  */
 @Override
 public int clampViewPositionVertical(View child, int top, int dy) {
  // 兩個(gè)if主要是為了讓viewViewGroup里
  if (getPaddingTop() > top) {
   return getPaddingTop();
  }
  if (getHeight() - child.getHeight() < top) {
   return getHeight() - child.getHeight();
  }
  return top;
 }

 /**
  * 拖拽移動(dòng)時(shí)觸發(fā)的監(jiān)聽(tīng)函數(shù)
  * @param changedView 觸發(fā)該函數(shù)的View
  * @param left View左邊界坐標(biāo)
  * @param top View上邊界坐標(biāo)
  * @param dx 該次橫向移動(dòng)坐標(biāo)
  * @param dy 該次縱向移動(dòng)坐標(biāo)
  */
 @Override
 public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
   if (changedView.getId() == R.id.tv_drag) {
   System.out.println("left = " + left + ", top = " + top + "dx = " + dx + ", dy = " + dy);
   finalX = left;
   finalY = top;
   invalidate();
  }
  super.onViewPositionChanged(changedView, left, top, dx, dy);
 }

 /**
  * 拖拽手指離開(kāi)時(shí)回調(diào)
  * @param releasedChild 拖拽的控件
  * @param xvel 手指離開(kāi)屏幕時(shí)拖拽控件的x方向的速度
  * @param yvel 手指離開(kāi)屏幕時(shí)拖拽控件的y方向的速度
  */
 @Override
 public void onViewReleased(View releasedChild, float xvel, float yvel) {
  if (releasedChild == tvDot) {
   if (getCenterDistance() < 300) { //連接線條未消失
    mDragHelper.settleCapturedViewAt(dotOriX, dotOriY);
    invalidate();
   } else {
    showBomb();
   }
  }
 }
}

這里我們重寫(xiě)了上述方法：

tryCaptureView返回true表示該控件可以拖拽。
重寫(xiě)clampViewPositionHorizontal，clampViewPositionVertical以防止控件拖拽出父控件的范圍，如果不需控制拖拽范圍可不設(shè)置。
onViewPositionChanged方法用于記錄拖拽時(shí)控件的坐標(biāo)，onViewReleased方法用于在拖拽停止時(shí)進(jìn)行相關(guān)操作。

在拖拽結(jié)束時(shí)我們判斷如果與初始距離小于300，則讓控件回到初始位置，如果大于三百則顯示氣泡爆炸動(dòng)畫(huà)。小于300時(shí)調(diào)用

mDragHelper.settleCapturedViewAt(dotOriX, dotOriY);
invalidate();

其中dotOriX，dotOriY是拖拽控件的原始位置，mDragHelper.settleCapturedViewAt(dotOriX, dotOriY)同時(shí)invalidate()刷新繪制后控件就會(huì)滾回原始位置，這里我們要注意重寫(xiě)DragLayout的computeScroll才能有滾動(dòng)回去的效果。

@Override
public void computeScroll() {
 if (mDragHelper.continueSettling(true)) {
  invalidate();
 }
}

至此我們就實(shí)現(xiàn)了拖拽和滾回原始位置的效果。

粘連氣泡的實(shí)現(xiàn)

實(shí)現(xiàn)粘連氣泡需要在onDraw方法中畫(huà)出連接兩個(gè)小球的連線，同時(shí)需要根據(jù)滑動(dòng)距離畫(huà)出一個(gè)逐漸縮小的原始小球。

在onDraw方法中實(shí)現(xiàn)相關(guān)功能前我們要注意，出于效率的考慮，ViewGroup 默認(rèn)會(huì)繞過(guò) onDraw() 方法，我們需要在其初始化時(shí)調(diào)用setWillNotDraw(false)方法來(lái)讓ViewGroup的onDraw方法執(zhí)行。

在布局開(kāi)始的onLayout方法中我們獲取小球的大小和初始位置

dotOriX = tvDot.getLeft();
dotOriY = tvDot.getTop();
dotWidth = tvDot.getRight() - tvDot.getLeft();
dotHeight = tvDot.getBottom() - tvDot.getTop();
finalX = tvDot.getLeft();
finalY = tvDot.getTop();

然后在ViewDragHelper.Callback的onViewPositionChanged回調(diào)中獲得拖拽的位置，畫(huà)出兩者之間的連線，由于大于一定距離時(shí)連線消失，我們需要一個(gè)變量showDragLine控制連線是否繪制。

@Override
protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 if (showDragLine) {
  double distance = getCenterDistance();
  int initRadius = (dotWidth / 2);
  int finalRadius;
  if (distance >= 300) {
   finalRadius = 10;
  } else {
   finalRadius = ((300 - distance) * initRadius / 300) < 10 ? 10 : (int) ((300 - distance) * initRadius / 300);
  }
  if (distance < 300) {
   drawOval(dotOriX + dotWidth / 2, dotOriY + dotHeight / 2, finalRadius, canvas);
   Path path = drawAdhesionBody(dotOriX + dotWidth / 2, dotOriY + dotHeight / 2, finalRadius, 90f,
     finalX + dotWidth / 2, finalY + dotHeight / 2, dotHeight / 2, 45f);
   canvas.drawPath(path, mPaint);
  } else {
   showDragLine = false;
  }
 }
}

當(dāng)距離小于300時(shí)，drawOval方法在原始位置畫(huà)一個(gè)隨距離增大而變小的圓，同時(shí)獲取貝塞爾曲線的Path并且用drawAdhesionBody方法畫(huà)出，畫(huà)貝塞爾曲線原理圖如下

釋放時(shí)爆炸效果的實(shí)現(xiàn)

在釋放控件后判斷，如果釋放距離離原始距離大于閾值，就讓小球消失并且顯示爆炸動(dòng)畫(huà)，由于爆炸的小球是不規(guī)則的動(dòng)畫(huà)，所以只能通過(guò)gif的展示或者屬性動(dòng)畫(huà)畫(huà)出一幀一幀圖片來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果，這里我參考了仿qq消息氣泡拖拽，貝賽爾曲線的實(shí)現(xiàn)，利用屬性動(dòng)畫(huà)來(lái)實(shí)現(xiàn)該效果。

/**
 * 展示爆炸特效
 */
private void showBomb() {
 tvDot.setVisibility(GONE);
 mIsExplosionAnimStart = true;
 //做一個(gè)int型屬性動(dòng)畫(huà)，從0開(kāi)始，到氣泡爆炸圖片數(shù)組個(gè)數(shù)結(jié)束
 ValueAnimator anim = ValueAnimator.ofInt(0, mExplosionDrawables.length);
 anim.setInterpolator(new LinearInterpolator());
 anim.setDuration(500);
 anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
   //拿到當(dāng)前的值并重繪
   mCurExplosionIndex = (int) animation.getAnimatedValue();
   invalidate();
  }
 });
 anim.addListener(new AnimatorListenerAdapter() {
  @Override
  public void onAnimationEnd(Animator animation) {
   //動(dòng)畫(huà)結(jié)束后改變狀態(tài)
   mIsExplosionAnimStart = false;
  }
 });
 anim.start();
}

同時(shí)在onDraw方法中適時(shí)的繪制出爆炸效果

@Override
protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 if (mIsExplosionAnimStart && mCurExplosionIndex < mExplosionDrawables.length) {
  //設(shè)置氣泡爆炸圖片的位置
  mExplosionRect.set((int) (finalX), (int) (finalY)
    , (int) (finalX+dotWidth), (int) (finalY+dotHeight));
  //根據(jù)當(dāng)前進(jìn)行到爆炸氣泡的位置index來(lái)繪制爆炸氣泡bitmap
  canvas.drawBitmap(mExplosionBitmaps[mCurExplosionIndex], null, mExplosionRect, mExplosionPaint);
 }
}

總結(jié)

這個(gè)仿QQ氣泡拖拽效果只是實(shí)現(xiàn)了具體的效果，如果需要集成到項(xiàng)目中需要具體改動(dòng)并封裝一些東西，另外在爆炸效果的處理上覺(jué)得應(yīng)該有比圖片屬性動(dòng)畫(huà)更高效的繪制方式，只是限于個(gè)人水平所限暫時(shí)還未能想到。

項(xiàng)目地址：QQBubble

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: