Android 自定義圓形帶刻度漸變色的進(jìn)度條樣式實(shí)例代碼

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

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

效果圖

一、繪制圓環(huán)

圓環(huán)故名思意，第一個(gè)首先繪制是圓環(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：繪制時(shí)所使用的畫筆。

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

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

因?yàn)橐氖菨u變效果API也有提供

函數(shù)名是：SweepGradient

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

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

cx 渲染中心點(diǎn)x 坐標(biāo)

cy 渲染中心y 點(diǎn)坐標(biāo)

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

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

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

cx 渲染中心點(diǎn)x 坐標(biāo)

cy 渲染中心點(diǎn)y 坐標(biāo)

color0 起始渲染顏色

color1 結(jié)束渲染顏色

實(shí)現(xiàn)樣式

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

但是最后實(shí)現(xiàn)出來的效果是漸變開始角度是從0°開始的但是我們想要的要求是從-90°開始因此需要對繪制的圓環(huán)進(jì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);

因?yàn)槭切枰３值谝粋€(gè)圓環(huán)的采用漸變，所以在繪制時(shí)候在利用完之后將設(shè)置

paint.setShader(null);

3：繪制剩余的進(jìn)度

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

//同樣的因?yàn)槭欠聪蚶L制的 也可以根據(jù)當(dāng)前的有顏色的角度結(jié)束角度開始繪制到-90°
 canvas.drawArc(oval, -90, (float) (-(100 - progress) * 3.6), false, paint);

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

二、刻度

1：圓環(huán)刻度

是對整個(gè)圓環(huán)根據(jù)刻度大小進(jìn)行平分，計(jì)算出每個(gè)所占的角度然后根據(jù)當(dāng)前的進(jìn)度計(jì)算該顯示幾個(gè)圓環(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：文字刻度

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

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

最后上整個(gè)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();// 保存當(dāng)前畫布
   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 自定義圓形帶刻度漸變色的進(jìn)度條，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: