用简单的圆环来表示一个任务的完成度

今天看书写一个小的自定义圆环来表示任务的完成度

需求很简单，好久没写自定义的view了，感觉有些生疏，以前一直以为知道怎么写的就可以了，现在发现如果越发的这样下去，自己的能力也会越来越弱，到最后就只能是代码的搬运工了。代码很简单，下面简单的叙述一下把：

先上个效果图把：

下面简单介绍一下这个小项目。

主要绘制这个有三个步骤

1.绘制一个中间的圆形。
2.在中间的圆形上写上文字
3.在圆的外面画一个圆环

这里是进行画笔的初始化，这里我直接初始化好文字的大小，没有做灵活的设置，有需要可以自己进行修改。

 private void init() {
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.parseColor("#000fff"));

        textPaint = new TextPaint();
        textPaint.setTextSize(26);
        textPaint.setColor(Color.parseColor("#ffffff"));
        textSize = textPaint.measureText(mString);

        paintRectF = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintRectF.setColor(Color.parseColor("#000fff"));
        paintRectF.setStyle(Paint.Style.STROKE);

    }

下面进行处理关于测量模式不同会引起的问题，这里网上有很多写法，主要是处理当自定义的view设置宽高为warp时出现的问题。

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(MeasureWidth(widthMeasureSpec), MeasureWidth(widthMeasureSpec));
        viewWidth =getWidth();
        centerXY = viewWidth /2;
        mRadiues = (float) (viewWidth *0.5/2);
        rectF = new RectF((float) (viewWidth *0.1),
                (float) (viewWidth *0.1),
                (float) (viewWidth *0.9),
                (float) (viewWidth *0.9));
    }

    private int MeasureWidth(int widthMeasureSpec) {
        int result;
        int size = MeasureSpec.getSize(widthMeasureSpec);
        int mode = MeasureSpec.getMode(widthMeasureSpec);
        if (mode== MeasureSpec.EXACTLY) {
            result=size;
        }else {
            result=400;
            if (mode== MeasureSpec.AT_MOST) {
                result=Math.min(result,size);
            }
        }
        return result;
    }

下面是关键的绘制方法，这里我简单的限制输入的字的多少。

@Override
    protected void onDraw(Canvas canvas) {
        //画中心的圆
        canvas.drawCircle(centerXY,centerXY,mRadiues,paint);
        //绘制外面的环形
        paintRectF.setStrokeWidth(rectF.width()/2-mRadiues);
        canvas.drawArc(rectF,270,mSweepAngle,false,paintRectF);
        if (mString.length()<8) {
            //在圆中心写字
            canvas.drawText(mString,0,mString.length(),centerXY-(textSize/2),centerXY,textPaint);
        }else {
            Toast.makeText(mContext,"字数太多了",Toast.LENGTH_SHORT).show();
        }


    }

基本上就上面这几个代码片段就可以完成这个简单的view了，这里我没有加入自定义的属性，应该加入一些属性，比如让用户自己在xml中进行文字大小的设置，颜色的设置等等。。。。这里就不给出了。