Android 简单的直线进度条

526 阅读1分钟

本章我们来讲解如何画一个简单的直线进度条

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);

}

image.png


4.设计一个方法用于设置新的进度

//设置进度
public void setCurrentProgres(float currentProgres) {
    if (currentProgres < minProgres || currentProgres > maxProgres) {
        return;
    }
    this.currentProgres = currentProgres;
    invalidate();//刷新  <---- 执行这个方法后会重新执行onMeasure方法和onDraw方法实现刷新
}

到这里就基本就完成了大部分工作,接下来你有一个任务:设置最大进度、设置最小进度。