自定义view柱状图

简单的柱状图的绘制

第一步，设置画笔

首先确定需要画几个部分。需要几个画笔

本文介绍的是画3个部分。1,轴线 2,轴坐标值 3.柱子

1.初始化画笔

    private Paint paint = null;            //柱的画笔    private Paint labelPaint = null;      //x轴线画笔    private Paint textPaint = null;       //x轴坐标轴画笔        paint = new Paint();        paint.setAntiAlias(true);        paint.setColor(Color.BLACK);        paint.setStrokeWidth(0f);        paint.setStyle(Paint.Style.FILL_AND_STROKE);        labelPaint = new Paint();        labelPaint.setColor(Color.BLACK);        labelPaint.setStrokeWidth(2);        labelPaint.setAntiAlias(true);        labelPaint.setStyle(Paint.Style.STROKE);        textPaint = new Paint();        textPaint.setTextSize(28);        textPaint.setStyle(Paint.Style.FILL);        textPaint.setColor(Color.rgb(153, 153, 153));

2.画x轴线

     private float Y0;                      //x轴的坐标高度     private float X;                       //宽度     private void drawLableLine(Canvas canvas) {        Path path = new Path();        path.moveTo(0f,Y0);        path.lineTo(X,Y0);        canvas.drawPath(path, labelPaint);    }

3.画x轴坐标值

    private String[] xAxisFormarts = {"宏盛","松江","新梅","深圳","华夏"};  //x轴坐标值    private float barWidth = 112;         //柱子的宽度    private float spaceWidth;             //柱子之间的空隙宽度    private void drawLableText(Canvas canvas) {        for(int i = 0 ; i < xAxisFormarts.length ; i++){            float dis = textPaint.measureText(xAxisFormarts[i]);//文本长度            float x = spaceWidth * (i + 1) + barWidth * i + (barWidth - dis)/2;            canvas.drawText(xAxisFormarts[i],x,Y-5,textPaint);        }    }

4.画柱子

private void drawBarLines(Canvas canvas) {        Path path = new Path();        for(int i = 0 ; i < data.size() ; i++){            path.reset();            path.moveTo(spaceWidth * (i + 1) + barWidth * i,Y0);            path.lineTo(spaceWidth * (i + 1) + barWidth * i,((maxValue - data.get(i))/maxValue) * BarMaxHeight);            path.lineTo(spaceWidth * (i + 1) + barWidth * (i + 1) ,((maxValue - data.get(i))/maxValue) * BarMaxHeight );            path.lineTo(spaceWidth * (i + 1) + barWidth * (i + 1) ,Y0);            if(data.get(i) > averageValue){                paint.setColor(Color.rgb(239, 83, 80)); //red   值高于分割线以上显示柱子为红色，低于则灰色            }else{                paint.setColor(Color.rgb(153, 153, 153)); //gray            }            canvas.drawPath(path, paint);        }    }

整体代码如下：

package com.zhuhao.finance.view;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.view.View;import java.util.ArrayList;/** * Created by gaoli on 2017/7/17. */public class BarLine extends View {    private Paint paint = null;            //柱的画笔    private Paint labelPaint = null;      //x轴线画笔    private Paint textPaint = null;       //x轴坐标轴画笔    private float barWidth = 112;         //柱子的宽度    private float spaceWidth;             //柱子之间的空隙宽度    private float textHeight = 32;       //给x轴坐标值 留的高度    private float BarMaxHeight;          //最大的柱高度    private float Y;                        //高度    private float X;                       //宽度    private float Y0;                      //x轴的坐标高度    private boolean isShowXText = true;  //是否显示x轴坐标值    private ArrayList<Float> data = new ArrayList<Float>();  //各值    private float maxValue = 5;             //数据最大值    private float averageValue = 4;             //数据分割线值    private String[] xAxisFormarts = {"宏盛","松江","新梅","深圳","华夏"};  //x轴坐标值    public BarLine(Context context) {       super(context);        init();    }    public BarLine(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        init();    }    public BarLine(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    private void init(){        paint = new Paint();        paint.setAntiAlias(true);        paint.setColor(Color.BLACK);        paint.setStrokeWidth(0f);        paint.setStyle(Paint.Style.FILL_AND_STROKE);        labelPaint = new Paint();        labelPaint.setColor(Color.BLACK);        labelPaint.setStrokeWidth(2);        labelPaint.setAntiAlias(true);        labelPaint.setStyle(Paint.Style.STROKE);        textPaint = new Paint();        textPaint.setTextSize(28);        textPaint.setStyle(Paint.Style.FILL);        textPaint.setColor(Color.rgb(153, 153, 153));    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        drawLableLine(canvas);//x轴线        drawLableText(canvas);//x轴值        drawBarLines(canvas);//柱子    }    private void drawBarLines(Canvas canvas) {        Path path = new Path();        for(int i = 0 ; i < data.size() ; i++){            path.reset();            path.moveTo(spaceWidth * (i + 1) + barWidth * i,Y0);            path.lineTo(spaceWidth * (i + 1) + barWidth * i,((maxValue - data.get(i))/maxValue) * BarMaxHeight);            path.lineTo(spaceWidth * (i + 1) + barWidth * (i + 1) ,((maxValue - data.get(i))/maxValue) * BarMaxHeight );            path.lineTo(spaceWidth * (i + 1) + barWidth * (i + 1) ,Y0);            if(data.get(i) > averageValue){                paint.setColor(Color.rgb(239, 83, 80)); //red            }else{                paint.setColor(Color.rgb(153, 153, 153)); //gray            }            canvas.drawPath(path, paint);        }    }    private void drawLableText(Canvas canvas) {        for(int i = 0 ; i < xAxisFormarts.length ; i++){            float dis = textPaint.measureText(xAxisFormarts[i]);//文本长度            float x = spaceWidth * (i + 1) + barWidth * i + (barWidth - dis)/2;            canvas.drawText(xAxisFormarts[i],x,Y-5,textPaint);        }    }    private void drawLableLine(Canvas canvas) {        Path path = new Path();        path.moveTo(0f,Y0);        path.lineTo(X,Y0);        canvas.drawPath(path, labelPaint);    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        spaceWidth =( w- barWidth * 5 ) / 6;        BarMaxHeight = h - textHeight;        Y = h;        X = w;        Y0 = h - textHeight;        postInvalidate();        super.onSizeChanged(w, h, oldw, oldh);    }    public void setBarWidth(float barWidth) {        this.barWidth = barWidth;    }    public void setShowXText(boolean showXText) {        if(!showXText){            this.textHeight = 0;        }    }    public void setMaxValue(float maxValue) {        this.maxValue = maxValue;    }    public void setData(ArrayList<Float> data) {        this.data = data;    }    public void setAverageValue(float averageValue) {        this.averageValue = averageValue;    }    public void setTextHeight(float textHeight) {        this.textHeight = textHeight;    }}

activity调用：

   private void initBarLine() {        ArrayList<Float> data = new ArrayList<>();        data.add(30f);        data.add(20f);        data.add(15f);        data.add(35f);        data.add(60f);        barChart.setData(data);        barChart.setTextHeight(32f);        barChart.setBarWidth(112f);        barChart.setMaxValue(60f);        barChart.setAverageValue(40f);        barChart.invalidate();    }