Android自定义进度条（气泡显示进度）

目录

目录

前言

之前公司项目中有一个需要用气泡展示进度条进度的需求，那时候忙所以没来得及整理，这次抽空就来整理下，方便以后使用，也希望能够帮到有需要的朋友们。

效果展示

这里由于录制的原因所以显得有点卡顿。

效果图

实现原理

●进度条部分

这里是先绘制一条背景用来表示剩余进度，然后利用 PathMeasure的 getSegment方法截取路径来实现进度的展示，而进度展示的动画效果则是通过 ObjectAnimator来实现的。
●气泡部分

气泡部分又可以分为三部分：

• 三角指示标部分：
  三角指示标部分位置的确认如要是利用PathMeasure的getPosTan方法根据进度条的进度获取到直角点A所在的坐标，由于我们这里是将该三角形设置为等腰直角三角形，所以该三角形的高等于斜边的1/2因此可以推断出B点和C点的位置，进而根据直角点坐标来推算出整个三角形的位置。
• 矩形部分：
  矩形部分的位置依然是根据三角形部分的A点（即进度终止点）的坐标来计算的
  left：B点横坐标 - 文字宽度
  top：A点纵坐标 - 三角形高度 - 文字高度
  right：B点横坐标
  bottom：A点纵坐标 + 三角形高度
  这只是能够实现出气泡的效果，实际上只通过这样粗略的算法实现的气泡并不圆润，因此还需更精细的打磨，比如给矩形部分加入一定的内边距等（这些都在下面代码中会逐一实现）。
• 文字部分
  文字部分比较简单，直接利用构建矩形的Rect的 centerX() 和 centerY() 方法获取到矩形的中心点，然后将文字绘制在中心的绘制即可，当然也不要忘了将Paint的TextAlign设置为Paint.Align.CENTER

效果实现（代码展示）

public class BubbleProgressView extends View {
    private Paint mPaintProgress,mPaintBubble, mPaintProgressStr;
    private PathMeasure mPathMeasure;
    private Path mPathSrc,mPathDst,mPathBubble;
    private int mColorProgressBg;//进度条的背景颜色
    private int mColorProgress;//进度条的进度颜色
    private int mColorProgressStr = Color.WHITE;//进度条的进度文字的颜色
    private float mProgressHeight = 5;
    private float mProgress=0;//进度条的进度
    private float mBubbleTriangleHeight = 5;//气泡底部小三角高度
    private float mBubbleRectRound = 5;//气泡的圆角
    private String mProgressStr = "0%";//显示进度的字符串
    private float mTextSize = 20;//进度条文字大小
    private Paint.FontMetricsInt mFontMetricsInt;
    private float mProgressStrMargin = 15;//气泡的边距
    public BubbleProgressView(Context context) {
        this(context,null);
    }

    public BubbleProgressView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

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

    private void init() {
        mPaintProgress = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintProgress.setStrokeCap(Paint.Cap.ROUND);
        mPaintProgress.setStyle(Paint.Style.STROKE);
        mPaintProgress.setStrokeWidth(mProgressHeight);

        mPaintBubble = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintBubble.setStrokeCap(Paint.Cap.ROUND);//设置线头为圆角
        mPaintBubble.setStyle(Paint.Style.FILL);
        mPaintBubble.setStrokeJoin(Paint.Join.ROUND);//设置拐角为圆角

        mPaintProgressStr = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintProgressStr.setStrokeWidth(1);
        mPaintProgressStr.setStyle(Paint.Style.STROKE);
        mPaintProgressStr.setColor(mColorProgressStr);
        mPaintProgressStr.setTextSize(mTextSize);//设置字体大小
        mPaintProgressStr.setTextAlign(Paint.Align.CENTER);//将文字水平居中

        mPathSrc = new Path();
        mPathDst = new Path();
        mPathBubble = new Path();
        mPathMeasure = new PathMeasure();

        mColorProgressBg = Color.GRAY;
        mColorProgress = getResources().getColor(R.color.colorAccent);
        mPaintBubble.setColor(getResources().getColor(R.color.colorAccent));//设置气泡的颜色

        mFontMetricsInt = mPaintProgressStr.getFontMetricsInt();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mPathSrc.moveTo(30,h-mProgressHeight*2);
        mPathSrc.lineTo(w-30,h-mProgressHeight*2);//进度条位置在控件整体底部，且距离控件左边和右边各20像素
        mPathMeasure.setPath(mPathSrc,false);
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //画进度条
        drawProgress(canvas);
        //画气泡
        drawBubble(canvas);
    }

    private void drawBubble(Canvas canvas) {
        Rect rect = new Rect();
        mPaintProgressStr.getTextBounds(mProgressStr,0,mProgressStr.length(),rect);//返回包围整个字符串的最小的一个Rect区域，以此计算出文字的高度和宽度
        int width = (int) (rect.width()+mProgressStrMargin);//计算字符串宽度(加上设置的边距)
        int height = (int) (rect.height()+mProgressStrMargin);//计算字符串高度(加上设置的边距)
        mPathBubble.reset();
        float p[] = new float[2];//用于存储点坐标的数组
        float t[] = new float[2];
        float stop = mPathMeasure.getLength() * mProgress;//计算进度条的进度
        mPathMeasure.getPosTan(stop,p,t);//获取进度所对应点的左边
        mPathBubble.moveTo(p[0],p[1]-mProgressHeight);
        mPathBubble.lineTo(p[0]+mBubbleTriangleHeight,p[1]-mBubbleTriangleHeight-mProgressHeight);//假设底部小三角为等腰直角三角形，那么三角形的高度就等于底边长度的1/2
        mPathBubble.lineTo(p[0]-mBubbleTriangleHeight,p[1]-mBubbleTriangleHeight-mProgressHeight);
        mPathBubble.close();//使路径闭合从而形成三角形
        //这里是计算文字所在矩形的位置及大小
        //left:因为设置的气泡底部三角形为等腰直角三角形，所以矩形的左边位置为，
        //      进度所在的横坐标 - 底部三角形高度 - 矩形圆角的半径(不减去圆角半径的话显得不够圆润)，
        //      而(mProgress*width)则是为了不断改变气泡底部的三角形与气泡顶部矩形的相对位置
        //      否则在进度条开始或结束位置可能为显示不全
        //top:进度所在的高度 - 底部三角形高度 - 进度条高度 - 矩形高度
        //right:矩形右边位置的计算原理与左边相同，同样((1-mProgress)*width)也是为了不断改变气泡底部的三角形与气泡顶部矩形的相对位置（与left相对应）
        //bottom:这个就简单了，与top相比小了一个矩形的高度
        RectF rectF = new RectF(p[0]-mBubbleTriangleHeight-mBubbleRectRound/2-(mProgress*width),p[1]-mBubbleTriangleHeight-mProgressHeight-height,p[0]+mBubbleTriangleHeight+mBubbleRectRound/2+((1-mProgress)*width),p[1]-mBubbleTriangleHeight-mProgressHeight);
        mPathBubble.addRoundRect(rectF,mBubbleRectRound,mBubbleRectRound, Path.Direction.CW);//添加矩形路径
        canvas.drawPath(mPathBubble,mPaintBubble);//绘制气泡
        int i = (mFontMetricsInt.bottom - mFontMetricsInt.ascent) / 2 - mFontMetricsInt.bottom;//让文字垂直居中
        canvas.drawText(mProgressStr,rectF.centerX(),rectF.centerY()+i,mPaintProgressStr);//绘制文字（将文字绘制在气泡矩形的中心点位置）
    }

    private void drawProgress(Canvas canvas) {
        mPathDst.reset();
        mPaintProgress.setColor(mColorProgressBg);
        canvas.drawPath(mPathSrc, mPaintProgress);//绘制进度背景（灰色部分）
        float stop = mPathMeasure.getLength() * mProgress;//计算进度条的进度
        mPathMeasure.getSegment(0,stop,mPathDst,true);//得到与进度对应的路径
        mPaintProgress.setColor(mColorProgress);
        canvas.drawPath(mPathDst, mPaintProgress);//绘制进度
    }

    /**
     * 设置进度
     * @param progress
     */
    public void setProgress(float progress){
        mProgress = progress;
        mProgressStr = (int)(progress*100)+"%";
        invalidate();//设置完进度进行重绘
    }

    /**
     * 设置动画进度
     */
    public void setProgressWithAnim(float progress){
        ObjectAnimator.ofFloat(this,"progress",0,progress).setDuration(2000).start();
    }
}

项目源码：https://github.com/myml666/BubbleProgress