Android自定义View的基础知识(六)——绘制柱状图

在安卓程序开发过程当中，经常会遇到对于数据的统计问题，针对于这些数据统一，可能要求用直观的方式展示出来，那么就可以使用柱状图，折线图，或者饼状图，其实绘制的过程不难，冷静分析一下，柱状图其实就是绘制x轴和y轴然后在坐标系当中绘制长方形的过程，折线图其实就是连接各个点之间的位置，然后实现连线的过程。而饼状图最简单的画法，就通过占据的百分比，然后计算角度，绘制出扇形的过程。在本篇博客中，我们重点给大家介绍柱状图的绘制，并且将柱状图的宽度和间隔，可以通过自定义属性进行设置。实现效果如下：

实现如图所示效果的代码如下：

首先既然使用自定义属性，所以就需要在res/values文件夹下，创建attrs.xml文件，然后对于自定义属性进行设置

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CircleRectangleView">
        <attr name="rectWidth" format="dimension"/>
        <attr name="rectSpace" format="dimension"/>
    </declare-styleable>
</resources>

创建一个类继承于View，绘制柱状图，代码如下：

public class CircleRectangleView extends View{
    private Paint paint;

//    使用二维数组表示很多个柱子的颜色和宽度
    private int[][]rect_color_height = {{Color.RED,300},{Color.GRAY,400},{Color.GREEN,250},{Color.BLUE,600},{Color.YELLOW,330},{Color.BLACK,150}};
//  柱子的宽度
    private int rect_width;
    private int rect_space;  //柱子之间的间隔
    public CircleRectangleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initPaint();
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleRectangleView);
        rect_width = (int) typedArray.getDimension(R.styleable.CircleRectangleView_rectWidth,40);
        rect_space = (int) typedArray.getDimension(R.styleable.CircleRectangleView_rectSpace, 20);
        typedArray.recycle();
    }
    /**
     * 初始化画笔
     * */
    private void initPaint() {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(4);  //设置画笔线条的粗细
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        开始绘制
//        绘制x轴
        canvas.drawLine(50,getHeight()-50,getWidth()-50,getHeight()-50,paint);
//        绘制x轴的箭头
        canvas.drawLine(getWidth()-50,getHeight()-50,getWidth()-75,getHeight()-75,paint);
        canvas.drawLine(getWidth()-50,getHeight()-50,getWidth()-75,getHeight()-25,paint);
//        绘制y轴
        canvas.drawLine(50,getHeight()-50,50,50,paint);
//        绘制y轴的箭头
        canvas.drawLine(50,50,25,75,paint);
        canvas.drawLine(50,50,75,75,paint);
//        绘制刻度
        canvas.drawCircle(50,getHeight()-350,5,paint);
        paint.setTextSize(15);
        canvas.drawText("300",10,getHeight()-350,paint);
        canvas.drawCircle(50,getHeight()-650,5,paint);
        canvas.drawText("600",10,getHeight()-650,paint);
//        画矩形，明确左上右下
//        第一个  左：50+1*间隔+0*柱宽      右：左+柱宽    下：整体高度-50   上：整体高度-50-柱高
//        第二个 左：50+2*间隔+1*柱宽
//        第三个  左：50+3*间隔+2*柱宽
        Paint rectPaint = new Paint();
        for (int i = 0; i < rect_color_height.length; i++) {
            int bottom = getHeight()-50;
            int top = getHeight()-50-rect_color_height[i][1];
            int left = 50+rect_space*(i+1)+rect_width*i;
            int right = left+rect_width;

            rectPaint.setColor(rect_color_height[i][0]);
            canvas.drawRect(left,top,right,bottom,rectPaint);
        }
    }
}

然后可以在布局当中引入这个柱状图。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.animee.day406.demo02.CircleRectangleView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:rectSpace="10dp"
        app:rectWidth="40dp"/>
</LinearLayout>

需要注意的是，引入的过程一定要你的包名.类名的方式，引入这个柱状图，否则看不出效果，找不到对应的类。这样就完成了简单的柱状图的绘制。

Android自定义View的基础知识(六)——绘制柱状图

猜你喜欢