Android如何實現多段顏色進度條效果

小編給大家分享一下Android如何實現多段顏色進度條效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

具體內容如下

這個進度條其實相對簡單.
這里可以把需要繪制的簡單分為兩個部分

1.灰色背景部分
2.多段顏色的進度部分

考慮到實際繪制中,分段部分不太容易根據進度值進行動態繪制.
故把多段顏色部分作為背景進行繪制,實際的灰色部分根據進度值變化,達到多段顏色部分進度變化的效果.

實現步驟

1.自定義View 來繪制進度條
2.定義背景及進度條繪制所需的畫筆

private Paint backgroundPaint, progressPaint, linePaint;//背景和進度條畫筆

3.定義不同顏色區域的矩陣數組(這里將進度分為多個色塊)
4.定義顏色數組,以及所占比例的數組.后面根據比例和顏色進行繪制

private Rect progressRect = new Rect();//進度條;
private Rect backgroundRects[];//背景矩形區域
private float weights[];//每個區域的權重
private int colors[];//顏色

5.定義進度值,監聽等雜項.

private float progress = 10, maxProgress = 100;//進度和最大進度
private OnProgressChangeListener listener;

6.在draw方法中進行繪制
7.背景色塊的繪制

 //繪制背景顏色塊
int x = 0, y = getHeight();
int progressX = (int) getWidthForWeight(progress, maxProgress);
for (int i = 0; i < colors.length; i++) {
   Rect rect = backgroundRects[i];
   backgroundPaint.setColor(colors[i]);
   int width = (int) (getWidthForWeight(weights[i], totalWeight));
   rect.set(x, 0, x + width, y);
   x += width;//計算下一個的開始位置
   canvas.drawRect(rect, backgroundPaint);//繪制矩形
 }

8.進度條及分割線的繪制

progressRect.set(0, 0, progressX, getHeight());//設置進度條區域
canvas.drawRect(progressRect, progressPaint);//繪制進度條
for (int i = 0, lineX = 0; i < colors.length; i++) {
   int width = (int) (getWidthForWeight(weights[i], totalWeight));
   //繪制矩形塊之間的分割線
   lineX = lineX + width;
   if (lineX < progressX) {//給已經走過了的區域畫上豎線
      canvas.drawLine(lineX, 0, lineX, getHeight(), linePaint);
    }
}

最后看看實現的效果圖

完整代碼

package com.wq.widget;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.LinearInterpolator;


/**
 * 多段顏色的進度條
 * Created by WQ on 2017/7/11.
 */

public class MultistageProgress extends View {

  private Paint backgroundPaint, progressPaint, linePaint;//背景和進度條畫筆
  private Rect progressRect = new Rect();//進度條;
  private Rect backgroundRects[];//背景矩形區域
  private float weights[];//每個區域的權重
  private int colors[];//顏色
  private float totalWeight;//總的權重
  public static final int DEF_COLORS[];//默認背景顏色數組
  public static final float DEF_WEIGHTS[];//每段對應的權重
  private float progress = 10, maxProgress = 100;//進度和最大進度
  private OnProgressChangeListener listener;

  static {
    DEF_COLORS = new int[]{
        Color.parseColor("#00B6D0"),
        Color.parseColor("#0198AE"),
        Color.parseColor("#008396"),
        Color.parseColor("#007196"),
        Color.parseColor("#005672")
    };
    DEF_WEIGHTS = new float[]{
        138, 35, 230, 230, 57
    };
  }

  public float getProgress() {
    return progress;
  }

  public void setProgress(float progress) {
    this.progress = progress;
    invalidate();
    onProgressChange();
  }

  private void onProgressChange() {
    if (listener != null) {
      int position = 0;
      int currentWidth = (int) getWidthForWeight(getProgress(), getMaxProgress());
      int tmpWidth = 0;
      for (int i = 0; i < weights.length; i++) {
        tmpWidth += (int) getWidthForWeight(weights[i], totalWeight);
        if (tmpWidth >= currentWidth) {
          position = i;
          break;
        }
      }
      listener.onProgressChange(getProgress(), position);
    }
  }

  public float getMaxProgress() {
    return maxProgress;
  }

  public void setMaxProgress(float maxProgress) {
    this.maxProgress = maxProgress;
    invalidate();
  }

  public OnProgressChangeListener getProgressChangeListener() {
    return listener;
  }

  public void setProgressChangeListener(OnProgressChangeListener listener) {
    this.listener = listener;
  }

  public MultistageProgress(Context context) {
    super(context);
    init();
  }

  public MultistageProgress(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
  }

  public MultistageProgress(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
  }

  public MultistageProgress(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();
  }


  public void init() {
    backgroundPaint = new Paint();
    backgroundPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    backgroundPaint.setColor(Color.RED);
    progressPaint = new Paint();
    progressPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    progressPaint.setColor(Color.parseColor("#d9d9d9"));
    linePaint = new Paint();
    linePaint.setStyle(Paint.Style.FILL_AND_STROKE);
    linePaint.setColor(Color.parseColor("#e7eaf0"));
    linePaint.setStrokeWidth(2);
    setColors(DEF_COLORS, DEF_WEIGHTS);

  }

  /**
   * 設置進度條顏色
   *
   * @param color
   */
  public void setProgressColor(int color) {
    progressPaint.setColor(color);
  }

  /**
   * 設置每一段的顏色以及對應的權重
   *
   * @param colors
   * @param weights
   */
  public void setColors(int[] colors, float weights[]) {
    if (colors == null || weights == null) {
      throw new NullPointerException("colors And weights must be not null");
    }
    if (colors.length != weights.length) {
      throw new IllegalArgumentException("colors And weights length must be same");
    }
    backgroundRects = new Rect[colors.length];
    this.colors = colors;
    this.weights = weights;
    totalWeight = 0;
    for (int i = 0; i < weights.length; i++) {
      totalWeight += weights[i];
      backgroundRects[i] = new Rect();
    }
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (backgroundRects == null) {
      return;
    }
    if (maxProgress <= 0) {
      maxProgress = getWidth();
    }
    //繪制背景顏色塊
    int x = 0, y = getHeight();
    int progressX = (int) getWidthForWeight(progress, maxProgress);
    for (int i = 0; i < colors.length; i++) {
      Rect rect = backgroundRects[i];
      backgroundPaint.setColor(colors[i]);
      int width = (int) (getWidthForWeight(weights[i], totalWeight));
      rect.set(x, 0, x + width, y);
      x += width;//計算下一個的開始位置
      canvas.drawRect(rect, backgroundPaint);//繪制矩形
    }
    progressRect.set(0, 0, progressX, getHeight());//設置進度條區域
    canvas.drawRect(progressRect, progressPaint);//繪制進度條
    for (int i = 0, lineX = 0; i < colors.length; i++) {
      int width = (int) (getWidthForWeight(weights[i], totalWeight));
      //繪制矩形塊之間的分割線
      lineX = lineX + width;
      if (lineX < progressX) {//給已經走過了的區域畫上豎線
        canvas.drawLine(lineX, 0, lineX, getHeight(), linePaint);
      }
    }


  }

  /**
   * 根據權重獲取對應的寬度
   *
   * @param weight
   * @param totalWeight
   * @return
   */
  public float getWidthForWeight(float weight, float totalWeight) {
    return getWidth() * (weight / totalWeight) + 0.5f;
  }

  /**
   * 根據根據權重在數組中的索引獲取對應的位置
   *
   * @param position
   * @return
   */
  public float getXForWeightPosition(int position) {
    float xPosition = 0;
    for (int i = 0; i < position; i++) {
      xPosition += getWidthForWeightPosition(i);
    }
    return xPosition;
  }

  /**
   * 根據根據權重在數組中的索引獲取對應的寬度
   *
   * @param position
   * @return
   */
  public float getWidthForWeightPosition(int position) {
    return getWidth() * (weights[position] / totalWeight) + 0.5f;
  }

  ObjectAnimator valueAnimator;

  public void autoChange(float startProgress, float endProgress, long changeTime) {
    if (valueAnimator != null && valueAnimator.isRunning()) return;
    setProgress((int) startProgress);
    setMaxProgress((int) endProgress);
    valueAnimator = ObjectAnimator.ofFloat(this, "progress", startProgress, endProgress);
    valueAnimator.setDuration(changeTime);
    valueAnimator.setInterpolator(new LinearInterpolator());
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        float value = (float) animation.getAnimatedValue();
//        setProgress((int) value);
        Log.d(getClass().getName(), "進度值 " + value);
      }
    });
    valueAnimator.start();
  }

  public void stopChange() {
    if (valueAnimator != null && valueAnimator.isRunning()) valueAnimator.cancel();
  }

  @Override
  protected void onDetachedFromWindow() {
    if (valueAnimator != null && valueAnimator.isRunning()) {
      valueAnimator.cancel();
    }
    super.onDetachedFromWindow();
  }

  public interface OnProgressChangeListener {
    /**
     * 進度改變時觸發
     * @param progress 進度
     * @param position 所在區間段
     */
    void onProgressChange(float progress, int position);
  }
}

以上是“Android如何實現多段顏色進度條效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！