自定义view柱状图

最新推荐文章于 2024-09-10 15:14:28 发布

qq_27429027

最新推荐文章于 2024-09-10 15:14:28 发布

阅读量410

点赞数

分类专栏：安卓自定义view 文章标签： android 柱状图自定义view

本文链接：https://blog.csdn.net/qq_27429027/article/details/75343144

版权

安卓同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

自定义view

2 篇文章 0 订阅

订阅专栏

简单的柱状图的绘制

第一步，设置画笔

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

本文介绍的是画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();
    }