美文网首页
带文字跟随和小圆点的进度条

带文字跟随和小圆点的进度条

作者: 郑伟1 | 来源:发表于2018-09-03 15:34 被阅读0次

    项目遇到顺手写了个。顺便放这了当个纪念品吧

    图中圈中的即是辣个条
    /**
    
         * 项目名称:AutoSignIn
    
         * 创建者:  郑伟
    
         * 创建时间:2018/5/2 下午2:50
    
         * 功能简介:带文字跟随的进度条 很帅的那种 哈哈哈哈
    
         */
    
        public class CustomProgressView extends View {
    
            private PaintmPaint =new Paint();// 创建一个画笔
    
            private int progress;//进度
    
            private int leftX;//左边开始的位置
    
            private int rightX;//右边结束的位置
    
            private int topY;//上边的间隙
    
            private LinearGradientlg;//渐变色着色器
    
            private StringtextStr;//跟随的文字
    
            private Handlerhandler;
    
            public CustomProgressView(Context context) {
    
                super(context);
    
                init();
    
            }
    
            public CustomProgressView(Context context, @Nullable AttributeSet attrs) {
    
                super(context, attrs);
    
                init();
    
            }
    
            public CustomProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    
                super(context, attrs, defStyleAttr);
    
                init();
    
            }
    
            private void init() {
    
                progress =60;
    
                leftX =0;
    
                topY =50;
    
                lg =new LinearGradient(leftX, topY, rightX -10, topY, 0xffFF9C3A, 0xffF54656,
    
                        Shader.TileMode.MIRROR);
    
                handler =new Handler();
    
                textStr ="热卖中";
    
            }
    
            @Override
    
            protected void onDraw(Canvas canvas) {
    
                super.onDraw(canvas);
    
                rightX = getWidth();
    
                mPaint.setAntiAlias(true);//消除锯齿
    
                //画第一条线
    
                mPaint.setColor(0x11E88FA0);      //设置画笔颜色
    
                mPaint.setStyle(Paint.Style.FILL);  //设置画笔模式为填充
    
                mPaint.setStrokeWidth(5f);        //设置画笔宽度为10px
    
                canvas.drawLine(leftX, topY, rightX, topY, mPaint);
    
                //画第二条线
    
                rightX =rightX /100 *progress;
    
                if (progress ==100)rightX = getWidth();
    
                mPaint.setAlpha(255);
    
                mPaint.setShader(lg);
    
                canvas.drawLine(leftX, topY, rightX -10, topY, mPaint);
    
                //画圆点
    
                mPaint.setColor(0xffF54656);
    
                mPaint.setStyle(Paint.Style.STROKE);//描边
    
                mPaint.setStrokeWidth(3f);
    
                if (rightX!=0){
    
                    canvas.drawCircle(rightX, topY, 8, mPaint);}else {
    
                    canvas.drawCircle(10, topY, 8, mPaint);
    
                }
    
    //画文字
    
                mPaint.setStyle(Paint.Style.FILL);
    
                mPaint.setTextSize(25f);
    
                if (rightX -25 <=25)rightX =25;
    
                if (rightX >= getWidth())rightX = getWidth() -50;
    
                canvas.drawText(textStr, rightX -25, topY +50, mPaint);
    
            }
    
            /**
    
             * 设置进度百分比
    
             *
    
             * @param num 0-100
    
             */
    
            public void setProgress(int num) {
    
                if (num >=100) {
    
                    num =100;
    
                }else if (num <=0) {
    
                    num =0;
    
                }
    
                final int finalNum = num;
    
                new Thread(new Runnable() {
    
                    @Override
    
                    public void run() {
    
                        for (int i =0; i <=finalNum; i++) {
    
                            progress = i;
    
                            try {
    
                                Thread.sleep(10);
    
                                handler.post(new Runnable() {
    
                                    @Override
    
                                    public void run() {
    
                                        invalidate();
    
                                    }
    
                                });
    
                            }catch (InterruptedException e) {
    
                                e.printStackTrace();
    
                            }
    
                        }
    
                    }
    
                }).start();
    
            }
    
            /**
    
             * 设置跟随的文字内容
    
             * @param str
    
             */
    
            public void setTextStr(String str){
    
                textStr = str;
    
            }
    
        }
    
    

    相关文章

      网友评论

          本文标题:带文字跟随和小圆点的进度条

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