自定义简单的柱状图

本人是个android菜鸟,因为项目需要所以写了个简单的柱状图,为了自己以后的学习的积累决定写下来,都说好记性不如烂笔头啊,好了正式开始先上个图吧!这里写图片描述

//坐标轴的轴线画笔
private Paint xLinePain;
//坐标轴水平虚线画笔
private Paint hLinePain;

//绘制左侧文本的画笔
private Paint titlePain;
//绘制右侧文本的画笔
private Paint rtitlePain; 
//左矩形画笔
private Paint lpaint;
//矩形画笔
private Paint rpaint;
//显示柱状图的条数
private int[] progress = {230, 200};
//实现左侧动画的值
private int[] laniProgress;
//右侧动画的值
private int[] raniProgress;

//在柱状图上显示数字
private final int TRUE = 1;
//设置点击事件,显示哪一条柱状信息
private int[] text;
private Bitmap bitmap;
//坐标轴左侧的数标
private String[] ySteps;
//坐标右侧的数标
private String[] rSteps;

//坐标轴底部的年月
private String[] xyear;
//是否使用动画
private int flag;

public HistogramView(Context context) {
    super(context);
    init();
}

public HistogramView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}


private void init() {
    ySteps = new String[]{"250", "200", "150", "100", "50", "0"};
    rSteps = new String[]{"6", "5", "4", "3", "2", "1", "0"};
    xyear = new String[]{"2016年"};
    text = new int[]{0, 0};
    laniProgress = new int[]{230};
    raniProgress = new int[]{5};


    xLinePain = new Paint();
    hLinePain = new Paint();
    titlePain = new Paint();
    rtitlePain = new Paint();
    lpaint = new Paint();
    rpaint = new Paint();

    //给画笔设置颜色
    xLinePain.setColor(Color.DKGRAY);
    hLinePain.setColor(Color.LTGRAY);
    titlePain.setColor(Color.BLACK);
    lpaint.setColor(getResources().getColor(R.color.rbcolorGreen));

}

public void start(int flag) {
    this.flag = flag;
}

@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    int width = getWidth();
    int height = getHeight() - dp2px(50);
    //绘制底部的线条
    canvas.drawLine(dp2px(30), height + dp2px(3), width - dp2px(30), height + dp2px(3), xLinePain);

    //左侧外周的,需要划分高度
    int leftHeight = height - dp2px(10);

    //左侧分成五部分
    int hPerHeight = leftHeight / 5;
    //右侧分成六部分
    int rPerHeight = leftHeight / 6;

    hLinePain.setTextAlign(Paint.Align.CENTER);


    //设置五条虚线
    for (int i = 0; i < 5; i++) {
        canvas.drawLine(dp2px(30), dp2px(10) + i * hPerHeight, width - dp2px(30), dp2px(10) + i * hPerHeight, hLinePain);
    }

    //设置数量的六条虚线
    for (int i = 0; i < 6; i++) {
        canvas.drawLine(dp2px(30), dp2px(10) + i * rPerHeight, width - dp2px(30), dp2px(10) + i * rPerHeight, hLinePain);
    }


    //绘制左 Y 周坐标
    titlePain.setTextAlign(Paint.Align.RIGHT);
    titlePain.setTextSize(sp2px(12));
    titlePain.setAntiAlias(true);
    titlePain.setStyle(Paint.Style.FILL);
    //设置左部的数字
    for (int i = 0; i < ySteps.length; i++) {
        canvas.drawText(ySteps[i], dp2px(25), dp2px(14) + i * hPerHeight, titlePain);
    }
    //绘制右 Y 周坐标

    rtitlePain.setTextAlign(Paint.Align.LEFT);
    rtitlePain.setTextSize(sp2px(12));
    rtitlePain.setAntiAlias(true);
    rtitlePain.setStyle(Paint.Style.FILL);
    for (int i= 0;i<rSteps.length;i++){
        canvas.drawText(rSteps[i],width - dp2px(25),dp2px(14) + i * rPerHeight,rtitlePain);
    }




    //绘制 X周坐标
    int xAxisLength = width - dp2px(30);
    int columCount = xyear.length + 1;
    int step = xAxisLength / columCount;

    for (int i = 0; i < columCount - 1; i++) {
        canvas.drawText(xyear[i], dp2px(25) + step * (i + 1), height + dp2px(20), titlePain);
    }


    //绘制矩形
    if (laniProgress != null && laniProgress.length > 0) {
        int stepNum = xAxisLength /3;

        //循环遍历将两条柱子画出来
        for (int i = 0; i < laniProgress.length; i++) {
            int value = laniProgress[i];
            lpaint.setAntiAlias(true);
            lpaint.setStyle(Paint.Style.FILL);
            lpaint.setTextSize(sp2px(15));
            lpaint.setColor(Color.parseColor("#228C10"));

            //柱状图的形状
            Rect rect = new Rect();
            rect.left = stepNum * (0 + 1);
            rect.right = dp2px(30) + stepNum * (0 + 1);
            int rh = (int) (leftHeight - leftHeight * (value / 250.0));
            rect.top = rh + dp2px(10);
            rect.bottom = height + dp2px(3);
            canvas.drawRect(rect, lpaint);
        }



        for (int i = 0; i < raniProgress.length; i++) {
            int value = raniProgress[i];
            rpaint.setAntiAlias(true);
            rpaint.setStyle(Paint.Style.FILL);
            rpaint.setTextSize(sp2px(15));
            rpaint.setColor(Color.parseColor("#F79F07"));

            //柱状图的形状
            Rect rect = new Rect();
            rect.left = stepNum * (1 + 1);
            rect.right = dp2px(30) + stepNum * (1 + 1);
            int rh = (int) (leftHeight - leftHeight * (value*41.5 / 250.0));
            rect.top = rh + dp2px(10);
            rect.bottom = height + dp2px(3);
            canvas.drawRect(rect, rpaint);
        }
    }
}

//像密度换成像素
private int dp2px(int value) {
    float v = getContext().getResources().getDisplayMetrics().density;
    return (int) (v * value + 0.5f);
}

private int sp2px(int value) {
    float v = getContext().getResources().getDisplayMetrics().scaledDensity;
    return (int) (v * value + 0.5f);
}

到此就完成了,如有不足还希望大家给出意见

猜你喜欢

转载自blog.csdn.net/qq_34702058/article/details/53156586