美文网首页android知识干货UI效果仿写Android知识
Android-自定义ProgressBar实现圆弧进度条

Android-自定义ProgressBar实现圆弧进度条

作者: 懒猫来 | 来源:发表于2016-09-09 23:51 被阅读4165次

    继承于ProgressBar实现,保留了Progressbar的特性,源码在文尾。。

    demo.gif

    参数

    name format description
    borderWidth integer 圆弧边框的宽度
    progressStyle tick/arc 进度条类型,tick为带刻度的
    radius integer 半径
    arcbgColor color 圆弧的边框背景
    degree integer 弧度,设置为0即为圆形进度条,180为半圆
    tickWidth integer 刻度的宽度
    tickDensity integer 刻度的密度 2~8 越小越密
    bgShow boolean 是否显示圆弧边框背景
    arcCapRound boolean 圆弧的笔触是否为圆形,tick无效

    interface

    提供了绘制圆弧中间区域的一个接口 ,可根据自己的需求自由绘制

    /**
       * 
       * @param canvas  
       * @param rectF  圆弧的Rect
       * @param x      圆弧的中心x
       * @param y      圆弧的中心y
       * @param storkeWidth   圆弧的边框宽度
       * @param progress      当前进度
       */
    public interface  OnCenterDraw {
      public  void draw(Canvas canvas, RectF rectF, float x, float y,float storkeWidth,int progress);
    }
    

    默认提供了两个实现
    onImageCenter and OnTextCenter

    Use

        <com.czp.library.ArcProgress
            android:id="@+id/myProgress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:degree="0"
            app:progressStyle="arc" />
    
    
        <com.czp.library.ArcProgress
            android:id="@+id/myProgress01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/myProgress"
            app:radius="80dp"
            app:progressColor="@color/progressColor"
            app:tickDensity="3" />
    
        <com.czp.library.ArcProgress
            android:id="@+id/myProgress02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/myProgress"
            app:radius="90dp"
            app:arcCapRound="true"
            app:degree="180"
            app:progressStyle="arc"
            app:progressColor="@color/progressColorBlue"
            app:tickDensity="3" />
    
     mProgress.setOnCenterDraw(new ArcProgress.OnCenterDraw() {
                @Override
                public void draw(Canvas canvas, RectF rectF, float x, float y, float storkeWidth,int progress) {
                    Paint textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
                    textPaint.setStrokeWidth(35);
                    textPaint.setColor(getResources().getColor(R.color.textColor));
                    String progressStr = String.valueOf(progress+"%");
                    float textX = x-(textPaint.measureText(progressStr)/2);
                    float textY = y-((textPaint.descent()+textPaint.ascent())/2);
                    canvas.drawText(progressStr,textX,textY,textPaint);
                }
            });
    

    依赖

    dependencies {
      compile 'com.czp.arcProgressBar:ArcProgressBar:1.0.1'
    }
    

    写完搜了一下。。。貌似重复造了个轮子。。。
    后续补上几个知识点~哇哈啊哈啊

    源码下载地址
    喜欢的不妨来个Star呀~

    相关文章

      网友评论

      • 一切从简:感谢分享!!整体效果不错,是这边UI设计的效果。。但是有几个小问题,准备自己clone代码 解决一下!
        问题:1、完成和未完成的arc 需要上下换个位置,不然显示上看着别扭(蓝色的那个)
        2、4楼说的没法居中确实存在。。
        一加一不等于二:@小青年白先森 你好,请问不居中怎么解决的呢?
        苏村的南哥:可以自己改, 把算法改下就行了。 已解决
        小青年白先森: 我这边已经修改过了 位置计算问题 和圆心大小改变的问题
      • 小青年白先森:发现一个BUG progress 没法居中 整体能居中 但是ArcProgress里面的位置计算不对

      本文标题:Android-自定义ProgressBar实现圆弧进度条

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