Android 自定義圓形帶刻度漸變色的進度條樣式實例代碼

更新時間：2016年11月28日 09:08:58 作者：SmFour

這篇文章主要介紹了Android 自定義圓形帶刻度漸變色的進度條的實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

效果圖

一、繪制圓環(huán)

圓環(huán)故名思意，第一個首先繪制是圓環(huán)

1：圓環(huán)繪制函數(shù)

圓環(huán)API

public void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

參數(shù)說明

oval：圓弧所在的橢圓對象。

startAngle：圓弧的起始角度。

sweepAngle：圓弧的角度。

useCenter：是否顯示半徑連線，true表示顯示圓弧與圓心的半徑連線，false表示不顯示。

paint：繪制時所使用的畫筆。

 //circleCenter 整個圓半徑 radius圓環(huán)的半徑
RectF oval = new RectF(circleCenter - radius, circleCenter - radius, circleCenter + radius, circleCenter + radius);
//因為-90°才是從12點鐘方向開始 所以從-90開始 progress 為進度
canvas.drawArc(oval, -90, (float) (progress * 3.6), false, paint);

2：對圓環(huán)上色

因為要的是漸變效果API也有提供

函數(shù)名是：SweepGradient

構(gòu)造函數(shù)

public SweepGradient (float cx, float cy, int[] colors, float[] positions)

cx 渲染中心點x 坐標

cy 渲染中心y 點坐標

colors 圍繞中心渲染的顏色數(shù)組，至少要有兩種顏色值

positions 相對位置的顏色數(shù)組 ,可為null, 若為null,可為null, 顏色沿漸變線均勻分布

public SweepGradient (float cx, float cy, int color0, int color1)

cx 渲染中心點x 坐標

cy 渲染中心點y 坐標

color0 起始渲染顏色

color1 結(jié)束渲染顏色

實現(xiàn)樣式

//漸變顏色 你可以添加很多種但是至少要保持在2種顏色以上
int[] colors = {0xffff4639, 0xffCDD513, 0xff3CDF5F};
 //circleWidth 圓的直徑 取中心點 
 SweepGradient sweepGradient = new SweepGradient(this.circleWidth / 2, this.circleWidth / 2, colors, null);

但是最后實現(xiàn)出來的效果是漸變開始角度是從0°開始的但是我們想要的要求是從-90°開始因此需要對繪制的圓環(huán)進行旋轉(zhuǎn)

 //旋轉(zhuǎn) 不然是從0度開始漸變
 Matrix matrix = new Matrix();
 matrix.setRotate(-90, this.circleWidth / 2, this.circleWidth / 2);
 sweepGradient.setLocalMatrix(matrix);

最后將漸變添加到圓環(huán)

paint.setShader(sweepGradient);

因為是需要保持第一個圓環(huán)的采用漸變，所以在繪制時候在利用完之后將設(shè)置

paint.setShader(null);

3：繪制剩余的進度

一樣的是繪制圓環(huán)開始角度

//同樣的因為是反向繪制的 也可以根據(jù)當前的有顏色的角度結(jié)束角度開始繪制到-90°
 canvas.drawArc(oval, -90, (float) (-(100 - progress) * 3.6), false, paint);

最終實現(xiàn)效果如圖1所示

二、刻度

1：圓環(huán)刻度

是對整個圓環(huán)根據(jù)刻度大小進行平分，計算出每個所占的角度然后根據(jù)當前的進度計算該顯示幾個圓環(huán)之后再繪制上去，刻度使用是也是圓環(huán)，只是角度很小而已

如下

 float start = -90f;
   float p = ((float) maxColorNumber / (float) 100);
   p = (int) (progress * p);
   for (int i = 0; i < p; i++) {
    paint.setColor(roundBackgroundColor);
    // 繪制間隔快
    canvas.drawArc(oval, start + singlPoint - lineWidth, lineWidth, false,     paint); 
    start = (start + singlPoint);
   }

2：文字刻度

也就是繪制文字是對文字繪制之后進行相應(yīng)的旋轉(zhuǎn)

 //繪制文字刻度
  for (int i = 1; i <= 10; i++) {
   canvas.save();// 保存當前畫布
   canvas.rotate(360 / 10 * i, circleCenter, circleCenter);
   canvas.drawText(i * 10 + "", circleCenter, circleCenter - radius + roundWidth / 2 + getDpValue(4) + textSize, mPaintText);
   canvas.restore();//
  }

最后上整個View代碼

package com.example.shall.myapplication;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
public class CircularRingPercentageView extends View {
 private Paint paint;
 private int circleWidth;
 private int roundBackgroundColor;
 private int textColor;
 private float textSize;
 private float roundWidth;
 private float progress = 0;
 private int[] colors = {0xffff4639, 0xffCDD513, 0xff3CDF5F};
 private int radius;
 private RectF oval;
 private Paint mPaintText;
 private int maxColorNumber = 100;
 private float singlPoint = 9;
 private float lineWidth = 0.3f;
 private int circleCenter;
 private SweepGradient sweepGradient;
 private boolean isLine;
 /**
  * 分割的數(shù)量
  *
  * @param maxColorNumber 數(shù)量
  */
 public void setMaxColorNumber(int maxColorNumber) {
  this.maxColorNumber = maxColorNumber;
  singlPoint = (float) 360 / (float) maxColorNumber;
  invalidate();
 }
 /**
  * 是否是線條
  *
  * @param line true 是 false否
  */
 public void setLine(boolean line) {
  isLine = line;
  invalidate();
 }
 public int getCircleWidth() {
  return circleWidth;
 }
 public CircularRingPercentageView(Context context) {
  this(context, null);
 }
 public CircularRingPercentageView(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }
 public CircularRingPercentageView(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.CircularRing);
  maxColorNumber = mTypedArray.getInt(R.styleable.CircularRing_circleNumber, 40);
  circleWidth = mTypedArray.getDimensionPixelOffset(R.styleable.CircularRing_circleWidth, getDpValue(180));
  roundBackgroundColor = mTypedArray.getColor(R.styleable.CircularRing_roundColor, 0xffdddddd);
  textColor = mTypedArray.getColor(R.styleable.CircularRing_circleTextColor, 0xff999999);
  roundWidth = mTypedArray.getDimension(R.styleable.CircularRing_circleRoundWidth, 40);
  textSize = mTypedArray.getDimension(R.styleable.CircularRing_circleTextSize, getDpValue(8));
  colors[0] = mTypedArray.getColor(R.styleable.CircularRing_circleColor1, 0xffff4639);
  colors[1] = mTypedArray.getColor(R.styleable.CircularRing_circleColor2, 0xffcdd513);
  colors[2] = mTypedArray.getColor(R.styleable.CircularRing_circleColor3, 0xff3cdf5f);
  initView();
  mTypedArray.recycle();
 }
 /**
  * 空白出顏色背景
  *
  * @param roundBackgroundColor
  */
 public void setRoundBackgroundColor(int roundBackgroundColor) {
  this.roundBackgroundColor = roundBackgroundColor;
  paint.setColor(roundBackgroundColor);
  invalidate();
 }
 /**
  * 刻度字體顏色
  *
  * @param textColor
  */
 public void setTextColor(int textColor) {
  this.textColor = textColor;
  mPaintText.setColor(textColor);
  invalidate();
 }
 /**
  * 刻度字體大小
  *
  * @param textSize
  */
 public void setTextSize(float textSize) {
  this.textSize = textSize;
  mPaintText.setTextSize(textSize);
  invalidate();
 }
 /**
  * 漸變顏色
  *
  * @param colors
  */
 public void setColors(int[] colors) {
  if (colors.length < 2) {
   throw new IllegalArgumentException("colors length < 2");
  }
  this.colors = colors;
  sweepGradientInit();
  invalidate();
 }
 /**
  * 間隔角度大小
  *
  * @param lineWidth
  */
 public void setLineWidth(float lineWidth) {
  this.lineWidth = lineWidth;
  invalidate();
 }
 private int getDpValue(int w) {
  return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, w, getContext().getResources().getDisplayMetrics());
 }
 /**
  * 圓環(huán)寬度
  *
  * @param roundWidth 寬度
  */
 public void setRoundWidth(float roundWidth) {
  this.roundWidth = roundWidth;
  if (roundWidth > circleCenter) {
   this.roundWidth = circleCenter;
  }
  radius = (int) (circleCenter - this.roundWidth / 2); // 圓環(huán)的半徑
  oval.left = circleCenter - radius;
  oval.right = circleCenter + radius;
  oval.bottom = circleCenter + radius;
  oval.top = circleCenter - radius;
  paint.setStrokeWidth(this.roundWidth);
  invalidate();
 }
 /**
  * 圓環(huán)的直徑
  *
  * @param circleWidth 直徑
  */
 public void setCircleWidth(int circleWidth) {
  this.circleWidth = circleWidth;
  circleCenter = circleWidth / 2;
  if (roundWidth > circleCenter) {
   roundWidth = circleCenter;
  }
  setRoundWidth(roundWidth);
  sweepGradient = new SweepGradient(this.circleWidth / 2, this.circleWidth / 2, colors, null);
  //旋轉(zhuǎn) 不然是從0度開始漸變
  Matrix matrix = new Matrix();
  matrix.setRotate(-90, this.circleWidth / 2, this.circleWidth / 2);
  sweepGradient.setLocalMatrix(matrix);
 }
 /**
  * 漸變初始化
  */
 public void sweepGradientInit() {
  //漸變顏色
  sweepGradient = new SweepGradient(this.circleWidth / 2, this.circleWidth / 2, colors, null);
  //旋轉(zhuǎn) 不然是從0度開始漸變
  Matrix matrix = new Matrix();
  matrix.setRotate(-90, this.circleWidth / 2, this.circleWidth / 2);
  sweepGradient.setLocalMatrix(matrix);
 }
 public void initView() {
  circleCenter = circleWidth / 2;//半徑
  singlPoint = (float) 360 / (float) maxColorNumber;
  radius = (int) (circleCenter - roundWidth / 2); // 圓環(huán)的半徑
  sweepGradientInit();
  mPaintText = new Paint();
  mPaintText.setColor(textColor);
  mPaintText.setTextAlign(Paint.Align.CENTER);
  mPaintText.setTextSize(textSize);
  mPaintText.setAntiAlias(true);
  paint = new Paint();
  paint.setColor(roundBackgroundColor);
  paint.setStyle(Paint.Style.STROKE);
  paint.setStrokeWidth(roundWidth);
  paint.setAntiAlias(true);
  // 用于定義的圓弧的形狀和大小的界限
  oval = new RectF(circleCenter - radius, circleCenter - radius, circleCenter + radius, circleCenter + radius);
 }
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  //背景漸變顏色
  paint.setShader(sweepGradient);
  canvas.drawArc(oval, -90, (float) (progress * 3.6), false, paint);
  paint.setShader(null);
  //是否是線條模式
  if (!isLine) {
   float start = -90f;
   float p = ((float) maxColorNumber / (float) 100);
   p = (int) (progress * p);
   for (int i = 0; i < p; i++) {
    paint.setColor(roundBackgroundColor);
    canvas.drawArc(oval, start + singlPoint - lineWidth, lineWidth, false, paint); // 繪制間隔快
    start = (start + singlPoint);
   }
  }
  //繪制剩下的空白區(qū)域
  paint.setColor(roundBackgroundColor);
  canvas.drawArc(oval, -90, (float) (-(100 - progress) * 3.6), false, paint);
  //繪制文字刻度
  for (int i = 1; i <= 10; i++) {
   canvas.save();// 保存當前畫布
   canvas.rotate(360 / 10 * i, circleCenter, circleCenter);
   canvas.drawText(i * 10 + "", circleCenter, circleCenter - radius + roundWidth / 2 + getDpValue(4) + textSize, mPaintText);
   canvas.restore();//
  }
 }
 OnProgressScore onProgressScore;
 public interface OnProgressScore {
  void setProgressScore(float score);
 }
 public synchronized void setProgress(final float p) {
  progress = p;
  postInvalidate();
 }
 /**
  * @param p
  */
 public synchronized void setProgress(final float p, OnProgressScore onProgressScore) {
  this.onProgressScore = onProgressScore;
  progress = p;
  postInvalidate();
 }
}

以上所述是小編給大家介紹的Android 自定義圓形帶刻度漸變色的進度條，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: