美文网首页
Android:自定义view-数据饼图

Android:自定义view-数据饼图

作者: yangSmallXing | 来源:发表于2019-02-21 14:41 被阅读0次
GIF.gif

通过这个自定义view,熟悉一下自定义view动画的处理

分析效果图。自定义view包括最外层的弧+中间的圆+中间的文字

通过onSizeChanged方法得到view的尺寸

 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //得到边距
        paddingLeft = getPaddingLeft();
        paddingRight = getPaddingRight();
        paddingTop = getPaddingTop();
        paddingBottom = getPaddingBottom();
        //保证整个view是正方形
        mWidth = Math.max(w,h);
        mHeight = Math.max(w,h);
        //设置内圆的宽
        innerCircleWidth =( mWidth - paddingLeft - paddingRight )/ 2;
        //设置外弧的宽
        outterArcWidth = (mWidth - paddingTop - paddingBottom )/ 10;
        //重新绘制
        postInvalidate();
    }

绘制内圆

mPaint.setColor(circleColor);
canvas.drawCircle(innerCircleWidth + paddingLeft,innerCircleWidth + paddingTop,innerCircleWidth / 2,mPaint);

绘制文字

mPaint.setColor(textColor);
Paint.FontMetrics fontMetrics=new Paint.FontMetrics();
mPaint.getFontMetrics(fontMetrics);
float offset=(fontMetrics.descent+fontMetrics.ascent)/2;
canvas.drawText(rate + "%",innerCircleWidth + paddingLeft,innerCircleWidth - offset + paddingTop,mPaint);

绘制外弧

mPaint.setColor(arcColor);
mPaint.setStrokeWidth(outterArcWidth);
mPaint.setStyle(Paint.Style.STROKE);
//计算弧的弧度
float sweapAngle = 360 * rate / 100;
RectF rect = new RectF(0 + paddingLeft + outterArcWidth ,0 + paddingTop + outterArcWidth,mWidth - paddingRight - outterArcWidth,mHeight - paddingBottom - outterArcWidth);
canvas.drawArc(rect,-90,sweapAngle,false,mPaint);

绘制已经成功,现在加上动画效果。自定义view暴露一个接口, setRate(float rate),当调用它设置数据时,开始动画。

 ValueAnimator valueAnimator = ValueAnimator.ofFloat(old_rate,rate);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                BigDecimal b = new BigDecimal(Float.parseFloat(animation.getAnimatedValue().toString()));
                rate = b.setScale(1,BigDecimal.ROUND_HALF_UP).floatValue();
                postInvalidate();
            }
        });
        valueAnimator.setDuration((long)(2000 * Math.abs(old_rate - rate) / 100));
        valueAnimator.start();

通过valueAnimator监听数据从之前的数据到新的数据的变化,然后通过调用 postInvalidate()重新绘制view,使得产生动画效果。

源码 https://github.com/labixiaoxing/PieChart

相关文章

网友评论

      本文标题:Android:自定义view-数据饼图

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