可设置 线性渐变-背景色-进度条颜色-进度条高度

效果图

普通效果

渐变效果

改变高度效果

步骤一：新建自定义控件BarPercentView继承View(代码可直接复制使用)

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.graphics.LinearGradient;

import android.graphics.Paint;

import android.graphics.RectF;

import android.graphics.Shader;

import android.support.annotation.Keep;

import android.support.annotation.Nullable;

import android.util.AttributeSet;

import android.view.View;

/**

* 条形进度条(可设置 线性渐变-背景色-进度条颜色-进度条高度)

* Created by ZWQ on 2018/6/29.

*/

public class BarPercentView extends View {

public static final float MAX = 100f;

public static final int RADIUS = 15; // 圆角矩形半径

private RectF rectFBg;

private RectF rectFProgress;

private Paint mPaint;

private int mWidth;

private float progressPercent;

private int bgColor, progressColor;

private int mHeight;

private int radius;

private int startColor, endColor;

private LinearGradient gradient;

private boolean isGradient;

public BarPercentView(Context context) {

super(context);

init();

}

public BarPercentView(Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

//获取自定义属性

TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BarPercentView);

bgColor = typedArray.getColor(R.styleable.BarPercentView_barBgColor, getResources().getColor(R.color.gray_cfcfcf));

progressColor = typedArray.getColor(R.styleable.BarPercentView_barProgressColor, getResources().getColor(R.color.orange_ffc032));

mHeight = typedArray.getDimensionPixelSize(R.styleable.BarPercentView_barHeight, context.getResources().getDimensionPixelSize(R.dimen._10dp));

isGradient = typedArray.getBoolean(R.styleable.BarPercentView_barIsGradient, false);

startColor = typedArray.getColor(R.styleable.BarPercentView_barStartColor, getResources().getColor(R.color.black_3A3D4E));

endColor = typedArray.getColor(R.styleable.BarPercentView_barEndColor, getResources().getColor(R.color.black_475B80));

radius = typedArray.getInt(R.styleable.BarPercentView_barRadius, RADIUS);

init();

}

public BarPercentView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

init();

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);

int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);

int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);

int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);

if (widthSpecMode == MeasureSpec.EXACTLY || widthSpecMode == MeasureSpec.AT_MOST) {

mWidth = widthSpecSize;

} else {

mWidth = 0;

}

if (heightSpecMode == MeasureSpec.AT_MOST || heightSpecMode == MeasureSpec.UNSPECIFIED) {

mHeight = heightSpecSize;

} else {

mHeight = getContext().getResources().getDimensionPixelSize(R.dimen._10dp);

}

setMeasuredDimension(mWidth, mHeight);

}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

gradient = new LinearGradient(0, 0, getWidth(), mHeight, startColor, endColor, Shader.TileMode.CLAMP);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

//1、背景

mPaint.setShader(null);

mPaint.setColor(bgColor);

rectFBg.right = mWidth; //宽度

rectFBg.bottom = mHeight; //高度

canvas.drawRoundRect(rectFBg, radius, radius, mPaint);

//2、进度条

rectFProgress.right = mWidth * progressPercent;

rectFProgress.bottom = mHeight;

//3、是否绘制渐变色

if (isGradient) {

mPaint.setShader(gradient);//设置线性渐变

} else {

mPaint.setColor(progressColor);

}

if (progressPercent > 0 && rectFProgress.right < radius)//进度值小于半径时，设置大于半径的最小值，防止绘制不出圆弧矩形

rectFProgress.right = radius + 10;

canvas.drawRoundRect(rectFProgress, radius, radius, mPaint);//进度}

}

@Keep

public void setPercentage(float percentage) {

if (percentage / MAX >= 1) {

this.progressPercent = 1;

} else {

this.progressPercent = percentage / MAX;

}

invalidate();

}

private void init() {

rectFBg = new RectF(0, 0, 0, mHeight);

rectFProgress = new RectF(0, 0, 0, mHeight);

mPaint = new Paint();

//设置抗锯齿

mPaint.setAntiAlias(true);

}

public void setHeight(int mHeight) {

this.mHeight = mHeight;

invalidate();

}

public void setBgColor(int bgColor) {

this.bgColor = bgColor;

}

public void setProgressColor(int progressColor) {

this.progressColor = progressColor;

}

public void setStartColor(int startColor) {

this.startColor = startColor;

}

public void setEndColor(int endColor) {

this.endColor = endColor;

}

public void setGradient(boolean gradient) {

isGradient = gradient;

}

}

步骤二：自定义属性

在styles.xml添加自定义属性

步骤三：使用

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:id="@id/bar_percent_progress"

android:layout_width="match_parent"

android:layout_height="10dp"

android:layout_margin="@dimen/_20dp"

app:barIsGradient="true"

app:barProgressColor="@color/black_3A3D4E"

app:circleBgColor="@color/gray_color2" />

1)动画效果

public static final int ANIMATOR_DURATION = 1000;

private BarPercentView progressView;

/**

* 设置百分比

* @param max 最大值

* @param current 占比

*/

private void setData(int max, float current) {

float percentage = (100f * current) / max;

ObjectAnimator animator = ObjectAnimator.ofFloat(progressView, "percentage", 0, percentage);

animator.setDuration(ANIMATOR_DURATION);

animator.start();

}

调用setData()方法，传入最大值和占比值即可

2)无动画效果

private BarPercentViewprogressView;

progressView.setPercentage(50);//传入百分比的值