自定义View之CircleIndicatorView实现圆形指示器

项目中的自定义控件比较多，今天应该是最后一个了，看下UI效果

• UI图

圆形指示器UI图

UI分析

1. 内侧一个白色的虚线弧
2. 外侧有两条弧，一个是灰色的实线弧，一个是白色的虚线弧，实线弧尾部有一个小圆点
3. 中间是文字，大小不一致，颜色是白色
4. 加载的时候需要一个加载动画，实线椭圆进度条跟可用额度数字需要同时从小到达变化

• 效果图

圆形指示器效果图

下面根据UI的分析，来分享一下实现的过程

自定义属性

• 文字的大小
• 线的颜色
• 虚线的间距

代码

//定义属性
 <declare-styleable name="CircleIndicatorView">
        <attr name="largeSize" format="dimension"/>
        <attr name="smallSize" format="dimension"/>
        <attr name="grayColor" format="color"/>
        <attr name="whiteColor" format="color"/>
        <attr name="lineSpace" format="dimension"/>
    </declare-styleable>

//获取属性

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CircleIndicatorView);
        mLargeSize = (int) ta.getDimension(R.styleable.CircleIndicatorView_largeSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 15, context.getResources().getDisplayMetrics()));
        mSmallSize = (int) ta.getDimension(R.styleable.CircleIndicatorView_smallSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 13, context.getResources().getDisplayMetrics()));
        mGrayColor = ta.getColor(R.styleable.CircleIndicatorView_grayColor, Color.GRAY);
        mWhiteColor = ta.getColor(R.styleable.CircleIndicatorView_whiteColor, Color.WHITE);
        ta.recycle();复制代码

onMeasure

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(measureWidth(widthMeasureSpec), measureHeight(heightMeasureSpec));
    }

        private int measureWidth(int widthMeasureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(widthMeasureSpec);
        int specSize = MeasureSpec.getSize(widthMeasureSpec);
        switch (specMode) {
            case MeasureSpec.EXACTLY:
                result = specSize;
                break;
            case MeasureSpec.UNSPECIFIED:
            case MeasureSpec.AT_MOST:
                break;
        }
        return result;
    }复制代码

这里其实不需要考虑MeasureSpec.AT_MOST，因为这个圆的半径是一般是固定的，所以没有处理MeasureSpec.AT_MOST，如果需求需要处理的话其实也很简单，跟自定义View之IndexView进度条(一)中的一样，把相应的宽高进行累加即可，不是分析的重点，所以一笔带过。

onDraw

1. 绘制内侧白色虚线弧度

//不加的话在高版本上虚线不显示
setLayerType(View.LAYER_TYPE_SOFTWARE,dashPaint);
//设置虚线间隔
PathEffect effects = new DashPathEffect(new float[]{20, 6}, 0);
        dashPaint.setPathEffect(effects);
         RectF dashedRectF = new RectF(mCenter - mRadius + 20 + getPaddingLeft(), mCenter - mRadius + 20 + getPaddingTop(), mCenter + mRadius - 20 - getPaddingRight(), mCenter + mRadius - 20 - getPaddingBottom());
        float startAngle = 150;
        canvas.drawArc(dashedRectF, startAngle, sweepAngle, false, dashPaint);复制代码

1. 绘制外侧灰色弧度

        canvas.drawArc(rectF, startAngle, sweepAngle, false, outPaint);复制代码

1. 绘制外侧进度弧度

 canvas.drawArc(rectF, startAngle, getInSweepAngle(), false, inPaint);复制代码

4.绘制外侧进度弧度的小圆点，实际上是一个Bitmap,注释比较详细，也比较简单，就是画布的平移跟旋转这个需要好好理解一下

  //绘制发光的小圆点
        Paint paintCircle = new Paint();
        paintCircle.setStyle(Paint.Style.FILL);
        paintCircle.setAntiAlias(true);//抗锯齿功能
        canvas.translate(getWidth() / 2, getHeight() / 2);//画布平移到圆心
        canvas.rotate(getInSweepAngle() + 60);//旋转画布使得画布的Y轴经过小圆点
        canvas.translate(0, getHeight() / 2 - getPaddingLeft());//再次平移画布至小圆点绘制的位置
       //此处省略了Bitmap的处理过程bmp
        Bitmap dotBitmap = Bitmap.createBitmap(bmp, 0, 0, width, height, matrix, true);
        canvas.drawBitmap(dotBitmap, -15, -15, paintCircle);
        canvas.rotate(-(getInSweepAngle() + 60));//恢复canvas复制代码

5.绘制文字
这个在绘制数字的时候需要注意一下，因为传过来的是一个浮点数，需要拆分成整数跟小数两部分，但是当你讲float转化为String然后切割的时候，注意下需要将小数点进行转义，不然会分割失败

DecimalFormat decimalFormat = new DecimalFormat(".00");//构造方法的字符格式这里如果小数不足2位,会以0补足.
        String value = decimalFormat.format(indexValue);//format 返回的是字符串
        Log.d("value---->", value);
        String[] split = value.split("\\.");
        String text = split[0];//整数部分复制代码

刚进来时候的加载动画

这个其实就是两个属性动画同时播放而已，通过计算扇形扫过的角度与数字增长的幅度
，然后在属性动画的update里面进行重新绘制整个View，就可以搞定

       float inSweepAngle = sweepAngle * value / 100;
        ValueAnimator angleAnim = ValueAnimator.ofFloat(0f, inSweepAngle);//角度的ValueAnimator
        float inValue = value * 8888 / 100;
        ValueAnimator valueAnim = ValueAnimator.ofFloat(0, inValue);//数字变化的ValueAnimator
        //一起播放动画
         animatorSet.playTogether(angleAnim, valueAnim);复制代码

提供一个方法，供外部调用

 public void goToPoint(float value) {
       //在方法中进行播放动画
    }复制代码

使用方法

mCircleIndicatorView.goToPoint(value);

Demo下载地址