本章我们来讲解如何画一个简单的直线进度条
1. 新建一个xxx.class 继承View
package com.example.test2021120801;
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
/**
* 简单的直线进度条
* 要求:
* 1. 左右两侧圆角
* 2. 支持设置最大最小值与当前值
* 3. 支持设置颜色
*/
public class SimpleLineProgressView extends View {
/**
* 第一个构造方法
*/
public SimpleLineProgressView(Context context) {
super(context);
}
/**
* 第二个构造方法
*/
public SimpleLineProgressView(Context context, AttributeSet attrs) {
super(context, attrs);
}
/**
* 第三个构造方法
*/
public SimpleLineProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
//大小
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
//绘制
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Log.e("ScaleProgressBarView", "onDraw");
}
}
2. 初始化数据(画笔、进度)
private int viewWidth, viewHeight;
//最大进度、最小进度、当前进度
private int maxProgres, minProgres, currentProgres;
//进度条背景
private Paint bgPaint;
private int bgColor;
//进度条
private Paint progresPaint;
private int progresColor;
private void initData() {
maxProgres = 100;
minProgres = 0;
currentProgres = 0;
bgPaint = new Paint();
bgPaint.setStyle(Paint.Style.FILL);//实心
bgPaint.setStrokeCap(Paint.Cap.ROUND);//设置线帽 --- >圆形
bgColor = Color.parseColor("#00ff00");
bgPaint.setColor(bgColor);//设置线条颜色
progresPaint = new Paint();
progresPaint.setStyle(Paint.Style.FILL);//实心
progresPaint.setStrokeCap(Paint.Cap.ROUND);//设置线帽 --- >圆形
progresColor = Color.parseColor("#ffffff");
progresPaint.setColor(progresColor);//设置线条颜色
}
3. 绘制
这里是最关键的绘制部分,我将详细讲述
//绘制
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//高的中点
int y = viewHeight / 2;
//进度条开始、结束的X值
int startX = viewHeight / 2;
int stopX = viewWidth - startX;
//设置线条宽度
bgPaint.setStrokeWidth(viewHeight);
progresPaint.setStrokeWidth(viewHeight);
//绘制底线
canvas.drawLine(startX, y, stopX, y, bgPaint);
//绘制进度
float x = startX + (currentProgres - minProgres) / (maxProgres - minProgres) * (stopX - startX);
canvas.drawLine(startX, y, x, y, progresPaint);
}
4.设计一个方法用于设置新的进度
//设置进度
public void setCurrentProgres(float currentProgres) {
if (currentProgres < minProgres || currentProgres > maxProgres) {
return;
}
this.currentProgres = currentProgres;
invalidate();//刷新 <---- 执行这个方法后会重新执行onMeasure方法和onDraw方法实现刷新
}
到这里就基本就完成了大部分工作,接下来你有一个任务:设置最大进度、设置最小进度。