环状 刻度 Progress

最近用到了一个环状 刻度的Progress, 效果如图:

原控件来自Github 感谢原作者

地址:

DiscView

来看一下属性.

<com.xinlan.discview.DiscView
        android:id="@+id/disc_view"
        android:layout_width="fill_parent"
        android:layout_height="220dp"
        app:dvAngleRotateSpan="360"
        app:dvBottomCircleIsShow="true"
        app:dvCircleMode="dot"
        app:dvIndicatorDraw="@drawable/indicator"
        app:dvInnerCirclePad="6dp"
        app:dvInnerCircleShow="true"
        app:dvOuterCirclePad="0dp"
        app:dvOuterCircleShow="false"
        app:dvStartRotateAngle="0"
        app:dvStrokenColor="#408BE1"
        app:dvStrokenWidth="16dp" />

以上属性如下图:

app:dvStartRotateAngle="90"  开始旋转角度值
app:dvAngleRotateSpan="180"  可旋转角度范围

app:dvBottomCircleIsShow="false" 环状刻度是否显示
app:dvOuterCircleShow="true"  外装饰圆是否显示

app:dvIndicatorDraw="@drawable/indicator" 指示器图片 即图上的白点

app:dvCircleMode="dot" 模式 有三种 dot/round/normal

app:dvInnerCirclePad="16dp"  内装饰圆与中间圆环距离
app:dvOuterCirclePad="16dp"  外装饰圆与中间圆环距离

app:dvStrokenColor="#ff0" 圆环刻度颜色

app:dvStrokenWidth="24dp"  圆环宽度

原控件没有内圆的填充色和描边, 可修改CircleView类

当然是 protected void onDraw(Canvas canvas) 方法中

//内圆绘制
        if (mInnerCircleIsShow) {//内圆显示
            int innerRadius = radius - (stokenWidth >> 1) - mInnerCirclePad - EXTRA_CIRCLE_WIDTH;
            //canvas.drawCircle(centerX, centerY, innerRadius, extraCirclePaint);
            tempRect.set(centerX - innerRadius, centerY - innerRadius,
                    centerX + innerRadius, centerY + innerRadius);
            //设置填充色
            extraCirclePaint.setColor(Color.parseColor("#141E3B"));
            extraCirclePaint.setStyle(Paint.Style.FILL);
            canvas.drawArc(tempRect, 0, angleRotateSpan, false, extraCirclePaint);
            //画描边
            extraCirclePaint.setStyle(Paint.Style.STROKE);
            extraCirclePaint.setStrokeWidth(5.0f);
            extraCirclePaint.setColor(Color.parseColor("#2A2D40"));
            canvas.drawArc(tempRect, 0, angleRotateSpan, false, extraCirclePaint);

        }

刻度数量在setCircleMode方法中修改

PathEffect effects = new DashPathEffect(new float[]{6, 25}, 10);

 case CIRCLE_MODE_DOT:
                //更改虚线
                PathEffect effects = new DashPathEffect(new float[]{6, 25}, 10);
                paint.setPathEffect(effects);
                bottomPaint.setPathEffect(effects);
                break;
            default:

HeadText / bottomText 在DiscView类中

headText = (TextView) v.findViewById(R.id.head_title);
bottomText = (TextView) v.findViewById(R.id.bottom_title);