自定义View学习笔记（一）

1.1 直方图的绘制方法

首先要了解画这个直方图所需要哪些步骤。
1.中间的“直方图字样”
2.X,Y轴线
3.样式相同的直方图块
首先是画“直方图”字样，需要的是drawText方法,它的位置处于中下方，那么就很好画出来。

mPaint.setColor(Color.WHITE);mPaint.setTextSize(20);mPaint.setTextAlign(Paint.Align.CENTER);canvas.drawText("直方图", canvas.getWidth() / 2, canvas.getHeight() * 0.95f, mPaint);

接下来是X，Y轴，使用drawLine方法画线。

 mPaint.setStyle(Paint.Style.STROKE); canvas.drawLine(0, 0, 0, -canvas.getHeight() * 0.7f, mPaint); canvas.drawLine(0, 0, canvas.getWidth() * 0.8f, 0, mPaint);

最后就是图块了，这里需要计算每个图块的宽度和间隔的距离。再使用drawRect,和drawText方法实现柱状效果。首先计算：

 float width = (canvas.getWidth() * 0.8f - 100) / mDatas.size() * 0.8f; float space = (canvas.getWidth() * 0.8f - 100) / mDatas.size() * 0.2f;

然后画柱状和文字：

 float startX = 0.0f; for (Data item : mDatas) {      mPaint.setColor(Color.WHITE);      mPaint.setStyle(Paint.Style.FILL);      mPaint.setTextSize(20);      mPaint.setTextAlign(Paint.Align.CENTER);          canvas.drawText(item.getName(), startX + space + width / 2, 25, mPaint);      mPaint.setColor(item.getColor());      canvas.drawRect(startX + space, -item.getChance() / max * canvas.getHeight() * 0.65f, startX + space + width, 0, mPaint);            startX = space + width + startX;    }

最后放上mDatas：

    private List<Data> mDatas = new ArrayList<>();    Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);    private float max = 0;    private void init() {        mDatas.add(new Data("Froyo", 5.0f, Color.GREEN));        mDatas.add(new Data("GB", 25.0f, Color.GREEN));        mDatas.add(new Data("ICS", 25.0f, Color.GREEN));        mDatas.add(new Data("JB", 90.0f, Color.GREEN));        mDatas.add(new Data("KitKat", 180.0f, Color.GREEN));        mDatas.add(new Data("L", 225.0f, Color.GREEN));        mDatas.add(new Data("M", 160.0f, Color.GREEN));        for (Data data : mDatas) {            max = Math.max(max, data.getChance());        }    }

public class Data {    private String name;    private float chance;    private int color;    public Data(String name, float chance, int color) {        this.name = name;        this.chance = chance;        this.color = color;    }    .....}

1.2 饼图的绘制

饼图绘制分三块
1.中间字样“饼图”
2.图形绘制
3.文字描述
首先中间字样和柱状图是一样的，就省略了。
重点讲图形的绘制。使用的是drawArc方法，确定扇形的半径，起始和终止角度就可以了。

 float radius = canvas.getHeight() * 0.35f; RectF rect = new RectF(-radius, -radius, radius, radius); float lineStartX; float lineStartY; float lineEndX; float lineEndY; float sweepAngle; float halfAngle; float angle = 0; for (Data item : mDatas) {     mPaint.setStyle(Paint.Style.FILL);     sweepAngle = item.getChance() / total * 360;     halfAngle = sweepAngle * 0.5f + angle;     mPaint.setColor(getResources().getColor(item.getColor()));     lineStartX = radius * (float) Math.cos(halfAngle / 180 * Math.PI);     lineStartY = radius * (float) Math.sin(halfAngle / 180 * Math.PI);     lineEndX = (radius + 50) * (float) Math.cos(halfAngle / 180 * Math.PI);     lineEndY = (radius + 50) * (float) Math.sin(halfAngle / 180 * Math.PI);      if (max == item.getChance()) {          canvas.save();          canvas.translate(lineStartX * 0.1f, lineStartY * 0.1f);      }      canvas.drawArc(rect, angle, sweepAngle - 2, true, mPaint);      ....}

接下来是绘制注释的线条和文字。

for(Data item:mDatas){    ....     mPaint.setStyle(Paint.Style.STROKE);     mPaint.setColor(Color.WHITE);     canvas.drawLine(lineStartX, lineStartY, lineEndX, lineEndY, mPaint);     if (halfAngle > 90 && halfAngle < 270) {         canvas.drawLine(lineEndX, lineEndY, lineEndX - 50, lineEndY, mPaint);         mPaint.setTextSize(15);         mPaint.setTextAlign(Paint.Align.RIGHT);         canvas.drawText(item.getName(), lineEndX - 50, lineEndY, mPaint);      } else {         canvas.drawLine(lineEndX, lineEndY, lineEndX + 50, lineEndY, mPaint);          mPaint.setTextSize(15);          mPaint.setTextAlign(Paint.Align.LEFT);          canvas.drawText(item.getName(), lineEndX + 50, lineEndY, mPaint);      }       if (max == item.getChance()) {           canvas.restore();        }        angle += sweepAngle; }

    private List<Data> mDatas = new ArrayList<>();    private float max;    private float total;    Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);    private void init() {        mDatas.add(new Data("Lollipop", 34.0f, R.color.shapeOne));        mDatas.add(new Data("Marshmallow", 16.0f, R.color.shapeTwo));        mDatas.add(new Data("Gingerbread", 3.0f, R.color.shapeThree));        mDatas.add(new Data("Ice Cream Sandwich", 2.0f, R.color.shapeFour));        mDatas.add(new Data("Jelly Bean", 16.0f, R.color.shapeFive));        mDatas.add(new Data("Kitkat", 29.0f, R.color.shapeSix));        max = Float.MIN_VALUE;        total = 0;        for (Data data : mDatas) {            total += data.getChance();            max = Math.max(max, data.getChance());        }    }