首先我們來看一下最終的效果：

Android自定義View實作QQ氣泡效果View自定義屬性定義氣泡狀态設定觸摸事件

根據我們上邊拆分出來的公式，我們分别看看每一個效果需要如何去實作：

紅色圓：canvas.drawCircle

消息數字：canvas.drawText

拖拽粘性效果：canvas.drawPath、（兩條二階）貝塞爾曲線（精髓所在）

回彈效果：屬性動畫

跟随移動：OnTouchEvent處理MotionEvent.ACTION_MOVE事件

爆炸效果：屬性動畫

View自定義屬性

為了提高自定義View的靈活性，我們需要提供幾種自定義屬性給外部來設定，有如下屬性：

氣泡半徑：bubble_radius

氣泡顔色：bubble_color

氣泡消息數字：bubble_text

氣泡消息數字字型大小：bubble_textSize

氣泡消息數字顔色：bubble_textColor

屬性定義

在res -> values下添加如下attrs.xml檔案:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="DragBubbleView">
        <attr name="bubble_radius" format="dimension"/>
        <attr name="bubble_color" format="color"/>
        <attr name="bubble_text" format="string"/>
        <attr name="bubble_textSize" format="dimension"/>
        <attr name="bubble_textColor" format="color"/>
    </declare-styleable>
</resources>

在初始化方法中擷取這些屬性即可，下面完整代碼會列出了。

初始化兩個圓的圓心坐标

我們需要在View的size确定後初始化圓心坐标，是以需要在onSizeChanged中進行初始化。

@Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 設定兩個圓心初始位置在View中心位置，也可以通過自定義屬性将此屬性由外部自由設定
        //初始化不動氣泡的圓心
        if (mBubMoveableCenter == null){
            mBubMoveableCenter = new PointF(w / 2f, h / 2f);
        } else {
            mBubMoveableCenter.set(w / 2f, h / 2f);
        }

        //初始化可動氣泡的圓心
        if (mBubStillCenter == null){
            mBubStillCenter = new PointF(w / 2f, h / 2f);
        } else {
            mBubStillCenter.set(w / 2f, h / 2f);
        }
    }

定義氣泡狀态

氣泡總共可以分為四個狀态：

靜止

相連（粘性拖拽、回彈狀态）

分離（跟随觸摸運動狀态）

消失（爆炸狀态）

分别對應下面四種狀态

靜止狀态，一個氣泡 + 消息數

連接配接狀态，一個氣泡 + 消息數 + 貝塞爾曲線 + 原本位置上的氣泡(變化的)

分離狀态，一個氣泡 + 消息數

消失狀态，爆炸效果

這些效果主要是在 onDraw 和 onTouchEvent 實作的，在繪制的過程涉及到了貝塞爾曲線，下面分析下實作的思路和一些細節：

Android自定義View實作QQ氣泡效果View自定義屬性定義氣泡狀态設定觸摸事件

我們需要做的，就是 “ 畫 ” 出 AB 、 CD 這 2 條二階貝塞爾曲線。而 ABCD 這個不規則多邊形，就是 “ 氣泡 ” ，根據貝塞爾曲線的定義，可以發現， O 點、 P 點為已知點， G 點作為 AB 、 CD 這 2 條貝塞爾曲線的控制點，而 A 和 B 、 C 和 D 分别是 AB 、 CD 貝塞爾曲線的資料點。是以求出 A 、 B 、 C 、 D 、 G5 個點的坐标就可以畫出這 2 條貝塞爾曲線了！關于坐标的求解，一個個來： G ：坐标很簡單，直接 O 點與 P 點的 x,y 相加除以 2 就可以算出來。 ABCD 點，根據高中的數學相關知識： PE = O 的 y 坐标 -P 的 y 坐标 OE = P 的 x 坐标 -O 的 x 坐标 sin ∠ POE = PE / OP cos ∠ POE = OE / OP A 坐标： x = O 的 x 坐标 - sin ∠ POE * 固定圓半徑 y = O 的 y 坐标 - cos ∠ POE * 固定圓半徑 B 坐标： x = P 的 x 坐标 - sin ∠ POE * 動圓半徑 y = P 的 y 坐标 - cos ∠ POE * 動圓半徑 C 坐标： x = P 的 x 坐标 + sin ∠ POE * 動圓半徑 y = P 的 y 坐标 + cos ∠ POE * 動圓半徑 D 坐标： x = O 的 x 坐标 + sin ∠ POE * 固定圓半徑 y = O 的 y 坐标 + cos ∠ POE * 固定圓半徑

//        一定要分狀态 文字
        if (mBubbleState == BUBBLE_STATE_CONNECT) {
            canvas.drawCircle(mBubStillCenter.x, mBubStillCenter.y, mBubStillRadius, mBubblePaint);

            // cos    +
            float cosThrta = (mBubMoveableCenter.x - mBubStillCenter.x) / mDist;
            //  sin   +
            float sinTheta = (mBubMoveableCenter.y - mBubStillCenter.y) / mDist;

            // A
            float iBubStillStartX = mBubStillCenter.x - mBubStillRadius * sinTheta;
            float iBubStillStartY = mBubStillCenter.y + mBubStillRadius * cosThrta;

            // B
            float iBubMoveableEndX = mBubMoveableCenter.x - mBubbleRadius * sinTheta;
            float iBubMoveableEndY = mBubMoveableCenter.y + mBubMoveableRadius * cosThrta;
            //C
            float iBubMoveableStartX = mBubMoveableCenter.x + mBubMoveableRadius * sinTheta;
            float iBubMoveableStartY = mBubMoveableCenter.y - mBubMoveableRadius * cosThrta;

            //D
            float iBubStillEndX = mBubStillCenter.x + mBubStillRadius * sinTheta;
            float iBubStillEndY = mBubStillCenter.y - mBubStillRadius * cosThrta;

            //  G計算控制點坐标，兩個圓心的中點
            int iAnchorX = (int) ((mBubStillCenter.x + mBubMoveableCenter.x) / 2);
            int iAnchorY = (int) ((mBubStillCenter.y + mBubMoveableCenter.y) / 2);

            mBezierPath.reset();
            //  移動到B點
            // 畫上半弧
            mBezierPath.moveTo(iBubStillStartX, iBubStillStartY);
            mBezierPath.quadTo(iAnchorX, iAnchorY, iBubMoveableEndX, iBubMoveableEndY);
            // 畫下半弧
            mBezierPath.lineTo(iBubMoveableStartX, iBubMoveableStartY);
            mBezierPath.quadTo(iAnchorX, iAnchorY, iBubStillEndX, iBubStillEndY);
            mBezierPath.close();
            canvas.drawPath(mBezierPath, 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() - mBubStillCenter.x, event.getY() - mBubStillCenter.y);
                    // 為了友善進行拖拽，增大拖拽識别範圍
                    if (mDist < mBubbleRadius) {
                        // 更改為連接配接狀态
                        mBubbleState = BUBBLE_STATE_CONNECT;
                    } else {
                        // 重置為預設狀态
                        mBubbleState = BUBBLE_STATE_DEFAUL;
                    }
                }
                break;
            }
            case MotionEvent.ACTION_MOVE: {
                // 非靜止狀态
                if (mBubbleState != BUBBLE_STATE_DEFAUL){
                    // 計算兩個圓心的距離，目前觸摸位置即為可動圓的圓心
                    mDist = (float) Math.hypot(event.getX() - mBubStillCenter.x, event.getY() - mBubStillCenter.y);
                    //修改可動圓的圓心為觸摸點
                    mBubMoveableCenter.x = event.getX();
                    mBubMoveableCenter.y = event.getY();
                    // 連接配接狀态
                    if (mBubbleState == BUBBLE_STATE_CONNECT){
                        if (mDist < mMaxDist){
                            //當拖拽距離在指定範圍内，調整不動圓半徑
                            mBubStillRadius = 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;
    }

自定義控件完整類的代碼如下：

package com.xifei.mydragbubbleview;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.PointFEvaluator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.graphics.Rect;
import android.os.Build;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.LinearInterpolator;
import android.view.animation.OvershootInterpolator;

import androidx.annotation.Nullable;
import androidx.annotation.RequiresApi;

public class DragBubbleView extends View {

    private final int BUBBLE_STATE_DEFAUL = 0;

    //是否在執行氣泡爆炸動畫
    private boolean mIsBurstAnimStart = false;
    //氣泡相連
    private final int BUBBLE_STATE_CONNECT = 1;
    //氣泡分離
    private final int BUBBLE_STATE_APART = 2;
    //氣泡消失
    private final int BUBBLE_STATE_DISMISS = 3;
    private int mBubbleState = BUBBLE_STATE_DEFAUL;
    //文字
    private Paint mTextPaint;
    //氣泡畫筆
    private Paint mBubblePaint;
    //氣泡半徑
    private float mBubbleRadius;
    //氣泡消息文字
    private String mTextStr;
    //氣泡消息文字顔色
    private int mTextColor;
    //氣泡消息文字大小
    private float mTextSize;
    //氣泡顔色
    private int mBubbleColor;
    //不動氣泡的圓心
    private PointF mBubStillCenter;
    //可動氣泡的圓心
    private PointF mBubMoveableCenter;

    //文本繪制區域
    private Rect mTextRect;
    //兩氣泡圓心的距離
    private float mDist;
    //可動氣泡的半徑
    private float mBubMoveableRadius;
    //貝塞爾曲線path
    private Path mBezierPath;
    //氣泡相連狀态最大圓心的距離
    private float mMaxDist;
    //不動氣泡的半徑
    private float mBubStillRadius;
    //氣泡爆炸的圖檔id數組
    private int[] mBurstDrawablesArray = {R.drawable.burst_1, R.drawable.burst_2
            , R.drawable.burst_3, R.drawable.burst_4, R.drawable.burst_5};

    //氣泡爆炸的bitmap數組
    private Bitmap[] mBurstBitmapsArray;
    //爆炸繪制區域
    private Rect mBurstRect;
    //目前氣泡爆炸圖檔index
    private int mCurDrawableIndex;

    public DragBubbleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public DragBubbleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    private void init(Context context, AttributeSet attrs) {
        // 擷取自定義屬性數組
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.DragBubbleView);

        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();
        //文本畫筆
        mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setColor(Color.WHITE);
        //        textSize
        mTextPaint.setTextSize(mTextSize);
        mTextPaint.setColor(mTextColor);
        //抗鋸齒  氣泡畫筆
        mBubblePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mBubblePaint.setColor(mBubbleColor);
        mBubblePaint.setStyle(Paint.Style.FILL);
        mTextRect = new Rect();
        mBubMoveableRadius = mBubbleRadius;
        mBubStillRadius = mBubbleRadius;
        mBezierPath = new Path();
        mMaxDist = 8 * mBubbleRadius;
        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);
        // 設定兩個圓心初始位置在View中心位置，也可以通過自定義屬性将此屬性由外部自由設定
        //初始化不動氣泡的圓心
        if (mBubMoveableCenter == null){
            mBubMoveableCenter = new PointF(w / 2f, h / 2f);
        } else {
            mBubMoveableCenter.set(w / 2f, h / 2f);
        }

        //初始化可動氣泡的圓心
        if (mBubStillCenter == null){
            mBubStillCenter = new PointF(w / 2f, h / 2f);
        } else {
            mBubStillCenter.set(w / 2f, h / 2f);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //        一定要分狀态 文字
        if (mBubbleState == BUBBLE_STATE_CONNECT) {
            canvas.drawCircle(mBubStillCenter.x, mBubStillCenter.y, mBubStillRadius, mBubblePaint);

            // cos    +
            float cosThrta = (mBubMoveableCenter.x - mBubStillCenter.x) / mDist;
            //  sin   +
            float sinTheta = (mBubMoveableCenter.y - mBubStillCenter.y) / mDist;

            // A
            float iBubStillStartX = mBubStillCenter.x - mBubStillRadius * sinTheta;
            float iBubStillStartY = mBubStillCenter.y + mBubStillRadius * cosThrta;

            // B
            float iBubMoveableEndX = mBubMoveableCenter.x - mBubbleRadius * sinTheta;
            float iBubMoveableEndY = mBubMoveableCenter.y + mBubMoveableRadius * cosThrta;
            //C
            float iBubMoveableStartX = mBubMoveableCenter.x + mBubMoveableRadius * sinTheta;
            float iBubMoveableStartY = mBubMoveableCenter.y - mBubMoveableRadius * cosThrta;

            //D
            float iBubStillEndX = mBubStillCenter.x + mBubStillRadius * sinTheta;
            float iBubStillEndY = mBubStillCenter.y - mBubStillRadius * cosThrta;

            //  G計算控制點坐标，兩個圓心的中點
            int iAnchorX = (int) ((mBubStillCenter.x + mBubMoveableCenter.x) / 2);
            int iAnchorY = (int) ((mBubStillCenter.y + mBubMoveableCenter.y) / 2);

            mBezierPath.reset();
            //  移動到B點
            // 畫上半弧
            mBezierPath.moveTo(iBubStillStartX, iBubStillStartY);
            mBezierPath.quadTo(iAnchorX, iAnchorY, iBubMoveableEndX, iBubMoveableEndY);
            // 畫下半弧
            mBezierPath.lineTo(iBubMoveableStartX, iBubMoveableStartY);
            mBezierPath.quadTo(iAnchorX, iAnchorY, iBubStillEndX, iBubStillEndY);
            mBezierPath.close();
            canvas.drawPath(mBezierPath, mBubblePaint);
        }

        if (mBubbleState != BUBBLE_STATE_DISMISS) {
            // 繪制一個大小不變的氣泡（可動氣泡）
            canvas.drawCircle(mBubMoveableCenter.x, mBubMoveableCenter.y, mBubbleRadius, mBubblePaint);
            // 測量消息數的文本，并将測量資料儲存在mTextRect中
            mTextPaint.getTextBounds(mTextStr, 0, mTextStr.length(), mTextRect);
            // 繪制文本在可動氣泡的中心（參數位置是繪制區域的左下角的坐标）
            canvas.drawText(mTextStr, mBubMoveableCenter.x - mTextRect.width() / 2f,
                    mBubMoveableCenter.y + mTextRect.height() / 2f, mTextPaint);
        } else if (mCurDrawableIndex < mBurstBitmapsArray.length) {
            //爆炸狀态
            //onDraw方法中
            mBurstRect.set((int) (mBubMoveableCenter.x - mBubMoveableRadius),
                    (int) (mBubMoveableCenter.y - mBubMoveableRadius),
                    (int) (mBubMoveableCenter.x + mBubMoveableRadius),
                    (int) (mBubMoveableCenter.y + mBubMoveableRadius));
            canvas.drawBitmap(mBurstBitmapsArray[mCurDrawableIndex], null,
                    mBurstRect, mBubblePaint);
        }

        //  A
        mTextPaint.getTextBounds(mTextStr,
                0, mTextStr.length(), mTextRect);
        canvas.drawText(mTextStr,
                mBubMoveableCenter.x - mTextRect.width() / 2,
                mBubMoveableCenter.y + mTextRect.height() / 2,
                mTextPaint);
    }

    private void startBubbleRestAnim() {
        ValueAnimator anim = ValueAnimator.ofObject(new PointFEvaluator(),
                new PointF(mBubMoveableCenter.x, mBubMoveableCenter.y),
                new PointF(mBubStillCenter.x, mBubStillCenter.y));
        anim.setDuration(400);
        //  反向執行  加速回來
        anim.setInterpolator(new OvershootInterpolator(5f));
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mBubMoveableCenter = (PointF) animation.getAnimatedValue();
                invalidate();
            }
        });
        anim.start();
    }

    private void startBubbleBurstAnim() {
        //氣泡改為消失狀态
        mBubbleState = BUBBLE_STATE_DISMISS;
        mIsBurstAnimStart = true;
        //做一個int型屬性動畫，從0~mBurstDrawablesArray.length結束
        ValueAnimator anim = ValueAnimator.ofInt(0, mBurstDrawablesArray.length);
        anim.setInterpolator(new LinearInterpolator());
        anim.setDuration(500);
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //設定目前繪制的爆炸圖檔index
                mCurDrawableIndex = (int) animation.getAnimatedValue();
                invalidate();
            }
        });
        anim.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                //修改動畫執行标志
                mIsBurstAnimStart = false;
            }
        });
        anim.start();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN: {
                // 非消失狀态
                if (mBubbleState != BUBBLE_STATE_DISMISS) {
                    // 計算兩個圓心的距離，目前觸摸位置即為可動圓的圓心
                    mDist = (float) Math.hypot(event.getX() - mBubStillCenter.x, event.getY() - mBubStillCenter.y);
                    // 為了友善進行拖拽，增大拖拽識别範圍
                    if (mDist < mBubbleRadius) {
                        // 更改為連接配接狀态
                        mBubbleState = BUBBLE_STATE_CONNECT;
                    } else {
                        // 重置為預設狀态
                        mBubbleState = BUBBLE_STATE_DEFAUL;
                    }
                }
                break;
            }
            case MotionEvent.ACTION_MOVE: {
                // 非靜止狀态
                if (mBubbleState != BUBBLE_STATE_DEFAUL){
                    // 計算兩個圓心的距離，目前觸摸位置即為可動圓的圓心
                    mDist = (float) Math.hypot(event.getX() - mBubStillCenter.x, event.getY() - mBubStillCenter.y);
                    //修改可動圓的圓心為觸摸點
                    mBubMoveableCenter.x = event.getX();
                    mBubMoveableCenter.y = event.getY();
                    // 連接配接狀态
                    if (mBubbleState == BUBBLE_STATE_CONNECT){
                        if (mDist < mMaxDist){
                            //當拖拽距離在指定範圍内，調整不動圓半徑
                            mBubStillRadius = 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;
    }

    public void reset(){
        // 重置狀态
        mBubbleState = BUBBLE_STATE_DEFAUL;
        // 重置可動氣泡圓心位置
        mBubMoveableCenter = new PointF(mBubStillCenter.x, mBubStillCenter.y);
        // 重繪
        invalidate();
    }
}

另外附上源碼，需要的小夥伴可以去下載下傳，其實這個自定義控件練手很适合，一定要自己手寫下，了解原理。

https://download.csdn.net/download/xifei66/13124488

Android自定義View實作QQ氣泡效果View自定義屬性定義氣泡狀态設定觸摸事件

首先我們來看一下最終的效果：

View自定義屬性

屬性定義

初始化兩個圓的圓心坐标

定義氣泡狀态

設定觸摸事件

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯