美文网首页
自定义进度条

自定义进度条

作者: _xiangpan | 来源:发表于2018-07-12 11:09 被阅读25次

    自定义进度条


    一、先上效果图

    效果图

    二、思路

     1、绘制底色(灰色)
     2、绘制进度(蓝色)
     3、绘制最大的进度(纯蓝色)
    

    三、实现

    1)绘制底色

     RectF rf = new RectF(0, 0, mWidth, mHeight);
     /*绘制圆角矩形,背景色为画笔颜色*/
     mPaint.setColor(Color.rgb(220, 220, 220));
     canvas.drawRoundRect(rf, round, round, mPaint);
     /*设置progress内部是灰色*/
     mPaint.setColor(Color.rgb(242, 241, 246));
     RectF rectBlackBg = new RectF(3, 3, mWidth - 3, mHeight - 3);
     canvas.drawRoundRect(rectBlackBg, round, round, mPaint);
    

    2)绘制进度

    isMax 判断是否为最大的进度
    
      //设置进度条进度及颜色
        float section = currentCount / maxCount;
        RectF rectProgressBg = new RectF(0, 0, mWidth * section, mHeight);
        if (section != 0.0f) {
            if (isMax){
                mPaint.setColor(Color.rgb(75, 199, 247));
                canvas.drawRoundRect(rectProgressBg, round, round, mPaint);
            }else {
                RectF s1 = new RectF(0, 0, mWidth * section, mHeight);
                mPaint.setColor(Color.rgb(83, 202, 247));
                canvas.drawRoundRect(s1, round, round, mPaint);
                RectF s2 = new RectF(3, 3, mWidth * section-3, mHeight-3);
                mPaint.setColor(Color.rgb(210, 232, 245));
                canvas.drawRoundRect(s2, round, round, mPaint);
            }
        } else {
            mPaint.setColor(Color.TRANSPARENT);
            canvas.drawRoundRect(rectProgressBg, round, round, mPaint);
        }
    

    3)ProgressView完整代码

    
    public class ProgressView extends View {
        /**
         * 进度条最大值
         */
        private float maxCount;
        /**
         * 进度条当前值
         */
        private float currentCount;
        /**
         * 画笔
         */
        private Paint mPaint;
        /**
         * 设置为最大项
         **/
        private boolean isMax;
    
        private int mWidth, mHeight;
    
        public ProgressView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            // TODO Auto-generated constructor stub
        }
    
        public ProgressView(Context context, AttributeSet attrs) {
            super(context, attrs);
            // TODO Auto-generated constructor stub
        }
    
        public ProgressView(Context context) {
            super(context);
            // TODO Auto-generated constructor stub
        }
    
        /***
         * 设置最大的进度值
         * @param maxCount
         */
        public void setMaxCount(float maxCount) {
            this.maxCount = maxCount;
        }
    
        /***
         * 设置为最大项
         */
        public void setIsMax(boolean b) {
            this.isMax = b;
        }
        
    
        /***
         * 设置当前的进度值
         * @param currentCount
         */
        public void setCurrentCount(float currentCount) {
            this.currentCount = currentCount > maxCount ? maxCount : currentCount;
            invalidate();
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            // TODO Auto-generated method stub
            super.onDraw(canvas);
    
            mPaint = new Paint();
            //设置抗锯齿效果
            mPaint.setAntiAlias(true);
            //设置画笔颜色
            mPaint.setColor(Color.BLACK);
            int round = mHeight / 2;
    
            RectF rf = new RectF(0, 0, mWidth, mHeight);
            /*绘制圆角矩形,背景色为画笔颜色*/
            mPaint.setColor(Color.rgb(220, 220, 220));
            canvas.drawRoundRect(rf, round, round, mPaint);
            /*设置progress内部是灰色*/
            mPaint.setColor(Color.rgb(242, 241, 246));
            RectF rectBlackBg = new RectF(3, 3, mWidth - 3, mHeight - 3);
            canvas.drawRoundRect(rectBlackBg, round, round, mPaint);
            //设置进度条进度及颜色
            float section = currentCount / maxCount;
            RectF rectProgressBg = new RectF(0, 0, mWidth * section, mHeight);
    
    
            if (section != 0.0f) {
                if (isMax){
                    mPaint.setColor(Color.rgb(75, 199, 247));
                    canvas.drawRoundRect(rectProgressBg, round, round, mPaint);
                }else {
                    RectF s1 = new RectF(0, 0, mWidth * section, mHeight);
                    mPaint.setColor(Color.rgb(83, 202, 247));
                    canvas.drawRoundRect(s1, round, round, mPaint);
                    RectF s2 = new RectF(3, 3, mWidth * section-3, mHeight-3);
                    mPaint.setColor(Color.rgb(210, 232, 245));
                    canvas.drawRoundRect(s2, round, round, mPaint);
                }
            } else {
                mPaint.setColor(Color.TRANSPARENT);
                canvas.drawRoundRect(rectProgressBg, round, round, mPaint);
            }
    
        }
        
        private int dipToPx(int dip) {
            float scale = getContext().getResources().getDisplayMetrics().density;
            return (int) (dip * scale + 0.5f * (dip >= 0 ? 1 : -1));
        }
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            // TODO Auto-generated method stub
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
            int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
            int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
            int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
            //MeasureSpec.EXACTLY,精确尺寸
            if (widthSpecMode == MeasureSpec.EXACTLY || widthSpecMode == MeasureSpec.AT_MOST) {
                mWidth = widthSpecSize;
            } else {
                mWidth = 0;
            }
            //MeasureSpec.AT_MOST,最大尺寸,只要不超过父控件允许的最大尺寸即可,MeasureSpec.UNSPECIFIED未指定尺寸
            if (heightSpecMode == MeasureSpec.AT_MOST || heightSpecMode == MeasureSpec.UNSPECIFIED) {
                mHeight = dipToPx(20);
            } else {
                mHeight = heightSpecSize;
            }
            //设置控件实际大小
            setMeasuredDimension(mWidth, mHeight);
    
    
        }
    
    }
    
    
    

    如有意见和建议,及时沟通。

    相关文章

      网友评论

          本文标题:自定义进度条

          本文链接:https://www.haomeiwen.com/subject/xqvlpftx.html