自定義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