昨日接到产品一个需求，要把目前的下载进度条改成正方形的进度条,本着拿来主义的精神，从网上找了一个现成的demo，发现其实现的过于复杂，虽放弃之。
自己动手，丰衣足食。还是自已写吧。
先看一下实现效果
Gif_20170622_133608.gif
我们先来分析一下实现方形进度条我们需要做哪些操作：
1、先画一个正方形边框
2、画进度条
3、因为进度是变化的所以画正方形不能使用drawRect一次性画出来，要画四条线组成一个正方形。最大进度为100%，我们把100为4份，每份对应正方形的一条边，这样每条边的最大进度值为25%。
4、如果进度值小于等于25，则在正方形的上边框上面画进度，如果小于等于50 上边框就是最大进度25，剩余进度则画到右边框，以此类推 进度小于等于75 进度画到下边框，小于等于100则画到左边框.
Talk is cheap. Show me the code
public class MySquareProcessView extends View {
private static final int MAX_PROGRESS = 100;//最大进度
private static final int PER_LINE_MAX_PROCESS = 100 / 4;//正方形每条边的最大进度
private Context mContext;
private Paint paint;
private Paint processPaint;
private Paint textPaint;
private Canvas canvas;
private int currentPogress;
private int strokeColor = Color.BLACK;//正方形默认颜色
private float strokeWith = 5.0f;//正方形边框默认宽度
private int progressColor = Color.RED;//进度条默认颜色
private int textColor = Color.BLUE;//百分比文字默认颜色
private float textSize = 10.0f;//百分比文字默认字体大小
public MySquareProcessView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
mContext = context;
initValue(attrs);
}
private void initValue(AttributeSet attrs) {
TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.SquareProcessView);
currentPogress = typedArray.getInteger(R.styleable.SquareProcessView_currentPogress, 0);
strokeColor = typedArray.getColor(R.styleable.SquareProcessView_strokeColor, ContextCompat.getColor(mContext, R.color.colorPrimary));
strokeWith = typedArray.getDimension(R.styleable.SquareProcessView_strokeWith, strokeWith);
progressColor = typedArray.getColor(R.styleable.SquareProcessView_progressColor, ContextCompat.getColor(mContext, R.color.colorAccent));
textColor = typedArray.getColor(R.styleable.SquareProcessView_textColor, ContextCompat.getColor(mContext, R.color.colorAccent));
textSize = typedArray.getDimension(R.styleable.SquareProcessView_textSize, textSize);
initPaints();
}
private void initPaints() {
paint = new Paint();
paint.setColor(strokeColor);
paint.setStrokeWidth(strokeWith);
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
initProcessPaint();
initTextPaint();
}
private void initProcessPaint() {
processPaint = new Paint();
processPaint.setColor(progressColor);
processPaint.setStrokeWidth(strokeWith);
processPaint.setAntiAlias(true);
processPaint.setStyle(Paint.Style.STROKE);
}
private void initTextPaint() {
textPaint = new Paint();
textPaint.setColor(textColor);
textPaint.setAntiAlias(true);
textPaint.setStyle(Paint.Style.STROKE);
textPaint.setTextSize(textSize);
}
public void setCurrentPogress(int currentPogress) {
this.currentPogress = currentPogress;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
this.canvas = canvas;
/*画正方形*/
drawSquare();
/*画进度条*/
drawProcessSquare(currentPogress);
/*画百分比*/
drawPercent();
}
/**
* 四条线组成一个方形
*/
private void drawSquare() {
drawTopLine();
drawRightLine();
drawBottomLine();
drawLeftLine();
}
private void drawTopLine() {
Path path = new Path();
/*把坐标移动到坐上下角*/
path.moveTo(0, 0);
path.lineTo(canvas.getWidth(), 0);
canvas.drawPath(path, paint);
}
private void drawRightLine() {
Path path = new Path();
/*把坐标移动到右上角*/
path.moveTo(canvas.getWidth(), 0);
path.lineTo(canvas.getWidth(), canvas.getHeight());
canvas.drawPath(path, paint);
}
private void drawBottomLine() {
Path path = new Path();
/*把坐标移动到右下角*/
path.moveTo(canvas.getWidth(), canvas.getHeight());
path.lineTo(0, canvas.getHeight());
canvas.drawPath(path, paint);
}
private void drawLeftLine() {
Path path = new Path();
/*把坐标移动到坐上下角*/
path.moveTo(0, 0);
path.lineTo(0, canvas.getHeight());
canvas.drawPath(path, paint);
}
/**
* 画进度
*/
private void drawProcessSquare(int progress) {
int topProcess = 0;
int rightProcess = 0;
int bottomProcess = 0;
int leftProcess = 0;
if (progress <= PER_LINE_MAX_PROCESS) {//进度值小于等于一条边的进度 画 top进度线条
topProcess = progress;
} else if (progress <= PER_LINE_MAX_PROCESS * 2) {//进度值小于等于两条边的进度 top 进度为线条最大值；right进度值为progress-一条线条的总进度(减去top 的值)
topProcess = PER_LINE_MAX_PROCESS;
rightProcess = progress - PER_LINE_MAX_PROCESS;
} else if (progress <= PER_LINE_MAX_PROCESS * 3) {//进度值小于等于三条边的进度 top 进度为线条最大值;right 进度为线条最大值；bottom进度值为progress-两条线条的总进度(减去top与right的值)
topProcess = PER_LINE_MAX_PROCESS;
rightProcess = PER_LINE_MAX_PROCESS;
bottomProcess = progress - PER_LINE_MAX_PROCESS * 2;
} else if (progress <= MAX_PROGRESS) {//进度值小于等于四条边的进度 top 进度为线条最大值;right 进度为线条最大值;bottom 进度为线条最大值；left进度值为progress-三条线条的总进度(减去top、right、bottom的值)
topProcess = PER_LINE_MAX_PROCESS;
rightProcess = PER_LINE_MAX_PROCESS;
bottomProcess = PER_LINE_MAX_PROCESS;
leftProcess = progress - PER_LINE_MAX_PROCESS * 3;
}
drawProgressTopLine(topProcess);
drawProgressRightLine(rightProcess);
drawProgressBottomLine(bottomProcess);
drawProgressLeftLine(leftProcess);
}
private void drawProgressTopLine(int progress) {
Path path = new Path();
/*把坐标移动到左上角*/
path.moveTo(0, 0);
path.lineTo(canvas.getWidth() / PER_LINE_MAX_PROCESS * progress, 0);
canvas.drawPath(path, processPaint);
}
private void drawProgressRightLine(int progress) {
Path path = new Path();
/*把坐标移动到右上角*/
path.moveTo(canvas.getWidth(), 0);
path.lineTo(canvas.getWidth(), canvas.getHeight() / PER_LINE_MAX_PROCESS * progress);
canvas.drawPath(path, processPaint);
}
/*比较特殊 lineTo是从左往右画的 进度是从右往左走的 所以取 当前line 的进度 减去总 line的总长度的 绝对值*/
private void drawProgressBottomLine(int progress) {
Path path = new Path();
/*把坐标移动到右下角*/
path.moveTo(canvas.getWidth(), canvas.getHeight());
path.lineTo(canvas.getHeight() / PER_LINE_MAX_PROCESS * Math.abs(progress - PER_LINE_MAX_PROCESS), canvas.getHeight());
canvas.drawPath(path, processPaint);
}
private void drawProgressLeftLine(int progress) {
Path path = new Path();
/*把坐标移动到左下角*/
path.moveTo(0, canvas.getHeight());
path.lineTo(0, canvas.getHeight() / PER_LINE_MAX_PROCESS * Math.abs(progress - PER_LINE_MAX_PROCESS));
canvas.drawPath(path, processPaint);
}
private void drawPercent() {
int width = canvas.getWidth();
int height = canvas.getHeight();
textPaint.setTextAlign(Paint.Align.CENTER);
Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
float top = fontMetrics.top;
float bottom = fontMetrics.bottom;
canvas.drawText(currentPogress + "%", width / 2, height / 2 - top / 2 - bottom / 2, textPaint);
}
}
