圆形进度条_vue 圆形进度条 - CSDN
精华内容
参与话题
  • 实现一个圆形进度条

    千次阅读 2018-12-10 14:22:00
    现在的一些数据运营活动h5页面中,通常回涉及到圆形进度条,比如京东白条,蚂蚁芝麻分。最近做了一个类似的,当然前期想法是用canvas做,但是考虑到低端安卓手机的渲染能力,最终以纯原生css+js实现,总结一下 ...

    现在的一些数据运营活动h5页面中,通常回涉及到圆形的进度条,比如京东白条,蚂蚁芝麻分。最近做了一个类似的,当然前期想法是用canvas做,但是考虑到低端安卓手机的渲染能力,最终以纯原生css+js实现,总结一下

    效果图

    834823-20181210115713022-701419308.png

    思路

    index0底层一个色值#c1a76b的圆,中间index1一个三角形,也就是底边缺的效果,上层index2是白色全圆(带阴影,600和信用极好包裹在里面),另外左右50%各铺一个index3,index4透明层,这个层overflow:hidden,两个层里面都有一个#f7f7f7的填充,通过旋转这两个填充物来实现圆形进度效果(先左边旋转180deg完,再旋转右边)

    动态图

    834823-20181210141212360-1183832493.gif

    贴代码

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                body {
                    background-color: #f7f7f7;
                }
                .new-cricle {
                    position: relative;
                    width: 148px;
                    height: 148px;
                    border-radius: 50%;
                    background-color: #c1a76b;
                    margin: 0 auto;
                    z-index: 0;
                }
    
                .new-cricle .cricle-text {
                    position: absolute;
                    top: 20px;
                    width: 130px;
                    left: 50%;
                    margin-left: -65px;
                    z-index: 5;
                    text-align: center;
                }
                .new-cricle .cricle-text.p0 {
                    top: 28px;
                    font-size: 42px;
                    color: #C09B5B;
                    font-family: DINAlternate-Bold;
                }
                .new-cricle .cricle-text.txt2 {
                    top: 85px;
                    font-size: 16px;
                    color: #C09B5B;
                    font-family: PingFangSC-Medium;
                }
    
                .cricle-left-area {
                    position: absolute;
                    top: -1px;
                    left: -1px;
                    width: 75px;
                    height: 150px;
                    background-color: transparent;
                    overflow: hidden;
                }
                .cricle-left {
                    position: absolute;
                    width: 75px;
                    height: 150px;
                    background-color: #f7f7f7;
                    border-radius: 75px 0 0 75px;
                    transform-origin: right center;
                    z-index: 1;
                    transition: 1.5s all;
                    transform: rotate(35deg);
                }
    
                .cricle-right-area {
                    position: absolute;
                    top: -1px;
                    right: -1px;
                    width: 75px;
                    height: 150px;
                    background-color: transparent;
                    overflow: hidden;
                }
                .cricle-right {
                    position: absolute;
                    width: 75px;
                    height: 150px;
                    background-color: #f7f7f7;
                    border-radius: 0 75px 75px 0;
                    transform-origin: left center;
                    z-index: 2;
                    transition: 1.5s all;
                }
                .triangle {
                    width: 0;
                    height: 0;
                    border-width: 0 80px 80px;
                    border-style: solid;
                    border-color: transparent transparent #f7f7f7;/*透明 透明  白*/
                    position: absolute;
                    bottom: -10px;
                    left: 50%;
                    margin-left: -80px;
                    z-index: 3;
    
                }
                .cricle-all {
                    position: relative;
                    width: 128px;
                    height: 128px;
                    border-radius: 50%;
                    background-color: #fff;
                    box-shadow: 0 2px 15px 0 #D8CEBB;
                    margin: 0 auto;
                    z-index: 4;
                    top: 10px;
                }
            </style>
        </head>
        <body>
            <div class="new-cricle">
                <div class="cricle-left-area">
                    <div class="cricle-left" id="cricleLeft"></div>
                </div>
    
                <div class="cricle-right-area">
                    <div class="cricle-right" id="cricleRight"></div>
                </div>
    
                <div class="triangle"></div>
                <div class="cricle-all"></div>
    
                <div class="cricle-text p0">600</div>
                <div class="cricle-text txt2">信用极好</div>
            </div>
        </body>
    
        <script>
            var $cricleLeft = document.getElementById('cricleLeft')
            var $cricleRight = document.getElementById('cricleRight')
            
            var angle = 360; //旋钮角度
    
            setTimeout(function(){
                if(angle >= 180){
                    $cricleLeft.style.transform = 'rotate(180deg)';
                    setTimeout(function(){
                        $cricleRight.style.transform = 'rotate('+ (angle - 180) +'deg)';
                    }, 1400)
                }else{
                    $cricleLeft.style.transform = 'rotate(' + angle + 'deg)';
                }
            }, 1000)
            
            
        </script>
    </html>

    在线demo地址

    点击进入

    存在问题

    • 左边当旋转到180deg有一个放缓慢的效果

    转载于:https://www.cnblogs.com/liliangel/p/10096248.html

    展开全文
  • 自定义圆形进度条 自定义倒计时进度条

    万次阅读 多人点赞 2016-07-12 15:11:03
    Android自定义View:自定义圆形进度条 自定义倒计时进度条。继承自Textview,可以顺序旋转,可以倒叙旋转,可以设置进度条颜色,填充颜色,可以设置进度条宽度,可以设置填充颜色点击效果,文字点击效果。

    自定义圆形进度条 自定义倒计时进度条

    版权声明:转载必须注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003

    此控件源码已开源到Github:https://github.com/yanzhenjie/CircleTextProgressbar,欢迎Star。

    欢迎加入我博客左侧的QQ交流群一起探讨。


    效果预览

    这里写图片描述

    源代码传送门:https://github.com/yanzhenjie/CircleTextProgressbar

    实现与原理

    这个文字圆形的进度条我们在很多APP中看到过,比如APP欢迎页倒计时,下载文件倒计时等。

    分析下原理,可能有的同学一看到这个自定义View就慌了,这个是不是要继承View啊,是不是要绘制啊之类的,答案是:是的。但是我们也不要担心,实现这个效果实在是so easy。下面就跟我一起来看看核心分析和代码吧。

    原理分析

    首先我们观察上图,需要几个部分组成:
    1. 外面逐渐增加/减少的圆形进度条。
    2. 圆形进度条中间的展示文字。
    3. 圆形进度条外面包裹的圆。
    4. 圆形进度条中间的填充色。
    5. 字体颜色/填充颜色点击变色:ColorStateList类。

    我们分析得出需要四个部分。一看有文字,那么第一个想到的自然是TextView啦,正好可以少做一个字体颜色的记录。中间的填充颜色(原型暂且不考虑)点击时变色,需要ColorStateList类来记录。剩下的进度条、轮廓圆和填充圆是需要我们绘制的。

    我封装的CircleTextProgressbar特色

    CircleTextProgressbar支持自动倒计时,自动减少进度,自动增加进度等。

    如果需要自动走进度的话,设置完你自定义的属性后调用start()方法就可以自动倒计时了,如果想走完后再走一遍自动进度调用一下reStart()就OK了。

    如果不想自动走进度,你可以通过setProgress()来像系统的progress一样修改进度值。

    // 和系统普通进度条一样,0-100。
    progressBar.setProgressType(CircleTextProgressbar.ProgressType.COUNT);
    
    // 改变进度条。
    progressBar.setProgressLineWidth(30);// 进度条宽度。
    
    // 设置倒计时时间毫秒,默认3000毫秒。
    progressBar.setTimeMillis(3500);
    
    // 改变进度条颜色。
    progressBar.setProgressColor(Color.RED);
    
    // 改变外部边框颜色。
    progressBar.setOutLineColor(Color.RED);
    
    // 改变圆心颜色。
    progressBar.setInCircleColor(Color.RED);
    
    // 如果需要自动倒计时,就会自动走进度。
    progressBar.start();
    
    // 如果想自己设置进度,比如100。
    progressBar.setProgress(100);

    踩坑的过程

    其实好久没有写过自定义View了,有些东西还真忘记了,所以写这个View的时候又把之前的坑踩了一遍,为了避免其它同学也被坑,这里把我踩的坑也记录下。

    View绘制区域

    这里我遇到一个问题,因为我们继承的TextView文字多了就是长的,那么绘制出来的圆长宽是一样的,所以在TextView上绘制出来的圆只能看到一部分或者是椭圆的。所以我们要把View的绘制区域扩大。当时我第一个想到的是layout()方法,因为当View的父布局onLayout()的时候会调用Viewlayout()来让子View布局,我重写了layout方法:

    @Override
    public void layout(int left, int top, int right, int bottom) {
        int w = right - left;
        int h = bottom - top;
        int size = w > h ? w : h;
    
        if (w > h) {
            bottom += (size - h);
        } else {
            right += (size - w);
        }
        super.layout(left, top, right, bottom);
    }

    这段代码的原理就是宽和高,那个大,就把view扩大到这么最大的这个值。

    当放了一个ViewLayout时,效果出来没问题,但是我放多个ViewLinearLayout中的时候发现几个View重叠了,哦舍特。我恍然大悟啊,这尼玛人家Layout已经把我绘制区域的宽高指定了,我强行去占领别的View的了。so,我应该重写onMeasure()啊,在测量宽高的时候就告诉父Layout我要多大的地盘:

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();
        int size = width > height ? width : height;
        setMeasuredDimension(size, size);
    }

    这段代码的意思更容易理解,就是看super.onMeasure测量的时候的宽高哪个大,就把宽高都设置成最大的这个值。告诉父Layout我要多大的地盘,那么等我绘制的时候我想怎么玩就怎么玩。

    绘制View的实现

    好了,来到了关键的地方,前面的都搞定了就看我们怎么绘制我们的几个圆圈圈了。画圆圈圈就要重写onDraw()方法啦。

    首先需要一个画笔:

    Paint mPaint = new Paint();
    mPaint.setAntiAlias(true);// 抗锯齿

    拿到绘制区域

    我们可以通过getDrawingRect(Rect)获取到绘制区域,通过绘制区域计算出这个区域可以绘制圆的半径。

    Rect bounds = new Rect();
    
    @Override
    protected void onDraw(Canvas canvas) {
        getDrawingRect(bounds);//获取view的边界
    
        int size = bounds.height() > bounds.width() ? bounds.width() : bounds.height();
        float outerRadius = size / 2; // 计算出绘制圆的半径
    }

    绘制填充圆

    那么刚才提到过点击的时候变色,所以我们要用到ColorStateList,这里做一个初始化,并且支持在xml中定义这个属性:

    // 默认透明填充。
    ColorStateList inCircleColors = ColorStateList.valueOf(Color.TRANSPARENT);
    
    private void initialize(Context ctx, AttributeSet attributeSet) {
        TypedArray typedArray = ctx.obtainStyledAttributes(attributeSet, R.styleable.Progressbar);
        inCircleColors = typedArray.getColorStateList(R.styleable.Progressbar_circle_color);
        typedArray.recycle();
    }

    不明白如何自定View xml属性的同学请求自行Google。

    根据点击、Check、Select状态绘制填充圆的颜色,因为是填充,所以这里PaintStyleFILL

    int circleColor = inCircleColors.getColorForState(getDrawableState(), 0);
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setColor(circleColor);
    canvas.drawCircle(bounds.centerX(), bounds.centerY(), outerRadius - outLineWidth, mPaint);

    圆心是绘制区域的圆心,半径是绘制区域圆的半径减去外部轮廓圆线的宽度。这样正好填充圆和外部轮廓圆不重叠。

    绘制外部边框圆

    这个就简单了,因为是空心的线,所以StyleSTROKE,然后设置线的宽度,画笔的颜色:

    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(outLineWidth);
    mPaint.setColor(outLineColor);
    canvas.drawCircle(bounds.centerX(), bounds.centerY(), outerRadius - outLineWidth / 2, mPaint);

    圆心是绘制区域的圆心,半径是绘制区域圆的半径减去外部轮廓圆线的宽度的一半,这样刚好外部轮廓线和内部填充圆紧靠着。

    绘制TextView的字

    为了我们的绘制和TextView自身的绘制不重叠,我们干掉了super.onDraw(canvas);,所以这里我们要把TextView的字也要写上去。

    首先拿到TextView的默认画笔,设置TextView本身的字体颜色,抗锯齿,为了美观我们强行让文字居中:

    //画字
    Paint paint = getPaint();
    paint.setColor(getCurrentTextColor());
    paint.setAntiAlias(true);
    paint.setTextAlign(Paint.Align.CENTER);
    float textY = bounds.centerY() - (paint.descent() + paint.ascent()) / 2;
    canvas.drawText(getText().toString(), bounds.centerX(), textY, paint);

    绘制进度条

    进度条可不是一个圆了喔,准确的说它是一个圆弧,
    画笔使用默认画笔,设置颜色、StyleSTROKE,设置线的宽度,最后是指定绘制区域和圆心,角度:

    RectF mArcRect = new RectF();
    Rect bounds = new Rect();
    
    @Override
    protected void onDraw(Canvas canvas) {
        getDrawingRect(bounds);//获取view的边界
        ...
    
        // 绘制进度条圆弧。
        mPaint.setColor(progressLineColor);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(progressLineWidth);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        int deleteWidth = progressLineWidth + outLineWidth;
        // 指定绘制区域
        mArcRect.set(bounds.left + deleteWidth / 2, bounds.top + deleteWidth / 2,
        bounds.right -deleteWidth / 2, bounds.bottom - deleteWidth / 2);
        canvas.drawArc(mArcRect, 0, 360 * progress / 100, false, mPaint);
    }

    这里难点在指定绘制区域,因为不能把外部轮廓线覆盖了,所以要贴近外部轮廓线的内部画,所以要最外层绘制圆的区域,所以要减去(外部圆线的宽 + 进度条线的宽) / 2得出来的界线就是进度条的边界。

    绘制和测量的完整代码

    到这里关键代码都撸完了,你可以自己写一个试试了,我这里把完整的onDraw()onMeasure()的源码贴出来:

    private int outLineColor = Color.BLACK;
    private int outLineWidth = 2;
    private ColorStateList inCircleColors = ColorStateList.valueOf(Color.TRANSPARENT);
    private int circleColor;
    private int progressLineColor = Color.BLUE;
    private int progressLineWidth = 8;
    private Paint mPaint = new Paint();
    private RectF mArcRect = new RectF();
    private int progress = 100;
    final Rect bounds = new Rect();
    
    @Override
    protected void onDraw(Canvas canvas) {
        //获取view的边界
        getDrawingRect(bounds);
    
        int size = bounds.height() > bounds.width() ? bounds.width() : bounds.height();
        float outerRadius = size / 2;
    
            //画内部背景
        int circleColor = inCircleColors.getColorForState(getDrawableState(), 0);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(circleColor);
        canvas.drawCircle(bounds.centerX(), bounds.centerY(), outerRadius - outLineWidth, mPaint);
    
        //画边框圆
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(outLineWidth);
        mPaint.setColor(outLineColor);
        canvas.drawCircle(bounds.centerX(), bounds.centerY(), outerRadius - outLineWidth / 2, mPaint);
    
        //画字
        Paint paint = getPaint();
        paint.setColor(getCurrentTextColor());
        paint.setAntiAlias(true);
        paint.setTextAlign(Paint.Align.CENTER);
        float textY = bounds.centerY() - (paint.descent() + paint.ascent()) / 2;
        canvas.drawText(getText().toString(), bounds.centerX(), textY, paint);
    
        //画进度条
        mPaint.setColor(progressLineColor);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(progressLineWidth);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        int deleteWidth = progressLineWidth + outLineWidth;
        mArcRect.set(bounds.left + deleteWidth / 2, bounds.top + deleteWidth / 2,
        bounds.right - deleteWidth / 2, bounds.bottom - deleteWidth / 2);
    
        canvas.drawArc(mArcRect, 0, 360 * progress / 100, false, mPaint);
    }
    
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int lineWidth = 4 * (outLineWidth + progressLineWidth);
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();
        int size = (width > height ? width : height) + lineWidth;
        setMeasuredDimension(size, size);
    }

    目前已知的兼容问题修复

    1. 目前CircleTextProgressbarReletiveLayot中高度会变大,导致进度条会有一点点扁。修复方法如下:
      如果你要在ReletiveLayot中使用CircleTextProgressbar,就不要重写onMeasure()方法,然后在xml中指定CircleTextProgressbar的宽高就好,比如都指定为50dp,然后就没有问题啦。

    上述完整源码:https://github.com/yanzhenjie/CircleTextProgressbar,欢迎Star。


    版权声明:转载必须注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003

    展开全文
  • 加载圆形进度条

    千次阅读 2016-04-19 15:31:46
    项目需求,需要类似于支付宝支付时的圆形进度条,主要效果是圆形有无到有,再变成由有到无,如果加载成功,则在有无到有结束的时候,显示对号 具体效果图: 类似的实现,在github上有一个开源项目,github,我...

    项目需求,需要类似于支付宝支付时的圆形进度条,主要效果是圆形有无到有,再变成由有到无,如果加载成功,则在有无到有结束的时候,显示对号
    具体效果图:
    这里写图片描述
    这里写图片描述

    类似的实现,在github上有一个开源项目,github,我下载下来,在原有代码的基础上进行了修改
    CusImage.java

    
    public class CusImage extends View {
    
        private Paint myPaint;
        private Paint myFramePaint;
        public TextView value;
        private float startAngle;
        public float temp;
        float sweepAngle;
        private int flag = 0;
        RectF rect;
        private MasterLayout m;
        int pix = 0;
        public boolean progressFlag = true;//两种绘画方式,由无到有为true,由有到无为false
    
        public CusImage(Context context, AttributeSet attrs, MasterLayout m) {
            super(context, attrs);
            this.m = m;
            init();
        }
    
        public CusImage(Context context, MasterLayout m) {
            super(context);
            this.m = m;
            init();
        }
    
        private void init() {
    
            myPaint = new Paint();
            DisplayMetrics metrics = getContext().getResources()
                    .getDisplayMetrics();
            int width = metrics.widthPixels;
            int height = metrics.heightPixels;
            float scarea = width * height;
            pix = (int) Math.sqrt(scarea * 0.07);
    
            myPaint.setAntiAlias(true);
            myPaint.setStyle(Paint.Style.STROKE);
            myPaint.setColor(getResources().getColor(R.color.baseGreen)); // Edit this to change
            // progress arc color.
            myPaint.setStrokeWidth(15);
    
            myFramePaint = new Paint();
            myFramePaint.setAntiAlias(true);
            myFramePaint.setColor(Color.TRANSPARENT);
    
            float startx = (float) (pix * 0.05);
            float endx = (float) (pix * 0.95);
            float starty = (float) (pix * 0.05);
            float endy = (float) (pix * 0.95);
            rect = new RectF(startx, starty, endx, endy);
        }
    
        public void setupprogress(int progress) {
    
            // Updating progress arc
    
            sweepAngle = (float) (progress * 3.6);
            //Log.e("sweepAngle", sweepAngle+"");
    
        }
    
        public void setupprogress2(int progress) {
    
            // Updating progress arc
    
            sweepAngle = (float) (progress * 3.6) - 360;
            //Log.e("sweepAngle", sweepAngle+"");
    
        }
    
    
        public void reset() {
    
            // Resetting progress arc
    
            sweepAngle = 0;
            startAngle = -90;
            flag = 1;
        }
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    
            int desiredWidth = pix;
            int desiredHeight = pix;
            int widthMode = MeasureSpec.getMode(widthMeasureSpec);
            int widthSize = MeasureSpec.getSize(widthMeasureSpec);
            int heightMode = MeasureSpec.getMode(heightMeasureSpec);
            int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    
            int width;
            int height;
    
            if (widthMode == MeasureSpec.EXACTLY) {
    
                width = widthSize;
            } else if (widthMode == MeasureSpec.AT_MOST) {
    
                width = Math.min(desiredWidth, widthSize);
            } else {
    
                width = desiredWidth;
            }
    
            if (heightMode == MeasureSpec.EXACTLY) {
    
                height = heightSize;
            } else if (heightMode == MeasureSpec.AT_MOST) {
    
                height = Math.min(desiredHeight, heightSize);
            } else {
    
                height = desiredHeight;
            }
    
            setMeasuredDimension(width, height);
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            /*if(progressFlag==1){
                canvas.drawArc(rect, startAngle, sweepAngle, false, myPaint);
                startAngle = -90;
                    invalidate();
    
             else if (flag == 1) {
    
                    sweepAngle = 0;
                    startAngle = -90;
                    flag = 0;
                    invalidate();
                } else {
                    reset();
                    invalidate();
                    sweepAngle = 0;
                    startAngle = -90;
                    m.finalAnimation();
    
                }
            }else{
                canvas.drawArc(rect, startAngle, sweepAngle, false, myPaint);
                sweepAngle = 270;
    
                if (startAngle < 360 && flag == 0) {
    
                    invalidate();
    
                } else {
                    reset();
                    invalidate();
                    sweepAngle = 0;
                    startAngle = -90;
                    m.finalAnimation();
    
                }
            }*/
    
            canvas.drawArc(rect, startAngle, sweepAngle, false, myPaint);
            startAngle = -90;
            invalidate();
            //取消注释,可以演示对号效果
                /*if(progressFlag==true){
    
                    m.finalAnimation();
                }*/
        }
    
    
    }

    MasterLayout.java

    //圆形进度条
    public class MasterLayout extends FrameLayout  {
    
        public CusImage cusview;
        public int pix = 0;
        public RectF rect;
    
        private ImageView buttonimage, fillcircle, full_circle_image, arc_image;
    
        private Path  tick,  download_triangle, download_rectangle;
    
        private Bitmap third_icon_bmp, second_icon_bmp, first_icon_bmp;
    
        private Paint stroke_color, fill_color, icon_color, final_icon_color;
    
        private AnimationSet in, out;
    
        private RotateAnimation arcRotation;
    
        private ScaleAnimation new_scale_in, scale_in, scale_out;
    
        private AlphaAnimation fade_in, fade_out;
    
        public int flg_frmwrk_mode = 0;
        boolean first_click = false;
        Canvas full_circle_canvas;
    
        public MasterLayout(Context context, AttributeSet attrs) {
            super(context, attrs);
            // TODO Auto-generated constructor stub
    
            initialise();
            setpaint();
            setAnimation();
            displayMetrics();
            iconCreate();
            init(true);
    
        }
    
        public MasterLayout(Context context) {
            super(context);
    
            setBackgroundColor(Color.CYAN);
            initialise();
            setpaint();
            setAnimation();
            displayMetrics();
            iconCreate();
            init(true);
    
        }
    
        private void initialise() {
            cusview = new CusImage(getContext(), this);
            buttonimage = new ImageView(getContext());
            full_circle_image = new ImageView(getContext());
            arc_image = new ImageView(getContext());
    
            fillcircle = new ImageView(getContext());
            cusview.setClickable(false);
            buttonimage.setClickable(false);
            full_circle_image.setClickable(false);
            arc_image.setClickable(false);
    
            cusview.setClickable(false);
            setClickable(true);
            fillcircle.setClickable(false);
    
        }
    
        private void setpaint() {
    
            // Setting up color
    
            stroke_color = new Paint(Paint.ANTI_ALIAS_FLAG);
            stroke_color.setAntiAlias(true);
            stroke_color.setColor(getResources().getColor(R.color.baseGreen)); // Edit this to change
            // the circle color
            stroke_color.setStrokeWidth(15);
            stroke_color.setStyle(Paint.Style.STROKE);
    
            icon_color = new Paint(Paint.ANTI_ALIAS_FLAG);
            icon_color.setColor(getResources().getColor(R.color.baseGreen));
            icon_color.setStyle(Paint.Style.FILL_AND_STROKE); // Edit this to change
            // the icon color
            icon_color.setAntiAlias(true);
    
            final_icon_color = new Paint(Paint.ANTI_ALIAS_FLAG);
            final_icon_color.setColor(getResources().getColor(R.color.baseGreen)); // Edit this to change the final
            // icon color
            final_icon_color.setStrokeWidth(15);
            final_icon_color.setStyle(Paint.Style.STROKE);
            final_icon_color.setAntiAlias(true);
    
            fill_color = new Paint(Paint.ANTI_ALIAS_FLAG);
            fill_color.setColor(getResources().getColor(R.color.baseGreen)); // Edit this to change the
            // circle fill color
            //fill_color.setStrokeWidth(15);
            fill_color.setStyle(Paint.Style.FILL_AND_STROKE);
            fill_color.setAntiAlias(true);
    
        }
    
        private void setAnimation() {
    
            // Setting up and defining view animations.
    
            arcRotation = new RotateAnimation(0.0f, 360.0f,
                    Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                    0.5f);
            arcRotation.setDuration(1000);
    
            in = new AnimationSet(true);
            out = new AnimationSet(true);
    
            out.setInterpolator(new AccelerateDecelerateInterpolator());
            in.setInterpolator(new AccelerateDecelerateInterpolator());
    
            scale_in = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f,
                    Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                    0.5f);
            scale_out = new ScaleAnimation(1.0f, 3.0f, 1.0f, 3.0f,
                    Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                    0.5f);
            new_scale_in = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f,
                    Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                    0.5f);
    
            new_scale_in.setDuration(200);
    
            fade_in = new AlphaAnimation(0.0f, 1.0f);
            fade_out = new AlphaAnimation(1.0f, 0.0f);
    
            scale_in.setDuration(150);
            scale_out.setDuration(150);
            fade_in.setDuration(150);
            fade_out.setDuration(150);
    
            in.addAnimation(scale_in);
            in.addAnimation(fade_in);
            out.addAnimation(fade_out);
            out.addAnimation(scale_out);
    
            arcRotation.setAnimationListener(new AnimationListener() {
    
                @Override
                public void onAnimationStart(Animation arg0) {
                    // TODO Auto-generated method stub
    
                }
    
                @Override
                public void onAnimationRepeat(Animation arg0) {
                    // TODO Auto-generated method stub
    
                }
    
                @Override
                public void onAnimationEnd(Animation arg0) {
                    // TODO Auto-generated method stub
    
                    first_click = false;
                    buttonimage.startAnimation(out);
    
                }
            });
    
            out.setAnimationListener(new AnimationListener() {
    
                @Override
                public void onAnimationStart(Animation animation) {
                    // TODO Auto-generated method stub
                    System.out.println("print this");
                }
    
                @Override
                public void onAnimationRepeat(Animation animation) {
                    // TODO Auto-generated method stub
    
                }
    
                @Override
                public void onAnimationEnd(Animation animation) {
                    // TODO Auto-generated method stub
    
                    buttonimage.setVisibility(View.GONE);
                    buttonimage.setImageBitmap(second_icon_bmp);
                    buttonimage.setVisibility(View.VISIBLE);
                    buttonimage.startAnimation(in);
                    arc_image.setVisibility(View.GONE);
                    full_circle_image.setVisibility(View.VISIBLE);
                    cusview.setVisibility(View.VISIBLE);
    
                    flg_frmwrk_mode = 2;
    
                    System.out.println("flg_frmwrk_mode" + flg_frmwrk_mode);
    
    
                }
            });
    
            new_scale_in.setAnimationListener(new AnimationListener() {
    
                @Override
                public void onAnimationStart(Animation animation) {
                    // TODO Auto-generated method stub
    
                }
    
                @Override
                public void onAnimationRepeat(Animation animation) {
                    // TODO Auto-generated method stub
    
                }
    
                @Override
                public void onAnimationEnd(Animation animation) {
                    // TODO Auto-generated method stub
                    cusview.setVisibility(View.GONE);
                    buttonimage.setVisibility(View.VISIBLE);
                    buttonimage.setImageBitmap(third_icon_bmp);
                    full_circle_canvas.drawArc(rect, 0, 360, false, stroke_color);
                    flg_frmwrk_mode = 3;
                    buttonimage.startAnimation(in);
    
    
                }
            });
    
        }
    
        private void displayMetrics() {
    
            // Responsible for calculating the size of views and canvas based upon
            // screen resolution.
    
            DisplayMetrics metrics = getContext().getResources()
                    .getDisplayMetrics();
    
            int width = metrics.widthPixels;
            int height = metrics.heightPixels;
            float scarea = width * height;
            pix = (int) Math.sqrt(scarea * 0.07);
    
        }
    
        private void iconCreate() {
    
            // Creating icons using path
            // Create your own icons or feel free to use these
    
    /*      play = new Path();
            play.moveTo(pix * 40 / 100, pix * 36 / 100);
            play.lineTo(pix * 40 / 100, pix * 63 / 100);
            play.lineTo(pix * 69 / 100, pix * 50 / 100);
            play.close();
    
            stop = new Path();
            stop.moveTo(pix * 38 / 100, pix * 38 / 100);
            stop.lineTo(pix * 62 / 100, pix * 38 / 100);
            stop.lineTo(pix * 62 / 100, pix * 62 / 100);
            stop.lineTo(pix * 38 / 100, pix * 62 / 100);
            stop.close();*/
    
            download_triangle = new Path();
            download_triangle.moveTo(pix * 375 / 1000, (pix / 2)
                    + (pix * 625 / 10000) - (pix * 3 / 100));
            download_triangle.lineTo(pix / 2, (pix * 625 / 1000)
                    + (pix * 625 / 10000) - (pix * 3 / 100));
            download_triangle.lineTo(pix * 625 / 1000, (pix / 2)
                    + (pix * 625 / 10000) - (pix * 3 / 100));
            download_triangle.close();
    
            download_rectangle = new Path();
            download_rectangle.moveTo(pix * 4375 / 10000, (pix / 2)
                    + (pix * 625 / 10000) - (pix * 3 / 100));
            download_rectangle.lineTo(pix * 5625 / 10000, (pix / 2)
                    + (pix * 625 / 10000) - (pix * 3 / 100));
            download_rectangle.lineTo(pix * 5625 / 10000, (pix * 375 / 1000)
                    + (pix * 625 / 10000) - (pix * 3 / 100));
            download_rectangle.lineTo(pix * 4375 / 10000, (pix * 375 / 1000)
                    + (pix * 625 / 10000) - (pix * 3 / 100));
            download_rectangle.close();
    
            tick = new Path();
            tick.moveTo(pix * 30 / 100, pix * 50 / 100);
            tick.lineTo(pix * 45 / 100, pix * 625 / 1000);
            tick.lineTo(pix * 65 / 100, pix * 350 / 1000);
    
        }
        //第一次初始化,默认显示圆形,其他调用,不显示圆形
        public void init(boolean isFirstInit) {
    
            // Defining and drawing bitmaps and assigning views to the layout
    
            FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(
                    FrameLayout.LayoutParams.WRAP_CONTENT,
                    FrameLayout.LayoutParams.WRAP_CONTENT);
    
            lp.setMargins(10, 10, 10, 10);
    
            fillcircle.setVisibility(View.GONE);
    
            Bitmap.Config conf = Bitmap.Config.ARGB_8888; // see other conf types
            Bitmap full_circle_bmp = Bitmap.createBitmap(pix, pix, conf);
            Bitmap arc_bmp = Bitmap.createBitmap(pix, pix, conf);
            Bitmap fill_circle_bmp = Bitmap.createBitmap(pix, pix, conf);
    
            first_icon_bmp = Bitmap.createBitmap(pix, pix, conf); // Bitmap to draw
            // first icon(
            // Default -
            // Play )
    
            second_icon_bmp = Bitmap.createBitmap(pix, pix, conf); // Bitmap to draw
            // second icon(
            // Default -
            // Stop )
    
            third_icon_bmp = Bitmap.createBitmap(pix, pix, conf); // Bitmap to draw
            // third icon(
            // Default -
            // Tick )
    
            //Canvas first_icon_canvas = new Canvas(first_icon_bmp);
            //Canvas second_icon_canvas = new Canvas(second_icon_bmp);
            Canvas third_icon_canvas = new Canvas(third_icon_bmp);
            //Canvas fill_circle_canvas = new Canvas(fill_circle_bmp);
            full_circle_canvas = new Canvas(full_circle_bmp);
            //Canvas arc_canvas = new Canvas(arc_bmp);
    
            float startx = (float) (pix * 0.05);
            float endx = (float) (pix * 0.95);
            System.out.println("full circle " + full_circle_canvas.getWidth()
                    + full_circle_canvas.getHeight());
            float starty = (float) (pix * 0.05);
            float endy = (float) (pix * 0.95);
            rect = new RectF(startx, starty, endx, endy);
    
            //first_icon_canvas.drawPath(play, fill_color);   // Draw second icon on canvas( Default - Stop ). 
            // *****Set your second icon here****
    
    
            //second_icon_canvas.drawPath(stop, icon_color);  // Draw second icon on canvas( Default - Stop ). 
            // *****Set your second icon here****
    
            third_icon_canvas.drawPath(tick, final_icon_color); // Draw second icon on canvas( Default - Stop ). 
            // *****Set your second icon here****
    
            if(isFirstInit){
                full_circle_canvas.drawArc(rect, 0, 360, false, stroke_color);
            }
    
            //fill_circle_canvas.drawArc(rect, 0, 360, false, fill_color);
            //arc_canvas.drawArc(rect, -80, 340, false, stroke_color);
    
            buttonimage.setImageBitmap(first_icon_bmp);
            flg_frmwrk_mode = 1;
            fillcircle.setImageBitmap(fill_circle_bmp);
            full_circle_image.setImageBitmap(full_circle_bmp);
            arc_image.setImageBitmap(arc_bmp);
    
            cusview.setVisibility(View.GONE);
    
            addView(full_circle_image, lp);
            addView(arc_image, lp);
            addView(fillcircle, lp);
            addView(buttonimage, lp);
            addView(cusview, lp);
    
            buttonimage.setVisibility(View.GONE);
            fillcircle.setVisibility(View.GONE);
        }
    
        public void animation() {
    
            // Starting view animation and setting flag values
    
            if (first_click == false) {
                if (flg_frmwrk_mode == 1) {
                    //去掉所有views,重新初始化,进行动画
                    removeAllViews();
                    fill_color.setColor(getResources().getColor(R.color.black));
                    init(false);
                    first_click = true;
                    full_circle_image.setVisibility(View.GONE);
                    /*arc_image.setVisibility(View.VISIBLE);
                    arc_image.startAnimation(arcRotation);*/
    
                    buttonimage.setVisibility(View.GONE);
                    buttonimage.setImageBitmap(second_icon_bmp);
                    buttonimage.setVisibility(View.VISIBLE);
                    buttonimage.startAnimation(in);
                    arc_image.setVisibility(View.GONE);
                    full_circle_image.setVisibility(View.VISIBLE);
                    cusview.setVisibility(View.VISIBLE);
    
                }
            }
    
        }
    
        public void finalAnimation() {
    
            // Responsible for final fill up animation
    
            buttonimage.setVisibility(View.GONE);
            fillcircle.setVisibility(View.VISIBLE);
    
            fillcircle.startAnimation(new_scale_in);
    
        }
    
        public void reset() {
    
            // Responsible for resetting the state of view when Stop is clicked
    
            cusview.reset();
            cusview.setVisibility(View.GONE);
            buttonimage.setImageBitmap(first_icon_bmp);
            flg_frmwrk_mode = 1;
    
        }
        //点击控件,需要先填满圆形,然后将圆形取消,进行动画
        public void onClick(){
            removeAllViews();
            init(false);
            full_circle_canvas.drawArc(rect, 0, 360, false, fill_color);
        }
    
    }
    

    MainActivity.java

     mIdTextViewSign.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mIdTextViewSign.setClickable(false);
                    mMasterLayout01.onClick();
                    mIdTextViewSign.setTextColor(getResources().getColor(R.color.white));
                    new Handler().postDelayed(new Runnable() {
    
                        public void run() {
                            //mMasterLayout01.removeViews();
                            mIdTextViewSign.setVisibility(View.GONE);
                            mMasterLayout01.animation(); //Need to call this method for animation and progression
    
                            if (mMasterLayout01.flg_frmwrk_mode == 1) {
                                if(mTimer==null){
                                    mTimer = new Timer();
                                    mTimerTask = new TimerTask() {
                                        @Override
                                        public void run() {
                                            progress++;
                                            if (progress == 100) {
                                                progress = 0;
    
                                                if (mMasterLayout01.cusview.progressFlag) {
                                                    mMasterLayout01.cusview.progressFlag = false;
                                                } else {
                                                    mMasterLayout01.cusview.progressFlag = true;
                                                }
    
                                            }
    
                                            if (mMasterLayout01.cusview.progressFlag) {
                                                mMasterLayout01.cusview.setupprogress(progress);
                                            } else {
                                                mMasterLayout01.cusview.setupprogress2(progress);
                                            }
                                        }
                                    };
                                    //开始一个定时任务
                                    mTimer.schedule(mTimerTask, 0, 10);
                                }
    
    
                            }
                        }
    
                    }, 500);
    
    
                }
            });

    activity_main.xml

    //省略...
     <FrameLayout
            android:id="@+id/id_frameLayoutSign"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="45dp">
            <boerpower.com.electricmanager.CustomViews.MasterLayout
                android:id="@+id/MasterLayout01"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:clickable="true"
                >
            </boerpower.com.electricmanager.CustomViews.MasterLayout>
            <TextView
                android:id="@+id/id_textViewSign"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#2ebea0"
                android:textSize="18sp"
                android:layout_margin="10dp"
                android:textStyle="bold"
                android:text="签到"
                android:layout_gravity="center"
                />
        </FrameLayout>
    
    展开全文
  • 圆形百分比进度条效果

    千次阅读 2019-05-20 16:43:56
    今天写篇文章和大家分享一个常用的效果,圆形百分比进度条。前段时间我有个页面需要该效果,就在网上看了下,实现方式有好几种,我找了一种比较好实现的给大家一步步讲解。 如果您觉得对您有帮助的话,请给我个赞或...

    一、前言

    最近有点懈怠啊,没怎么整理发布博客。今天写篇文章和大家分享一个常用的效果,圆形百分比进度条。前段时间我有个页面需要该效果,就在网上看了下,实现方式有好几种,我找了一种比较好实现的给大家一步步讲解。

    如果您觉得对您有帮助的话,请给我个赞或评论,谢谢~

    先放效果图:
    在这里插入图片描述
    参考别人的链接:HTML+CSS 实现环形比例图效果

    二、整体思路

    1.设置一个浅灰色的圆当背景,里面只有两个子元素,
    一个在右侧的浅蓝色半圆,一个小一点的白色圆在中间做遮罩以及显示文字。

    <div class="bg">
    	<div class="circle-right"></div>
    	<div class="text">%</div>
    </div>
    

    在这里插入图片描述

    2.当进度小于等于50%时,往右侧浅蓝色的半圆里添加一子元素,是个填充满它的灰色半圆,
    根据进度的值对该灰色半圆进行顺时针旋转,就会显示出代表进度的浅蓝色。
    圆一圈是360度,我们这里的满进度是100,
    那当进度为10%时,就让灰色半圆顺时针旋转36度,就可以显示出36度范围的浅蓝色。

    <div class="bg">
    	<div class="circle-right">
    		<div class="mask-right" style="transform:rotate(36deg)"></div>
    	</div>
    	<div class="text">10%</div>
    </div>
    

    在这里插入图片描述
    在这里插入图片描述

    3.当进度大于50时,往右侧浅蓝色半圆后面添加一个元素,是个左侧的浅蓝色半圆,
    该左侧半圆里包含一子元素是个填充满它的灰色半圆,于是左侧展示的效果是灰色半圆。
    右侧浅蓝色半圆代表进度50,剩下的进度则是左侧半圆里灰色半圆的顺时针旋转度数,来展示剩下的浅蓝色进度。
    例如当进度为60%时,右侧不动,左侧半圆里灰色半圆顺时针旋转36度,来展示36度范围的浅蓝色。

    <div class="bg">
    	<div class="circle-right"></div>
    	<div class="circle-left">
    		<div class="mask-left" style="transform: rotate(36deg);"></div>
    	</div>
    	<div class="text">60%</div>
    </div>
    

    在这里插入图片描述
    在这里插入图片描述

    三、完整案例

    通过上面的介绍,我想大家对这个实现的流程已经有了思路,现在我放出完整的demo给大家,直接复制就可以看到效果:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>圆形百分比进度条效果</title>
    		<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.bg{
    			width: 200px;
    			height: 200px;
    			border-radius: 100%;
    			background: #ccc;
    			position: relative;
    			margin: 20px auto;
    		}
    		.circle-right, .circle-left, .mask-right, .mask-left{
    			width: 200px;
    			height: 200px;
    			border-radius: 100%;
    			position: absolute;
    			top: 0;
    			left: 0;
    		}
    		.circle-right, .circle-left{
    			background: skyblue;
    		}
    		.mask-right, .mask-left{
    			background: #ccc;
    		}
    		.circle-right, .mask-right{
    			clip: rect(0,200px,200px,100px);
    		}
    		.circle-left, .mask-left{
    			clip: rect(0,100px,200px,0);
    		}
    		.text{
    			width: 160px;
    			height: 160px;
    			line-height: 160px;
    			text-align: center;
    			font-size: 34px;
    			color: deepskyblue;
    			border-radius: 100%;
    			background: #fff;
    			position: absolute;
    			top: 20px;
    			left: 20px;
    		}
    		</style>
    	</head>
    	<body>
    		<div class="bg">
    			<div class="circle-right"></div>
    			<div class="text">90%</div>
    		</div>
    		
    		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				//获取百分比值
    				var value = parseInt($('.text').html());
    				
    				//当百分比小于等于50
    				if(value <= 50){
    					var html = '';
    					
    					html += '<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
    					
    					//元素里添加子元素
    					$('.circle-right').append(html);
    				}else{
    					value -= 50;
    					var html = '';
    					
    					html += '<div class="circle-left">';
    					html += '<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
    					html += '</div>';
    					
    					//元素后添加元素
    					$('.circle-right').after(html);
    				}
    			})
    		</script>
    		
    	</body>
    </html>
    

    四、添加过渡

    在完成我们要的效果后,我们可以给它添加一个过渡的效果,我这里是用计时器来完成的,过渡的其实不是很自然,大家也可以用其他的方式来实现。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>圆形百分比进度条效果</title>
    		<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.bg{
    			width: 200px;
    			height: 200px;
    			border-radius: 100%;
    			background: #ccc;
    			position: relative;
    			margin: 20px auto;
    		}
    		.circle-right, .circle-left, .mask-right, .mask-left{
    			width: 200px;
    			height: 200px;
    			border-radius: 100%;
    			position: absolute;
    			top: 0;
    			left: 0;
    		}
    		.circle-right, .circle-left{
    			background: skyblue;
    		}
    		.mask-right, .mask-left{
    			background: #ccc;
    		}
    		.circle-right, .mask-right{
    			clip: rect(0,200px,200px,100px);
    		}
    		.circle-left, .mask-left{
    			clip: rect(0,100px,200px,0);
    		}
    		.text{
    			width: 160px;
    			height: 160px;
    			line-height: 160px;
    			text-align: center;
    			font-size: 34px;
    			color: deepskyblue;
    			border-radius: 100%;
    			background: #fff;
    			position: absolute;
    			top: 20px;
    			left: 20px;
    		}
    		</style>
    	</head>
    	<body>
    		<div class="bg">
    			<div class="circle-right"></div>
    			<div class="text">10%</div>
    		</div>
    		
    		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    		<script type="text/javascript">
    			$(function(){				
    				//获取百分比值
    				var num = parseInt($('.text').html());
    				
    				//通过计时器来显示过渡的百分比进度
    				var temp = 0;
    				var timer = setInterval(function(){
    					calculate(temp);
    					//清除计时器结束该方法调用
    					if(temp == num){
    						clearInterval(timer);
    					}
    					temp++;
    				},30)
    
    				//改变页面显示百分比
    				function calculate(value){
    					//改变页面显示的值
    					$('.text').html(value + '%');
    					
    					//清除上次调用该方法残留的效果
    					$('.circle-left').remove();
    					$('.mask-right').remove();
    					
    					//当百分比小于等于50
    					if(value <= 50){
    						var html = '';
    						
    						html += '<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
    						
    						//元素里添加子元素
    						$('.circle-right').append(html);
    					}else{
    						value -= 50;
    						var html = '';
    						
    						html += '<div class="circle-left">';
    						html += '<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
    						html += '</div>';
    						
    						//元素后添加元素
    						$('.circle-right').after(html);
    					}
    				}
    			})
    		</script>
    		
    	</body>
    </html>
    
    
    展开全文
  • 可附带图片的圆形进度条

    千次阅读 2015-12-21 09:31:26
    我们可以把需求拆分为两个子任务,首先,如何使圆形进度条的加载进度随着数据请求的进度 进行更新,第二,如何添加一个logo图片到圆形进度条中间。下图,大家先直观地感受一下进度条的视觉效果 总体思路 根据需求...
  • 这是心理上先入为主的就这么认为了,其实实现很简单,下面一步一步的详细剖析自定义圆形进度条的步骤。首先看效果图: 篇幅有点长,耐心看完肯定get新技能。看每一个视图都包含了些什么。 最里层一个蓝色圆形 中间...
  • 圆形进度条-图片方式

    2019-02-27 16:40:32
    此方式有别于之前的一篇纯绘制,这个基于图片,通过路径剪裁,达到显示的目的 代码跟之前有做删减 import QtQuick 2.0 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 Item { ...
  • 上截图 代码片段 package org.zhx.rounprogress; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android....import android.graph...
  • 自己定义一个带进度的圆形进度条

    千次阅读 2017-10-09 19:22:20
    很多的时候,系统自带的View满足不了我们功能的需求,那么我们就需要自己来自定义一个能满足我们需求的View,自定义View我们需要先继承View,添加类的构造方法,重写父类View的一些方法,例如onDraw,为了我们自定义...
  • 自定义android进度条,带有进度指示,项目详情:http://blog.csdn.net/xiaanming/article/details/10298163
  • 这是一个自定义带数字的圆形进度条和中间是文字的圆形进度条View。自定义View的基本流程在这里就不多说了。(效果图在最后) 自定义View分好几种。我这个Demo主要用到了自己绘画的和组合的View。 首先看怎么自定义带...
  • Android圆形进度条

    千次阅读 2018-08-15 20:42:10
    自定义圆形进度条,见下图: 1、自定义进度条类: package com.example.msh.view; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android...
  • WPF实现的圆形进度条

    2019-03-16 11:19:24
    WPF实现的圆形进度条,仿安卓上常见的圆形进度条效果。中间带进度的文字显示,有需要的可以参考下
  • android圆形进度条

    2017-12-07 09:13:08
     1、本篇博文给大家介绍一个圆形进度条控件的绘制,首先看一下效果,如下:当点击圆形按钮时,开始加载条,当松开时,进度条回归其实位置; 二、结构分析 为了达到以上效果,我们首先要清楚改...
  • WPF圆形进度条制作

    千次阅读 2016-02-23 18:07:25
    WPF和Winform都为我们提供了...因此,本篇文章要为大家展示一种圆形进度条。  为了方便进度条的复用,我们将进度条制作成用户控件。 代码展示: 圆形进度条用户控件的制作: LoadingWait.xaml 进度条.LoadingWait
  • android自定义圆形进度条

    千次阅读 2017-11-08 21:05:07
    Android自定义实现圆形进度条   用户可以自定义文字、图标,背景颜色,字体颜色等,废话不多
  • HTML 圆形进度条

    千次阅读 2019-02-11 16:54:37
    效果截图: Html页: &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&...圆形进度条&lt;/title&gt;  &lt;link href=&q
  • 自定义 View 真的有那么难吗?no,no,no,并非是这样。。。 ## 这个是摘要 ``` public static void main(String[] args){ System.out.println("hello world") } ```
  • h5圆形进度条

    千次阅读 2017-09-26 16:46:16
    组件封装文件 circlebar.js 代码如下: (function() { var context, centerX, centerY; var rad = Math.PI * 2 / 100; //将360度分成100份,每份为rad度 var radius = 25; //默认半径 var lineWidth = 5;...
  • Android 自定义漂亮的圆形进度条

    万次阅读 2017-08-05 16:57:43
    公司有这样一个需求所以现在就将它抽取出来不废话,直接上代码 自定义view import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics....
1 2 3 4 5 ... 20
收藏数 11,727
精华内容 4,690
关键字:

圆形进度条