Android开发自定义实现炫酷的进度条

本篇文章主要记录自定义View实现的水平进度条，包含的主要内容:水平进度条可设置渐变的颜色、在水平进度条上添加开始好结束的图片以及动态添加进度条下面的进度文字说明。下面是效果图展示：

实现的以上效果的主要代码分析说明：

第一步：绘制进度条进行初始化操作：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint bmpPaint = new Paint();
//将cacheBitmap绘制到该View组件
        if (cacheBitmap != null) {
            canvas.drawBitmap(cacheBitmap, 0, 0, bmpPaint);
        }
        view_edge_width = this.getWidth();
//        Log.e("打出来看看控件的宽度:", view_edge_width + "");
        init(progress,startprogress,starttime,endtime);
    }

第二步：主要绘制进度条的代码：

        /**
         * 画背景
       */
        RectF r = new RectF();
        r.left = 0;
        r.top = bitmapHeight;
        r.right = view_base_width;
        r.bottom = bitmapWidth + 10;
        cacheCanvas.drawRoundRect(r, 10f, 10f, backgroundPaint);

//绘制进度条的以及添加进度条中的图片和进度条下面的文字

 LinearGradient lg = new LinearGradient(0, 0, view_width, bitmapWidth, DEFAULT_START_COLOR, DEFAULT_END_COLOR, Shader.TileMode.CLAMP);
            progressPaint.setShader(lg);
            r.left = 0;
            r.top = bitmapHeight;
            r.right = view_width;
            r.bottom = bitmapWidth + 10;

//绘制进度条
            cacheCanvas.drawRoundRect(r, 10f, 10f, progressPaint);

//绘制进度条上面的图片
            cacheCanvas.drawBitmap(bitmap, view_width - bitmapWidth, bitmapHeight / 2, new Paint());

//添加进度条下面的文字
            cacheCanvas.drawText(endtime, view_width - bitmapWidth, bitmapHeight/2+90,textPaint);

第四步：下面贴上整个自定义View的全部代码：

/**
 * @author: GaoYaNan
 * @date: 2023/11/2
 * @content:
 */
public class ProgressSeek extends View {
    /**
     * 进度条的宽度
     */
    private int view_width;
    private int start_width;
    /**
     * 画布的宽度
     */
    private int view_base_width;
    /**
     * 控件的宽度
     */
    private int view_edge_width;
    /**
     * 进度
     */
    private int progress;
    private int startprogress;
    private String starttime;
    private String endtime;
    private Canvas cacheCanvas;
    /**
     * 背景颜色的画笔
     */
    private Paint backgroundPaint;
    /**
     * 进度条的画笔
     */
    private Paint progressPaint;
    /**
     *文字说明
     */
    private Paint textPaint;
    /**
     * 进度末端的图
     */
    private Bitmap bitmap;
    //开始进度图
    private Bitmap startbitmap;
    private int bitmapWidth;
    private int bitmapHeight;
    private Context context;
    //渐变色开始
    private static final int DEFAULT_START_COLOR = Color.parseColor("#F291C2");
    //渐变色结束
    private static final int DEFAULT_END_COLOR = Color.parseColor("#518CFF");
    /**
     * 缓存图片
     */
    private Bitmap cacheBitmap;
    public ProgressSeek(Context context) {
        super(context);
        initView(context);
    }
    public ProgressSeek(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }
    public ProgressSeek(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }
    private void initView(Context context) {
        this.context = context;
        bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_progress_end);
        startbitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_progress_start);
        bitmapWidth =bitmap.getWidth();
        bitmapHeight = bitmap.getHeight()+DensityUtils.px2dip(context,60);
        backgroundPaint = new Paint();
        backgroundPaint.setStrokeWidth(bitmapHeight);
        backgroundPaint.setColor(Color.parseColor("#518CFF"));
        backgroundPaint.setAlpha(80);
        backgroundPaint.setDither(true);
        backgroundPaint.setAntiAlias(true);
        progressPaint = new Paint();
        progressPaint.setStrokeWidth(bitmapHeight);
        progressPaint.setDither(true);
        progressPaint.setAntiAlias(true);

        textPaint = new Paint();
        //绘制文字
       textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
       textPaint.setFakeBoldText(true);
       textPaint.setAntiAlias(true);
        textPaint.setTextSize(DensityUtils.px2dip(context,60));

       textPaint.setStrokeWidth(1f);
        textPaint.setColor(getResources().getColor(R.color.white));

        DisplayMetrics d = new DisplayMetrics();
        ((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(d);
        view_base_width = d.widthPixels;
    }
    public void init(int progress,int startprogress,String starttime,String endtime) {
        this.progress = progress;
        this.startprogress = startprogress;
        this.starttime = starttime;
        this.endtime = endtime;
        if (view_width == 0) {//第一上来
            view_width = view_base_width * progress / 100;
        } else {
            if (startprogress>0){
                start_width = view_edge_width * startprogress / 100;
            }
            if (progress>0){
                view_width = view_edge_width * progress / 100;
            }

//
        }
        if (cacheBitmap != null) {
            if (!cacheBitmap.isRecycled()) {
                cacheBitmap.recycle();
                cacheBitmap = null;
            }
            cacheCanvas = null;
        }
        cacheBitmap = Bitmap.createBitmap(view_base_width, bitmapHeight * 2, Bitmap.Config.ARGB_8888);
        if (cacheCanvas == null) {
            cacheCanvas = new Canvas();
            cacheCanvas.setBitmap(cacheBitmap);
        }
/**
 * 画背景
 */
        RectF r = new RectF();
        r.left = 0;
        r.top = bitmapHeight;
        r.right = view_base_width;
        r.bottom = bitmapWidth + 10;
        cacheCanvas.drawRoundRect(r, 10f, 10f, backgroundPaint);

        if (progress > 0) {
            LinearGradient lg = new LinearGradient(0, 0, view_width, bitmapWidth, DEFAULT_START_COLOR, DEFAULT_END_COLOR, Shader.TileMode.CLAMP);
            progressPaint.setShader(lg);
            r.left = 0;
            r.top = bitmapHeight;
            r.right = view_width;
            r.bottom = bitmapWidth + 10;
            cacheCanvas.drawRoundRect(r, 10f, 10f, progressPaint);
            cacheCanvas.drawBitmap(bitmap, view_width - bitmapWidth, bitmapHeight / 2, new Paint());
            cacheCanvas.drawText(endtime, view_width - bitmapWidth, bitmapHeight/2+90,textPaint);
//            LogeUtils.e("timo-progress==:"+ progress + "");
        }
        if (startprogress ==0||startprogress >0) {
            LinearGradient lg = new LinearGradient(0, 0, start_width, bitmapWidth, DEFAULT_START_COLOR, DEFAULT_END_COLOR, Shader.TileMode.CLAMP);
            progressPaint.setShader(lg);
            RectF r1 = new RectF();
            r.left = 0;
            r.top = bitmapHeight;
            r.right = 0;
            r.bottom = bitmapWidth + 10;
            cacheCanvas.drawRoundRect(r, 10f, 10f, progressPaint);
            cacheCanvas.drawBitmap(startbitmap, 0, bitmapHeight / 2, new Paint());
            cacheCanvas.drawText(starttime, 0, bitmapHeight / 2+90, textPaint);
//            LogeUtils.e("timo-startprogress0==:"+ startprogress + "");
        }else if(startprogress <0){
            LinearGradient lg = new LinearGradient(0, 0, start_width, bitmapWidth, DEFAULT_START_COLOR, DEFAULT_END_COLOR, Shader.TileMode.CLAMP);
            progressPaint.setShader(lg);
            RectF r1 = new RectF();
            r.left = 0;
            r.top = bitmapHeight;
            r.right = 0;//
            r.bottom = bitmapWidth + 10;
            cacheCanvas.drawRoundRect(r, 10f, 10f, progressPaint);
            cacheCanvas.drawBitmap(startbitmap, start_width - bitmapWidth, bitmapHeight / 2, new Paint());
            cacheCanvas.drawText(starttime, 0, bitmapHeight / 2+80, textPaint);
//            cacheCanvas.drawText(starttime, start_width - bitmapWidth, bitmapHeight / 2+80, textPaint);
//            LogeUtils.e("timo-startprogress1==:"+ startprogress + "");
        }
        invalidate();
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint bmpPaint = new Paint();
//将cacheBitmap绘制到该View组件
        if (cacheBitmap != null) {
            canvas.drawBitmap(cacheBitmap, 0, 0, bmpPaint);
        }
        view_edge_width = this.getWidth();
//        Log.e("打出来看看控件的宽度:", view_edge_width + "");
        init(progress,startprogress,starttime,endtime);
    }
}

第五步：具体的使用说明：

在xml中添加上自定义View

在使用的类中具体的用法：

//自定义渐变进度条
init中的参数具体的说明：依次是：结束进度、开始进度、开始进度文字说明、结束进度文字说明
progressSeek.init(60,10,"100%  开始","60%  结束");

以上就是本文的全部内容，仅供大家参考，如果问题可私信，如需转载请附上本文链接。