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
<com.dz.common.view.ProgressSeek
    android:id="@+id/progressSeek"
    android:layout_width="match_parent"
    android:layout_height="100dp"/>

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

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值