直方图

先画一个直角坐标系

package com.example.a16040657.customviewtest;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.util.AttributeSet;import android.view.View;/** * Created by 16040657 on 2018/5/15. */public class HistogramView extends View {    public HistogramView(Context context) {        super(context);    }    public HistogramView(Context context, AttributeSet attrs) {        super(context, attrs);    }    public HistogramView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }//    public HistogramView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {//        super(context, attrs, defStyleAttr, defStyleRes);//    }    Paint paint = new Paint();    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //开始直方图绘制        //我们首先绘制竖向的一条黑色直线        paint.setColor(Color.BLACK);        //线的粗细先设置一下        paint.setStrokeWidth(5);        //坐标系都是针对自己view的顶点坐标(注意不是屏幕坐标哦) 点的坐标 x轴的值是一样的 所以可以得知这肯定是一条笔直的竖线        canvas.drawLine(100, 200, 100, 800, paint);        //然后依葫芦画瓢画一条横向的黑色直线 与上面这条竖着的直线 组成一个x轴和y轴        canvas.drawLine(100, 800, 800, 800, paint);    }}复制代码

看下效果：

然后绘制第一个直方

//绘制第一个矩形直方        paint.setColor(Color.RED);        paint.setStyle(Paint.Style.FILL);        //注意坐标都是 left, top, right, bottom        canvas.drawRect(150, 700, 200, 800, paint);        //然后在我们的直方下面绘制对应的文字        paint.setTextSize(35);        canvas.drawText("三星", 140, 840, paint);复制代码

看下效果

依葫芦画瓢多画几个直方模块组成一个完整的直方图。这里是全部代码

@Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //开始直方图绘制        //我们首先绘制竖向的一条黑色直线        paint.setColor(Color.BLACK);        //线的粗细先设置一下        paint.setStrokeWidth(5);        //坐标系都是针对自己view的顶点坐标(注意不是屏幕坐标哦) 点的坐标 x轴的值是一样的 所以可以得知这肯定是一条笔直的竖线        canvas.drawLine(100, 200, 100, 800, paint);        //然后依葫芦画瓢画一条横向的黑色直线 与上面这条竖着的直线 组成一个x轴和y轴        canvas.drawLine(100, 800, 800, 800, paint);        //绘制第一个矩形直方        paint.setColor(Color.RED);        paint.setStyle(Paint.Style.FILL);        //注意坐标都是 left, top, right, bottom        canvas.drawRect(150, 700, 200, 800, paint);        //然后在我们的直方下面绘制对应的文字        paint.setTextSize(35);        canvas.drawText("三星", 140, 840, paint);        //多画几个直方模组 组成一个完整的直方图        canvas.drawRect(250, 500, 300, 800, paint);//        paint.setTextSize(35);        canvas.drawText("苹果", 240, 840, paint);        canvas.drawRect(350, 300, 400, 800, paint);//        paint.setTextSize(35);        canvas.drawText("小米", 340, 840, paint);        canvas.drawRect(450, 200, 500, 800, paint);        //销冠华为颜色就特殊点吧        paint.setColor(Color.BLUE);        canvas.drawText("华为", 440, 840, paint);    }复制代码

最后看下效果：

基本上直方图算是最简单的一种自定义view，这里给出基本画法，拿到项目里面用各位就需要自定义一些属性，然后坐标的值根据属性算一下而已，算的上比较简单的一种自定义view了。大体思路和画法是不变的

稍微复杂点的饼图

先看看饼图的核心怎么画，代码很少，略微涉及到一点初中数学知识。

package com.example.a16040657.customviewtest;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.util.AttributeSet;import android.view.View;/** * Created by 16040657 on 2018/5/15. */public class PieGraphView extends View {    public PieGraphView(Context context) {        super(context);    }    public PieGraphView(Context context, AttributeSet attrs) {        super(context, attrs);    }    public PieGraphView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    Paint paint = new Paint();    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //饼图的核心其实就是画好扇形就成功了一大半了        //饼图的核心就是一个圆形，学会切割圆形，就知道怎么画饼图        //先绘制一个整体的背景        canvas.drawColor(Color.GRAY);        paint.setStyle(Paint.Style.FILL);        paint.setColor(Color.BLUE);        //这里要注意的是标准的饼图是一个圆形，那既然是圆形，这里right和left的差值要和 top和bottom的差值相等        //因为只有对应的矩形长宽相等，里面才是个圆形 最终画出来的才是完整的圆形否则就是不规则的椭圆很难看        //-110的这个参数 是起始角度 100这个参数是划过的角度 ，这里的划 代表是顺时针， x轴方向是0度，这个地方要自己体会一下        canvas.drawArc(200, 700, 800, 1300, -110, 100, true, paint); // 绘制扇形        paint.setColor(Color.RED);        //保证饼图的重合性，可以看出来 这个-10的值 就是 -110+100得到的，上一个扇形的尾巴等于这个一个扇形的头        canvas.drawArc(200, 700, 800, 1300, -10, 50, true, paint); // 绘制扇形        paint.setColor(Color.YELLOW);        //最后画一个大的，完成这个圆即可，注意这里 三个划过的角度是100+50+210=360 刚好是一个圆形的角度 且起始角度40的值就是上一个扇形的-10+50 计算而来，这样就完美组成了一个完整的圆形饼图        canvas.drawArc(200, 700, 800, 1300, 40, 210, true, paint); // 绘制扇形    }}复制代码

然后看看效果

光有图还不行，还得看告诉别人这些饼图代表什么

paint.setColor(Color.WHITE);        paint.setStyle(Paint.Style.STROKE);        paint.setStrokeWidth(6);        Path path = new Path();        //为了好理解 我们先回到这个圆形的中心点        path.moveTo(500, 1000);        //然后再挪动到蓝色的区域某个位置        path.moveTo(550, 900);        //然后画一条斜线        path.lineTo(700, 750);        //然后再斜线的末端相对平移一下        path.rLineTo(100,0);        canvas.drawPath(path, paint);        //最后再绘制一个文字        paint.reset();        paint.setTextSize(35);        paint.setColor(Color.WHITE);        canvas.drawText("JAVA",810,750,paint);复制代码

看下效果：

最后补全代码看下整体效果

package com.example.a16040657.customviewtest;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.util.AttributeSet;import android.view.View;/** * Created by 16040657 on 2018/5/15. */public class PieGraphView extends View {    public PieGraphView(Context context) {        super(context);    }    public PieGraphView(Context context, AttributeSet attrs) {        super(context, attrs);    }    public PieGraphView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    Paint paint = new Paint();    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //饼图的核心其实就是画好扇形就成功了一大半了        //饼图的核心就是一个圆形，学会切割圆形，就知道怎么画饼图        //先绘制一个整体的背景        canvas.drawColor(Color.GRAY);        paint.setStyle(Paint.Style.FILL);        paint.setColor(Color.BLUE);        //这里要注意的是标准的饼图是一个圆形，那既然是圆形，这里right和left的差值要和 top和bottom的差值相等        //因为只有对应的矩形长宽相等，里面才是个圆形 最终画出来的才是完整的圆形否则就是不规则的椭圆很难看        //-110的这个参数 是起始角度 100这个参数是划过的角度 ，这里的划 代表是顺时针， x轴方向是0度，这个地方要自己体会一下        canvas.drawArc(200, 700, 800, 1300, -110, 100, true, paint); // 绘制扇形        paint.setColor(Color.RED);        //保证饼图的重合性，可以看出来 这个-10的值 就是 -110+100得到的，上一个扇形的尾巴等于这个一个扇形的头        canvas.drawArc(200, 700, 800, 1300, -10, 50, true, paint); // 绘制扇形        paint.setColor(Color.YELLOW);        //最后画一个大的，完成这个圆即可，注意这里 三个划过的角度是100+50+210=360 刚好是一个圆形的角度 且起始角度40的值就是上一个扇形的-10+50 计算而来，这样就完美组成了一个完整的圆形饼图        canvas.drawArc(200, 700, 800, 1300, 40, 210, true, paint); // 绘制扇形        paint.setColor(Color.WHITE);        paint.setStyle(Paint.Style.STROKE);        paint.setStrokeWidth(6);        Path path = new Path();        //为了好理解 我们先回到这个圆形的中心点        path.moveTo(500, 1000);        //然后再挪动到蓝色的区域某个位置        path.moveTo(550, 900);        //然后画一条斜线        path.lineTo(700, 750);        //然后再斜线的末端相对平移一下        path.rLineTo(100, 0);        canvas.drawPath(path, paint);        //最后再绘制一个文字        paint.reset();        paint.setTextSize(35);        paint.setColor(Color.WHITE);        canvas.drawText("JAVA", 810, 750, paint);        paint.setColor(Color.WHITE);        paint.setStyle(Paint.Style.STROKE);        paint.setStrokeWidth(6);        Path path2 = new Path();        path2.moveTo(550, 1000);        path2.lineTo(650, 1100);        path2.rLineTo(200, 0);        canvas.drawPath(path2, paint);        paint.reset();        paint.setTextSize(35);        paint.setColor(Color.WHITE);        canvas.drawText("PYTHON", 860, 1100, paint);        paint.setColor(Color.WHITE);        paint.setStyle(Paint.Style.STROKE);        paint.setStrokeWidth(6);        Path path3 = new Path();        path3.moveTo(400, 1050);        path3.lineTo(250, 1100);        path3.rLineTo(-100, 0);        canvas.drawPath(path3, paint);        paint.reset();        paint.setTextSize(35);        paint.setColor(Color.WHITE);        canvas.drawText("C++", 80, 1100, paint);    }}复制代码