自定义view（1）---自定义圆环，仿qq健康进度条

一：前言

小白要开始写博客了。android一起进阶吧。

二：编码

废话不多说，开始码代码（养成好习惯 每次编码前都要把思路和需要用到的东西写出注释）

/**
 * 目标 仿qq健康圆环
 * 实现思路
 * 1,qq健康中圆环的进度条是一个圆环 android中提供Api Canvas提供绘制圆环的方法  drawRectF()
 * 2,因为圆环加载动画 每次都要绘制一点点   所以可以才用ValueAnimate
 * 实现步骤
 * 1, 创建一个集成自View的类,实现其构造方法
 * 2，init()方法用来实现所有在xml中配置的属性并且对RingView一些默认值的赋值  因为圆环 所以空间宽高取最小值（定死）
 * 3, 绘制  绘制圆环时 我们需要paint画笔 和画布   首先new Paint()并对其进行设置属性  需要特殊颜色的如（渐变色 需要用到SweepGradient）
 * 4，因为这里用到了动画   所以圆弧的每次都要去计算绘制到哪个角度  知道动画时间到了  才是绘制完成
 * 5，对RectF进行位置判断  因为是内接圆 所以只需要根据控件高宽度最小值来判断 当然计算的时候不要忘记计算圆环的宽度
 * 6，设置动画  因为是根据一个当前值和动画时间去计算的动画  所以我们这里用到了ValueAnimator  ValueAnimator中给他设置时间和总进度
 * 然后会在ValueAnimator的回掉方法中计算到每毫秒（不一定是每毫秒）  加载到了进度值 再去invalidate重新绘制
 * 7，
 *
 */

/*
初始化操作 对自定义的变量进行一些初始化操作
 */
private void init(AttributeSet attrs, Context context) {

    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RingView);
    ringViewStroke = typedArray.getDimension(R.styleable.RingView_ringViewStroke, RINGVIEWSTROKEDEFAULT);
    startAngle = typedArray.getInteger(R.styleable.RingView_startAngle, 0);
    endAngle = typedArray.getInteger(R.styleable.RingView_endAngle, 90);
    colors[0] = typedArray.getColor(R.styleable.RingView_startColor, colors_s[0]);
    colors[1] = typedArray.getColor(R.styleable.RingView_centerColor, colors_s[1]);
    colors[2] = typedArray.getColor(R.styleable.RingView_endColor, colors_s[2]);

    typedArray.recycle();

}

这里是绘制  绘制的时候不要把角度写死 因为是有动画  所以从0°开始绘制

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    ringViewWidth = Math.min(getWidth(), getHeight());
    /*
    不管padding
     */
    rectF = new RectF(ringViewStroke, ringViewStroke, ringViewWidth - ringViewStroke, ringViewWidth - ringViewStroke);
    mPaint = new Paint();
    drawRingView(canvas);
}

因为是需要一些特效  所以颜色渐变少不了

    private void drawRingView(Canvas canvas) {
        SweepGradient sweepGradient = new SweepGradient(ringViewWidth / 2, ringViewWidth / 2, colors, null);
        Matrix matrix = new Matrix();
        matrix.setRotate(endAngle + 10, ringViewWidth / 2, ringViewWidth / 2);
        sweepGradient.setLocalMatrix(matrix);

//        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        mPaint.setShader(sweepGradient);
        mPaint.setStrokeWidth(ringViewStroke);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        canvas.drawArc(rectF, startAngle, currentAngele, false, mPaint);

    }

这里就是开始设置动画了   哈哈哈    很简单吧      

public void setCurrentCount(int maxCount, int nowCount, int time) {
    float scale = (float) nowCount / maxCount;
    setAnimation(0, scale * endAngle, time);

}

private void setAnimation(int i, float v, int time) {
    ValueAnimator progressAnimator = ValueAnimator.ofFloat(i, v);
    progressAnimator.setDuration(time);
    progressAnimator.setTarget(currentAngele);
    progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            currentAngele = (float) animation.getAnimatedValue();
            invalidate();
        }
    });
    progressAnimator.start();
}

<declare-styleable name="RingView">
    <attr name="startColor" format="color"/>
    <attr name="centerColor" format="color"/>
    <attr name="endColor" format="color"/>
    <attr name="ringViewStroke" format="dimension"/>
    <attr name="startAngle" format="integer"/>
    <attr name="endAngle" format="integer"/>
</declare-styleable>

/**
 * 注意    当然 我会po出源码的   虽然这都是小白技术   但是也是一个进阶啊   望大牛不要喷       
 */

最后po出项目地址   有时间我会持续更新  https://git.oschina.net/atex/CustomViewDemo.git