android 图标控件的实现（一）

前段时间公司要做图表，本来想用个三方库就完事的，然而有很多个性化的实现，那就自己动手吧。先上图
实现的效果感觉还行，再有什么特殊的需求，自己写的东西，改起来也方便。

接下来是把图表功能涉及到的类都先抽象出来。

ChartData包下是绘图时要用到的数据。
Xvalues:X轴下每个点要绘制的东西，如上面柱状图中绘制的月份数据。
Yvalues：每个X轴坐标对应的Y轴数据点。
XaxisData: X坐标轴
YaxisData: Y坐标轴
ChartDataManager: 绘制图表可能需要以上数据的配合，所以，还要把上面的数据放到一个地方进行统一管理，这个类里包含了以上上面的所有数据。

ChartDrawUtil包下是每一中图的绘制工具
DrawUtil是绘制图表的基类和一些公用方法。绘制图表，我把它分割成了三个步骤
1.绘制X轴 ——-》2.绘制Y轴————-》3.绘制图表内容。
所以在基类里写了三个抽象方法

    abstract protected void startContent(Canvas canvas);    abstract protected void drawXaxis(Canvas canvas);    abstract protected void drawYaxis(Canvas canvas);

相应的子类实现对应的绘制就行了。

除了上面两个包里的类，剩下的就是实现好的图表类。

接下来就来看看图表的实现，上图中第一个，最简单的圆形进度控件CircleProgressChart

思路也很简单，先绘制一个底部的灰色圆环，再绘制上层的进度圆环，最后绘制中心文字。

    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        canvas.drawCircle(centerX,centerY,circirRudias,bottomCirclePaint);//底部圆环绘制        float currentDegree=360*currentPercent;//通过进度百分比计算对应的弧度        float left=centerX-circirRudias;        float top=centerY-circirRudias;        float right=centerX+circirRudias;        float bottom=centerY+circirRudias;        RectF rectF=new RectF(left,top,right,bottom);        canvas.drawArc(rectF,-90,currentDegree,false,topCirclePaint);//绘制对应的进度弧度        int percentText= (int) (currentPercent*100);        String drawtext=percentText+"%";        Paint.FontMetrics metrics=textPaint.getFontMetrics();        float textwidth= textPaint.measureText(drawtext);        float textX=(getMeasuredWidth()-textwidth)/2;               //文字X坐标点计算        float textY=centerY-(metrics.ascent+metrics.descent)/2;     //文字Y坐标点计算        canvas.drawText(drawtext,textX,textY,textPaint);    }

这个实在太简单了，还没用上上面设计的数据结构，不过接下来的图表会用到。

第二个图是含有多个种类的圆环图

这个图的实现也是很简单，显然，它要有一个各个种类的数据集合，我是用Yvalues来表示一个种类。

public class MultiTypeCircleProgressChart extends View {    private int centerX,centerY;    private int circirRudias;    Paint textPaint,bottomCirclePaint,topCirclePaint;    int bottomCircleColor=Color.GRAY,topCirlceColor= Color.RED,textColor=Color.BLACK;    float currentPercent=0.50f;    float circleWidth=20;    float textSize=30;    List<Yvalues> allTypeValues;//图包含的种类集合    List<Integer> allTypeDegree;//不同种类的对应的弧度集合    public MultiTypeCircleProgressChart(Context context) {        super(context);        init(context);    }    public MultiTypeCircleProgressChart(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        init(context);    }    public MultiTypeCircleProgressChart(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init(context);    }    private void init(Context context){        textPaint=new Paint();        textPaint.setAntiAlias(true);        textPaint.setDither(true);        textPaint.setColor(textColor);        textPaint.setTextSize(textSize);        bottomCirclePaint=new Paint();        bottomCirclePaint.setAntiAlias(true);        bottomCirclePaint.setDither(true);        bottomCirclePaint.setColor(bottomCircleColor);        bottomCirclePaint.setStrokeWidth(circleWidth);        bottomCirclePaint.setStyle(Paint.Style.STROKE);        topCirclePaint=new Paint();        topCirclePaint.setAntiAlias(true);        topCirclePaint.setDither(true);        topCirclePaint.setColor(topCirlceColor);        topCirclePaint.setStrokeWidth(circleWidth);        topCirclePaint.setStyle(Paint.Style.STROKE);        allTypeDegree=new ArrayList<>();        allTypeValues=new ArrayList<>();    }    //这个方法是计算不同种类对应的弧度    private   List<Integer> getRelativeDegree(List<Yvalues> yvaluesList){       List<Integer> relativeDegree=new ArrayList<>();        int size=yvaluesList.size();        int totalValues=0;        for(int i=0;i<size;i++){            totalValues+=yvaluesList.get(i).getValue();        }        for(int i=0;i<size;i++){            int degree= (int) (360*yvaluesList.get(i).getValue()*1.0f/totalValues);            relativeDegree.add(degree);        }        return relativeDegree;    }    public void updateView(List<Yvalues> yvaluesList){        this.allTypeValues=yvaluesList;        this.allTypeDegree=getRelativeDegree(yvaluesList);        invalidate();    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);       centerX=getMeasuredWidth()/2;       centerY=getMeasuredHeight()/2;        circirRudias=Math.min(centerX,centerY)-30;    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        int startDegree=-90;//圆环绘制的起点从12点钟方向开始        canvas.drawCircle(centerX,centerY,circirRudias,bottomCirclePaint);        float left=centerX-circirRudias;        float top=centerY-circirRudias;        float right=centerX+circirRudias;        float bottom=centerY+circirRudias;        RectF rectF=new RectF(left,top,right,bottom);        int size=allTypeValues.size();        for(int i=0;i<size;i++){            topCirclePaint.setColor(allTypeValues.get(i).getTextcolor());            canvas.drawArc(rectF,startDegree,allTypeDegree.get(i),false,topCirclePaint);            startDegree+=allTypeDegree.get(i);        }    }}

小知识点提示：
1.绘制底部圆的时候，设置画笔描边属性： bottomCirclePaint.setStyle(Paint.Style.STROKE);
2.绘制弧度首尾两头半圆装的属性：topCirclePaint.setStrokeCap(Paint.Cap.ROUND);
3.绘制弧度起点设为0的话，起点对应的是3点钟方向，我这里写成-90是对应的就是12点方向。
4.让文字居中的坐标点计算原理参考 http://blog.csdn.net/doctorzhong/article/details/53079511。