參考文章：
https://www.jianshu.com/p/ed2721286778
先看下效果：
代碼如下，詳細的步驟說明都在代碼註釋當中了：
佈局文件：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.source.api28.path.QQMsgView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#cc000000"
app:bubble_color="#ff0000"
app:bubble_radius="10dp"
app:bubble_text="12"
app:bubble_textColor="#fff"
app:bubble_textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
/**
* 仿QQ未讀消息拖拽粘性效果的實現
*/
public class QQMsgView extends View {
/**
* 氣泡默認狀態--靜止
*/
private final int BUBBLE_STATE_DEFAULT = 0;
/**
* 氣泡相連
*/
private final int BUBBLE_STATE_CONNECT = 1;
/**
* 氣泡分離
*/
private final int BUBBLE_STATE_APART = 2;
/**
* 氣泡消失
*/
private final int BUBBLE_STATE_DISMISS = 3;
/**
* 氣泡半徑
*/
private float mBubbleRadius;
/**
* 氣泡顏色
*/
private int mBubbleColor;
/**
* 氣泡消息文字
*/
private String mTextStr;
/**
* 氣泡消息文字顏色
*/
private int mTextColor;
/**
* 氣泡消息文字大小
*/
private float mTextSize;
/**
* 不動氣泡的半徑
*/
private float mBubFixedRadius;
/**
* 可動氣泡的半徑
*/
private float mBubMovableRadius;
/**
* 不動氣泡的圓心
*/
private PointF mBubFixedCenter;
/**
* 可動氣泡的圓心
*/
private PointF mBubMovableCenter;
/**
* 氣泡的畫筆
*/
private Paint mBubblePaint;
/**
* 貝塞爾曲線path
*/
private Path mBezierPath;
private Paint mTextPaint;
//文本繪製區域
private Rect mTextRect;
private Paint mBurstPaint;
//爆炸繪製區域
private Rect mBurstRect;
/**
* 氣泡狀態標誌
*/
private int mBubbleState = BUBBLE_STATE_DEFAULT;
/**
* 兩氣泡圓心距離
*/
private float mDist;
/**
* 氣泡相連狀態最大圓心距離
*/
private float mMaxDist;
/**
* 手指觸摸偏移量
*/
private final float MOVE_OFFSET;
/**
* 氣泡爆炸的bitmap數組
*/
private Bitmap[] mBurstBitmapsArray;
/**
* 是否在執行氣泡爆炸動畫
*/
private boolean mIsBurstAnimStart = false;
/**
* 當前氣泡爆炸圖片index
*/
private int mCurDrawableIndex;
/**
* 氣泡爆炸的圖片id數組
*/
private int[] mBurstDrawablesArray = {R.mipmap.burst_1, R.mipmap.burst_2, R.mipmap.burst_3, R.mipmap.burst_4, R.mipmap.burst_5};
public QQMsgView(Context context) {
this(context, null);
}
public QQMsgView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public QQMsgView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.DragBubbleView, defStyleAttr, 0);
mBubbleRadius = array.getDimension(R.styleable.DragBubbleView_bubble_radius, mBubbleRadius);
mBubbleColor = array.getColor(R.styleable.DragBubbleView_bubble_color, Color.RED);
mTextStr = array.getString(R.styleable.DragBubbleView_bubble_text);
mTextSize = array.getDimension(R.styleable.DragBubbleView_bubble_textSize, mTextSize);
mTextColor = array.getColor(R.styleable.DragBubbleView_bubble_textColor, Color.WHITE);
array.recycle();
//兩個圓半徑大小一致
mBubFixedRadius = mBubbleRadius;
mBubMovableRadius = mBubFixedRadius;
mMaxDist = 8 * mBubbleRadius;
MOVE_OFFSET = mMaxDist / 4;
//抗鋸齒
mBubblePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBubblePaint.setColor(mBubbleColor);
mBubblePaint.setStyle(Paint.Style.FILL);
mBezierPath = new Path();
//文本畫筆
mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setColor(mTextColor);
mTextPaint.setTextSize(mTextSize);
mTextRect = new Rect();
//爆炸畫筆
mBurstPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBurstPaint.setFilterBitmap(true);
mBurstRect = new Rect();
mBurstBitmapsArray = new Bitmap[mBurstDrawablesArray.length];
for (int i = 0; i < mBurstDrawablesArray.length; i++) {
//將氣泡爆炸的drawable轉爲bitmap
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), mBurstDrawablesArray[i]);
mBurstBitmapsArray[i] = bitmap;
}
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mBubbleState = BUBBLE_STATE_DEFAULT;
//設置固定氣泡圓心初始座標
if (mBubFixedCenter == null) {
mBubFixedCenter = new PointF(w / 2, h / 2);
} else {
mBubFixedCenter.set(w / 2, h / 2);
}
//設置可動氣泡圓心初始座標
if (mBubMovableCenter == null) {
mBubMovableCenter = new PointF(w / 2, h / 2);
} else {
mBubMovableCenter.set(w / 2, h / 2);
}
}
@Override
protected void onDraw(Canvas canvas) {
//1. 連接情況繪製貝塞爾曲線 2.繪製圓背景以及文本 3.另外端點繪製一個圓
//1. 靜止狀態 2，連接狀態 3，分離狀態 4，消失
if (mBubbleState == BUBBLE_STATE_CONNECT) {
//繪製靜止的氣泡
canvas.drawCircle(mBubFixedCenter.x, mBubFixedCenter.y, mBubFixedRadius, mBubblePaint);
//計算控制點的座標
int iAnchorX = (int) ((mBubMovableCenter.x + mBubFixedCenter.x) / 2);
int iAnchorY = (int) ((mBubMovableCenter.y + mBubFixedCenter.y) / 2);
float sinTheta = (mBubMovableCenter.y - mBubFixedCenter.y) / mDist;
float cosTheta = (mBubMovableCenter.x - mBubFixedCenter.x) / mDist;
//D
float iBubFixedStartX = mBubFixedCenter.x - mBubFixedRadius * sinTheta;
float iBubFixedStartY = mBubFixedCenter.y + mBubFixedRadius * cosTheta;
//C
float iBubMovableEndX = mBubMovableCenter.x - mBubMovableRadius * sinTheta;
float iBubMovableEndY = mBubMovableCenter.y + mBubMovableRadius * cosTheta;
//A
float iBubFixedEndX = mBubFixedCenter.x + mBubFixedRadius * sinTheta;
float iBubFixedEndY = mBubFixedCenter.y - mBubFixedRadius * cosTheta;
//B
float iBubMovableStartX = mBubMovableCenter.x + mBubMovableRadius * sinTheta;
float iBubMovableStartY = mBubMovableCenter.y - mBubMovableRadius * cosTheta;
mBezierPath.reset();
mBezierPath.moveTo(iBubFixedStartX, iBubFixedStartY);
mBezierPath.quadTo(iAnchorX, iAnchorY, iBubMovableEndX, iBubMovableEndY);
mBezierPath.lineTo(iBubMovableStartX, iBubMovableStartY);
mBezierPath.quadTo(iAnchorX, iAnchorY, iBubFixedEndX, iBubFixedEndY);
mBezierPath.close();
canvas.drawPath(mBezierPath, mBubblePaint);
}
//靜止，連接，分離狀態都需要繪製圓背景以及文本
if (mBubbleState != BUBBLE_STATE_DISMISS) {
canvas.drawCircle(mBubMovableCenter.x, mBubMovableCenter.y, mBubMovableRadius, mBubblePaint);
mTextPaint.getTextBounds(mTextStr, 0, mTextStr.length(), mTextRect);
canvas.drawText(mTextStr, mBubMovableCenter.x - mTextRect.width() / 2, mBubMovableCenter.y + mTextRect.height() / 2, mTextPaint);
}
// 認爲是消失狀態，執行爆炸動畫
if (mBubbleState == BUBBLE_STATE_DISMISS && mCurDrawableIndex < mBurstBitmapsArray.length) {
mBurstRect.set((int) (mBubMovableCenter.x - mBubMovableRadius),
(int) (mBubMovableCenter.y - mBubMovableRadius),
(int) (mBubMovableCenter.x + mBubMovableRadius),
(int) (mBubMovableCenter.y + mBubMovableRadius));
canvas.drawBitmap(mBurstBitmapsArray[mCurDrawableIndex], null, mBurstRect, mBubblePaint);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (mBubbleState != BUBBLE_STATE_DISMISS) {
mDist = (float) Math.hypot(event.getX() - mBubFixedCenter.x, event.getY() - mBubFixedCenter.y);
if (mDist < mBubbleRadius + MOVE_OFFSET) {
//加上MOVE_OFFSET是爲了方便拖拽
mBubbleState = BUBBLE_STATE_CONNECT;
} else {
mBubbleState = BUBBLE_STATE_DEFAULT;
}
}
break;
case MotionEvent.ACTION_MOVE:
if (mBubbleState != BUBBLE_STATE_DEFAULT) {
mDist = (float) Math.hypot(event.getX() - mBubFixedCenter.x, event.getY() - mBubFixedCenter.y);
mBubMovableCenter.x = event.getX();
mBubMovableCenter.y = event.getY();
if (mBubbleState == BUBBLE_STATE_CONNECT) {
if (mDist < mMaxDist - MOVE_OFFSET) {
mBubFixedRadius = mBubbleRadius - mDist / 8;
} else {
mBubbleState = BUBBLE_STATE_APART;
}
}
invalidate();
}
break;
case MotionEvent.ACTION_UP:
if (mBubbleState == BUBBLE_STATE_CONNECT) {
// 橡皮筋動畫
startBubbleRestAnim();
} else if (mBubbleState == BUBBLE_STATE_APART) {
if (mDist < 2 * mBubbleRadius) {
//反彈動畫
startBubbleRestAnim();
} else {
// 爆炸動畫
startBubbleBurstAnim();
}
}
break;
}
return true;
}
/**
* 連接狀態下鬆開手指，執行類似橡皮筋動畫
*/
private void startBubbleRestAnim() {
ValueAnimator anim;
anim = ValueAnimator.ofObject(new PointFEvaluator(),
new PointF(mBubMovableCenter.x, mBubMovableCenter.y),
new PointF(mBubFixedCenter.x, mBubFixedCenter.y));
anim.setDuration(200);
anim.setInterpolator(new OvershootInterpolator(5f));
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mBubMovableCenter = (PointF) animation.getAnimatedValue();
invalidate();
}
});
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mBubbleState = BUBBLE_STATE_DEFAULT;
}
});
anim.start();
}
/**
* 爆炸動畫
*/
private void startBubbleBurstAnim() {
//將氣泡改成消失狀態
mBubbleState = BUBBLE_STATE_DISMISS;
ValueAnimator animator = ValueAnimator.ofInt(0, mBurstBitmapsArray.length);
animator.setInterpolator(new LinearInterpolator());
animator.setDuration(500);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCurDrawableIndex = (int) animation.getAnimatedValue();
invalidate();
}
});
animator.start();
}
}