自定义view-统计图

最新推荐文章于 2024-04-07 22:04:45 发布

JianXinZheng

最新推荐文章于 2024-04-07 22:04:45 发布

阅读量442

点赞数 3

分类专栏：自定义view 文章标签： android 自定义view

本文链接：https://blog.csdn.net/qq_16782391/article/details/74980929

版权

自定义view 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先上效果图:

要实现一个view，首先看一个view的组成部分

一.图形的拆解

1.画统计图的横、纵坐标

2.计算出各个分类的位置

3.画每个分类的文字

1.画统计图的横，纵坐标

在这里仅做练习，没适配多种屏幕，如果读者需要适配多种屏幕，可以使用canvas getwidth getheight方法来计算坐标的位置

 private Paint paint;

    private Path path;

    private String[] str = {"A","B","C","D","E","F","G"};

   path.moveTo(100,100);
        path.lineTo(100,600);
        path.rLineTo(900,0);
        paint.setStrokeWidth(4);
        paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawPath(path,paint);

2.计算出每种分类的占比和间隙

我们的x轴的坐标是从100-900，所以总共的长度为800，我设定每个间隔的大小为30，由此可以计算出每个分类的长度为800-30*7，这里算出来的间隔，会感觉比较窄，所以我把间隔的长度调宽一点，间隔的总长度我设置为160，具体绘制分类的代码如下

  float jiange = (800-160) / 7;
        int count = 7;

        paint.setColor(Color.RED);
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.FILL);
        paint.setTextSize(40);

        for (int i=0; i < count; i++){

            float startX = jiange * i + 30f *(i + 1);

            float stopX = jiange * (i+1) + 30f *(i + 1);


            canvas.drawLine(startX + 100,600,stopX + 100 ,600,paint);

            float percent = (i/ 7f * 500) + 100;
            Log.e(" canvas ",percent + "" + " i  " + i );

            canvas.drawRect(startX + 100,percent,stopX + 100,600,paint);

3.接下来就是绘制文字了

绘制文字刚好要在每个分类的中心，这时候需要用paint的measureText方法来计算文本的大小，因为文字的绘制起点是在左下角，这里的计算规则是，先用分类柱状图的结束坐标减去起始坐标除于2，然后在减去文字长度的一半，刚好就是文字的起始坐标，具体代码如下：

            float  hegiht = paint.measureText(str[0]);

            canvas.drawText(str[i],startX + 100 + ((stopX + 100) - (startX + 100)) /2 - hegiht /2,600 + hegiht + 20,paint);
//            }




        }

    }

这样一个柱状图效果就完成了