自定义控件：水平进度条，主要是用于展示一些任务进度

重构一个老项目时，发现其任务进度展示，使用的纯xml展示进度，看着这一堆findViewById，瞬间懵逼了

所以自己写了个水平进度展示的自定义控件，比较简单，代码注释写的也很详细

效果图：



下面是主要的逻辑代码

private static final int THUMB_SIZE = 50;

private Paint paint = new Paint();
private Paint selectedPaint = new Paint();
private Paint textSelectPaint = new Paint();
private Paint textDefaultPaint = new Paint();
private boolean needShowNumber = true;
private int mNumOfStep = 2;
//默认文字的大小
float numberTextSize = 40.0f;
//进度的线高度
private float mLineHeight;
private float mThumbRadius;
//实心圆的圆半径
private float mCircleRadius;
//实心圆与外围透明圆的偏移量，这里讲的主要是现对于的实心圆的倍数
private float outerCircleOffset = 1.2f;
private float mPadding;
private int mProgressColor = Color.YELLOW;
private int mBarColor = Color.BLACK;
private final String[] labels = {"1", "2", "3", "4"};
private int circleSelectColor;
private int circleDefaultColor;
private float mCenterY;
private float mLeftX;
private float mLeftY;
private float mRightX;
private float mRightY;
private float mDelta;
private List<Float> mThumbContainerXPosition = new ArrayList<>();
private int mCompletedPosition;
private OnDrawListener mDrawListener;
private int textSelectColor = Color.WHITE;
private int textDefaultColor;

public StepsViewIndicator(Context context) {
this(context, null);
}

public StepsViewIndicator(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public StepsViewIndicator(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.StepsViewIndicator);
mNumOfStep = a.getInt(R.styleable.StepsViewIndicator_numOfSteps, 0);
a.recycle();

init();
}

private void init() {
mLineHeight = 0.1f * THUMB_SIZE;
mThumbRadius = 0.7f * THUMB_SIZE;
mCircleRadius = 0.8f * mThumbRadius;
mPadding = 0.8f * THUMB_SIZE;
}

public void setStepSize(int size) {
mNumOfStep = size;
invalidate();
}

public void setDrawListener(OnDrawListener drawListener) {
mDrawListener = drawListener;
}

public List<Float> getThumbContainerXPosition() {
return mThumbContainerXPosition;
}

@Override
public void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);

mCenterY = 0.5f * getHeight();
mLeftX = mPadding;
mLeftY = mCenterY - (mLineHeight / 2);
mRightX = getWidth() - mPadding;
mRightY = 0.5f * (getHeight() + mLineHeight);
mDelta = (mRightX - mLeftX) / (mNumOfStep - 1);

mThumbContainerXPosition.add(mLeftX);
for (int i = 1; i < mNumOfStep - 1; i++) {
mThumbContainerXPosition.add(mLeftX + (i * mDelta));
}
mThumbContainerXPosition.add(mRightX);
mDrawListener.onReady();
}

@Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = getWidth();
if (MeasureSpec.UNSPECIFIED != MeasureSpec.getMode(widthMeasureSpec)) {
width = MeasureSpec.getSize(widthMeasureSpec);
}
int height = THUMB_SIZE + 20;
if (MeasureSpec.UNSPECIFIED != MeasureSpec.getMode(heightMeasureSpec)) {
height = Math.min(height, MeasureSpec.getSize(heightMeasureSpec));
}
setMeasuredDimension(width, height);
}

public void setCompletedPosition(int position) {
mCompletedPosition = position;
}

public void reset() {
setCompletedPosition(0);
}

public void setProgressColor(int progressColor) {
mProgressColor = progressColor;
}

public void setBarColor(int barColor) {
mBarColor = barColor;
}

public void setNeedShowNumber(boolean needShowNumber) {
this.needShowNumber = needShowNumber;
}

public void setNumOfStep(int mNumOfStep) {
this.mNumOfStep = mNumOfStep;
}

public void setNumberTextSize(float numberTextSize) {
this.numberTextSize = numberTextSize;
}

public void setmLineHeight(float mLineHeight) {
this.mLineHeight = mLineHeight;
}

public void setmThumbRadius(float mThumbRadius) {
this.mThumbRadius = mThumbRadius;
}

public void setOuterCircleOffset(float outerCircleOffset) {
this.outerCircleOffset = outerCircleOffset;
}

public void setmProgressColor(int mProgressColor) {
this.mProgressColor = mProgressColor;
}

public void setmBarColor(int mBarColor) {
this.mBarColor = mBarColor;
}

public void setCircleSelectColor(int circleSelectColor) {
this.circleSelectColor = circleSelectColor;
}

public void setCircleDefaultColor(int circleDefaultColor) {
this.circleDefaultColor = circleDefaultColor;
}

public void setTextDefaultColor(int textDefaultColor) {
this.textDefaultColor = textDefaultColor;
}

public void setTextSelectColor(int textSelectColor) {
this.textSelectColor = textSelectColor;
}

@Override
protected synchronized void onDraw(Canvas canvas) {
super.onDraw(canvas);
mDrawListener.onReady();
// Draw rect bounds
paint.setAntiAlias(true);
paint.setColor(mBarColor);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(2);
paint.setStyle(Paint.Style.FILL);

selectedPaint.setAntiAlias(true);
selectedPaint.setColor(mProgressColor);
selectedPaint.setStyle(Paint.Style.STROKE);
selectedPaint.setStrokeWidth(2);
selectedPaint.setStyle(Paint.Style.FILL);

//number选中的文字颜色
textSelectPaint.setColor(textSelectColor);
textSelectPaint.setTextSize(numberTextSize); //以px为单位

//number默认文字显示
//        textDefaultColor = mBarColor;
textDefaultPaint.setColor(textDefaultColor);
textDefaultPaint.setTextSize(numberTextSize); //以px为单位

//画进度条
for (int i = 0; i < mThumbContainerXPosition.size() - 1; i++) {
final float pos = mThumbContainerXPosition.get(i)+35;
final float pos2 = mThumbContainerXPosition.get(i + 1)-35;
canvas.drawRect(pos, mLeftY, pos2, mRightY,
(i < mCompletedPosition) ? selectedPaint : paint);
}

//绘制外面的带透明的圆
paint.setColor(circleDefaultColor);
selectedPaint.setColor(circleSelectColor);
for (int i = 0; i < mThumbContainerXPosition.size(); i++) {
final float pos = mThumbContainerXPosition.get(i);
canvas.drawCircle(pos, mCenterY, mCircleRadius * outerCircleOffset, (i <= mCompletedPosition) ? selectedPaint : paint);
}

//绘制圆环，SelectPaint选择表示绘制红色以及内部的进度的数字
selectedPaint.setColor(mProgressColor);
paint.setColor(Color.WHITE);
for (int i = 0; i < mThumbContainerXPosition.size(); i++) {
canvas.drawCircle(mThumbContainerXPosition.get(i), mCenterY, mCircleRadius,
(i <= mCompletedPosition) ? selectedPaint : paint);
if(needShowNumber) {
canvas.drawText(labels[i], mThumbContainerXPosition.get(i) - 12, mCenterY + 13,
(i <= mCompletedPosition) ? textSelectPaint : textDefaultPaint);
}
}
}

public interface OnDrawListener {
public void onReady();
}

资源地址：点击打开链接