限时抢购进度

最近项目中需要做一个限时抢购模块,里边有这么一个已抢的进度,需要一个简单的自定义控件,类似安卓的进度框

这个控件还是蛮简单的,需要做的就是画两个弧和两行文字

步骤

1.需要5个自定义属性,分别是圆圈的半径,圆圈宽度,已抢进度颜色,未抢进度颜色以及文字颜色

 <declare-styleable name="CouponProgressbar">
        <attr name="couponRadius" format="dimension"/><!--圆圈半径 -->
        <attr name="couPonStrokeWidth" format="dimension"/><!--圆圈宽度 -->
        <attr name="ringColorFinished" format="color"/><!--已抢进度颜色 -->
        <attr name="ringColorUnfinished" format="color"/><!--未抢进度颜色 -->
        <attr name="progressTextColor" format="color"/><!--文字颜色 -->
</declare-styleable>

2.创建一个类CouponProgressBar,继承于View,需要在构造方法中获取到这几个自定义属性的值

private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CouponProgressbar, 0, 0);
        radius = typeArray.getDimension(R.styleable.CouponProgressbar_couponRadius, 80);
        strokeWidth = typeArray.getDimension(R.styleable.CouponProgressbar_couPonStrokeWidth, 10);
        ringColorFinished = typeArray.getColor(R.styleable.CouponProgressbar_ringColorFinished, 0xFF0000);
        ringColorUfinished = typeArray.getColor(R.styleable.CouponProgressbar_ringColorUnfinished, 0xFF0000);
        textColor = typeArray.getColor(R.styleable.CouponProgressbar_progressTextColor, 0x0000FF);
    }

3.初始化画笔

private void initPaint() {
        ringPaintFinished = new Paint();
        ringPaintFinished.setAntiAlias(true);
        ringPaintFinished.setDither(true);
        ringPaintFinished.setColor(ringColorFinished);
        ringPaintFinished.setStyle(Paint.Style.STROKE);
        ringPaintFinished.setStrokeCap(Paint.Cap.ROUND);
        ringPaintFinished.setStrokeWidth(strokeWidth);

        ringPaintUnfinished = new Paint();
        ringPaintUnfinished.setAntiAlias(true);
        ringPaintUnfinished.setDither(true);
        ringPaintUnfinished.setColor(ringColorUfinished);
        ringPaintUnfinished.setStyle(Paint.Style.STROKE);
        ringPaintUnfinished.setStrokeCap(Paint.Cap.ROUND);
        ringPaintUnfinished.setStrokeWidth(strokeWidth);

        textNormalPaint = new Paint();
        textNormalPaint.setAntiAlias(true);
        textNormalPaint.setStyle(Paint.Style.FILL);
        textNormalPaint.setColor(textColor);
        textNormalPaint.setTextSize(radius / 2 - 2);
        Paint.FontMetrics fm = textNormalPaint.getFontMetrics();
        textNormalHeight = fm.descent + Math.abs(fm.ascent) - radius - 3;

        textBoldPaint = new Paint();
        textBoldPaint.setAntiAlias(true);
        textBoldPaint.setStyle(Paint.Style.FILL);
        textBoldPaint.setColor(textColor);
        textBoldPaint.setTextSize(radius / 2 + 4);
        textBoldPaint.setTypeface(Typeface.DEFAULT_BOLD);
        Paint.FontMetrics fm2 = textBoldPaint.getFontMetrics();
        textBoldHeight = fm2.descent + Math.abs(fm2.ascent) + radius + 2;

    }

注意:”5%”是加粗的 “已抢”是不加粗的 所有用了两个画笔

3.接下来就需要重写onDraw方法来画这个控件了

@Override
    protected void onDraw(Canvas canvas) {
        if (currentProgress >= 0) {
            //已抢的部分
            RectF oval = new RectF(getWidth() / 2 - radius, getHeight() / 2 - radius, getWidth() / 2 + radius, getHeight() / 2 + radius);
            canvas.drawArc(oval, 180, ((float) currentProgress / totalProgress) * 360, false, ringPaintFinished);

            //围墙的部分
            canvas.drawArc(oval, 180 + ((float) currentProgress / totalProgress) * 360, 360 - ((float) currentProgress / totalProgress) * 360, false, ringPaintUnfinished);

            //文字1
            String txt = "已抢";
            textNormalWidth = textNormalPaint.measureText(txt, 0, txt.length());
            canvas.drawText(txt, getWidth() / 2 - textNormalWidth / 2, getHeight() / 2 + textNormalHeight / 4, textNormalPaint);

            //文字2
            String txt2 = currentProgress + "%";
            textBoldWidth = textBoldPaint.measureText(txt2, 0, txt2.length());
            canvas.drawText(txt2, getWidth() / 2 - textBoldWidth / 2, getHeight() / 2 + textBoldHeight / 4, textBoldPaint);
        }
    }

4.设置进度

    public void setProgress(int progress) {
        currentProgress = progress;
        postInvalidate();
    }

当然也可以在这里添加一个进度的动画.从0到progress,因为当时比较赶,就没加这个动画

5.使用:
布局文件:

 <com.jike.defindprogress.CouponProgressBar
        android:id="@+id/cpb_coupon_progress"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        cp:couPonStrokeWidth="2dp"
        cp:couponRadius="25dp"
        cp:progressTextColor="#ff6600"
        cp:ringColorFinished="#999"
        cp:ringColorUnfinished="#d90028"/>

代码中:

  CouponProgressBar cpb_coupon_progress = (CouponProgressBar) findViewById(R.id.cpb_coupon_progress);
  cpb_coupon_progress.setProgress(30);

展示下效果

点击这里下载源码