Android 自定義View 之 Path PathMeasure (三)之漸變色進度條Progress

可調整漸變的進度條Progress

如上圖所示

需求場景：

• 進度條
• 顏色漸變
• 可靜態\可自動

程式碼解析

• 初始化背景進度條畫筆、前景可漸變進度條畫筆

	/**
	初始化背景進度條畫筆、前景可漸變進度條畫筆
	**/
    private void initView(Context context, AttributeSet attrs) {

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ProgressCirce);
        gradientLeftColor = typedArray.getColor(R.styleable.ProgressCirce_gradient_left_color, -1);
        gradientRightColor = typedArray.getColor(R.styleable.ProgressCirce_gradient_right_color, -1);
        normalColor = typedArray.getColor(R.styleable.ProgressCirce_gradient_normal_color, 0xFFF4F4F6);


        backPaint = new Paint();
        backPaint.setStyle(Paint.Style.FILL);
        backPaint.setColor(normalColor);
        backPaint.setAntiAlias(true);


        forPaint = new Paint();
        forPaint.setAntiAlias(true);
        forPaint.setStyle(Paint.Style.FILL);

        typedArray.recycle();

//        forPaint.setColor(Color.RED);
    }

• 使用path初始化背景進度路徑

   @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        forPath = new Path();
        backPath = new Path();
        backPath.addRoundRect(
                getPaddingLeft(),
                getPaddingTop(),
                getMeasuredWidth(),
                getMeasuredHeight(),
                radius, radius, Path.Direction.CCW);


    }

• 繪製
  通過傳入當前的progress 和progressMax(最大值)計算出當前 進度處於width 中什麼位置
  得到停止位置stopD ,繪製出前景progress

   forPath.reset();
        canvas.drawPath(backPath, backPaint);

        float stopD = (float) (Math.abs(progress)) / progressMax * getMeasuredWidth();
        forPaint.setShader(getLinearGradient());
        forPath.addRoundRect(
                getPaddingLeft(),
                getPaddingTop(),
                stopD,
                getMeasuredHeight(),
                radius, radius, Path.Direction.CCW);
        if (progress != 1) {
            canvas.drawPath(forPath, forPaint);
        }

• 線性漸變
  獲取線性漸變值，通知傳入的color id，設定漸變。

    /**
     * 獲取線性漸變
     *
     * @return
     */
    private LinearGradient getLinearGradient() {
        if (linearGradient == null) {
            linearGradient = new LinearGradient(0, 0,
                    getMeasuredWidth(),
                    getMeasuredHeight(),
                    gradientLeftColor,
                    gradientRightColor,
                    Shader.TileMode.CLAMP); //根據R檔案中的id獲取到color
        }
        return linearGradient;
    }

• 開啟動態progress動畫

  /**
     * 開啟自動進度動畫
     */
    public void startAutoProcessAnimation(final AnimationInterface animationInterface) {
        if (valueAnimator == null) {
            valueAnimator = ValueAnimator.ofInt(0, (int) progressMax);
            valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {


                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    setProgress((Integer) animation.getAnimatedValue());
                    if (animationInterface != null) {
                        animationInterface.animationRunning((Integer) animation.getAnimatedValue());
                    }
                }

            });
            valueAnimator.setDuration(2000);
            valueAnimator.setInterpolator(new LinearInterpolator());
            valueAnimator.start();
        }
    }

    /**
     * 停止自動進度動畫
     */
    public void stopAutoProcessAnimation() {
        if (valueAnimator != null) {
            valueAnimator.cancel();
            valueAnimator = null;
        }
    }

    public interface AnimationInterface {
        void animationRunning(int progress);

    }

• 設定靜態progress

  /**
     * 設定靜態progress
     *
     * @param progress
     */
    public void setProgress(int progress) {
        if (progress > progressMax) {
            this.progress = (int) progressMax;
        } else if (progress <= 0) {
            this.progress = 1;
        } else {
            this.progress = progress;
        }
        invalidate();
    }

至此，可漸變的Progress就完成了。