自定义view（2）---自定义圆环统计图 分两块区域 （目前只支持两片区域的）

一：前言

小白要开始写博客了。Android一起进阶吧。

二：编码

废话不多说，开始码代码（养成好习惯 每次编码前都要把思路和需要用到的东西写出注释）

//注意   只能放两种颜色
/**
 *1，需求：按照ui设置 用代码绘制出相应的圆环统计图  带动画效果  圆环中有两种颜色  加载完一个颜色就需要加载第二个颜色
 * 2，思路：绘制圆环  需要一个RectF作为内接矩形 起始角度和最终角度由用户在xml中定义
 * ，动画效果我们采用 ValueAnimator   定义多少秒去加载完这个控件的动画   关于角度 我们需要两个常量
 * 一个变量 变量就是当前view绘制圆环绘制的角度为多少  两个常量是 起始角度和结束角度
 * 3，编码：init初始化获取用户定义的起始终止角度等信息  当然我们需要定义好styles给用户输入
 *因为是圆环 所以需要取空间宽度和高度的最小值   考虑到绘制两种颜色的问题   所以我们在绘制的时候需要判断  第一部分是否已经绘制完成
 * 然后也要去绘制第二部分   当然前提是我们需要知道第一地步占总角度额百分之多少  然后再计算第一部分的角度大小
 *
 *
 *
 */

因为是绘制两块圆环拼成一个圆环统计图  所以需要知道圆环在哪个角度开始绘制第二个圆环  。所以需要刚开始求出开始绘制第二个圆环的角度位置

一些初始化   获取xml定义的属性就不多说了  上一篇博客有说过

private void drawArc(Canvas canvas) {
    firstPointCenterX= (float) (realWidth/2+((realWidth/2-ringViewStroke)*Math.cos((transitionAngle/2)*(3.14/180))));
    firstPointCenterY= (float) (realWidth/2+((realWidth/2-ringViewStroke)*Math.sin((transitionAngle/2)*(3.14/180))));
    secondPointCenterX=(float) (realWidth/2+((realWidth/2-ringViewStroke)*Math.cos((transitionAngle+(endAngle-transitionAngle)/2)*(3.14/180))));
    secondPointCenterY=(float) (realWidth/2+((realWidth/2-ringViewStroke)*Math.sin((transitionAngle+(endAngle-transitionAngle)/2)*(3.14/180))));
    mPaint.setColor(fisrtColor);
    canvas.drawArc(mRectF,startAngle,nowAngle,false,mPaint);
    if (nowAngle>transitionAngle){
        mPaint.setColor(secondColor);
        canvas.drawArc(mRectF,transitionAngle,nowAngle-transitionAngle,false,mPaint);
    }
    if(nowAngle>(transitionAngle/2)){
        canvas.drawText(firstNumText,firstPointCenterX,firstPointCenterY,textPaint);
        canvas.drawText(secondNumText,secondPointCenterX,secondPointCenterY,textPaint);
    }
}

这里就是主要绘制的区域了    当然 因为UI的需求  还需要显示一个文字做注释   可把小白累死了    文字的位置在加载的圆环上一点开始绘制     于是开始了拼命了找谷歌爸爸和百度哥哥   当然  最后都找到了  哈哈哈哈

firstPointCenterX= (float) (realWidth/2+((realWidth/2-ringViewStroke)*Math.cos((transitionAngle/2)*(3.14/180))));
firstPointCenterY= (float) (realWidth/2+((realWidth/2-ringViewStroke)*Math.sin((transitionAngle/2)*(3.14/180))));
secondPointCenterX=(float) (realWidth/2+((realWidth/2-ringViewStroke)*Math.cos((transitionAngle+(endAngle-transitionAngle)/2)*(3.14/180))));
secondPointCenterY=(float) (realWidth/2+((realWidth/2-ringViewStroke)*Math.sin((transitionAngle+(endAngle-transitionAngle)/2)*(3.14/180))));

最后  动画   特效什么的 还是和上一篇博客一样   没有什么好说了     具体看源码哦         另外   git上持续更新哦

https://git.oschina.net/atex/CustomViewDemo.git