Android笔记——自定义View之饼图与柱状图

因为一直喜欢琢磨界面，所以总爱翻跟界面有关的文章。之前在HenCoder上看到自定义View的教学，就跟着敲出了饼图和柱状图：


饼图

柱状图

一、饼图

1、数据初始化

饼图绘制的关键是角度，获取数据后将各个数据在总数中的占比转化成角度进行绘制。

      /*数据总和*/
        sum = 0;
      /*饼图每部分开始绘制的角度*/
        startAngle = 0;
      /*饼图每部分结束绘制的角度*/
        endAngle = 0;
      /*获取数值总和，最大数值及其下标*/
        for (int i=0;i<values.length;i++) {
            sum+=values[i];
            if(values[i]>=maxValue){
                maxValue = values[i];
                maxIndex = i;
                Log.d(TAG,"maxValue:"+maxValue);
                Log.d(TAG,"maxIndex:"+maxIndex);
            }
        }
        Log.d(TAG,"sum:"+sum);
        textPaint = new Paint();
        paint = new Paint();
        path = new Path();
        paint.setAntiAlias(true);/*开启抗锯齿*/

2、绘制数值

获取画布的宽高，设置恰当的半径，开始绘制。

if(values.length>0&&values.length==datas.length){
            init();
            int width = getWidth();
            int height = getHeight();
            int r = Math.min(width,height)/2;

            paint.setStyle(Paint.Style.STROKE);
            paint.setColor(textColor);
            paint.setStrokeWidth(strokeWidth);
            textPaint.setTextSize(percentSize);
            /*圆的半径*/
            int R = (int)(r- r*0.15f);

            /*绘制数值*/
            for (int i=0; i<values.length; i++){
                float percent = values[i]/sum;
                startAngle = endAngle;
                endAngle+=360 * percent;
                angle = endAngle - startAngle;
                Log.d(TAG,"startAngle:"+startAngle);
                Log.d(TAG,"endAngle:"+endAngle);
                Log.d(TAG,"angle:"+angle);
                /*判断是否在绘制最大值的文字*/
                xMaxOffset = maxIndex==i?offset*(float)Math.cos(Math.toRadians(startAngle+angle/2)):0;
                yMaxOffset = maxIndex==i?offset*(float)Math.sin(Math.toRadians(startAngle+angle/2)):0;
                float xOffset = (offset+DensityUtil.dip2px(getContext(),2))
                        *(float)Math.cos(Math.toRadians(startAngle+angle/2));
                float yOffset = (offset+DensityUtil.dip2px(getContext(),2))
                        *(float)Math.sin(Math.toRadians(startAngle+angle/2));
                Log.d(TAG,"xMaxOffset:"+xMaxOffset);
                Log.d(TAG,"yMaxOffset:"+yMaxOffset);
                x = R*(float)Math.cos(Math.toRadians(startAngle+angle/2));
                y = R*(float)Math.sin(Math.toRadians(startAngle+angle/2));
                path.moveTo(width/2+xOffset+xMaxOffset+x*0.3f,height/2+yOffset+yMaxOffset+y*0.3f);
                path.rLineTo(x*0.7f,y*0.7f);
                canvas.drawPath(path,paint);
                if(startAngle+angle/2>90&&startAngle+angle/2<270){
                    path.rLineTo(-stripValue,0);
                    textPaint.setTextAlign(Paint.Align.RIGHT);
                    canvas.drawText(String.format("%.2f", percent*100)+"%",
                            width/2+x-text2strip+xOffset+xMaxOffset,height/2+y+yOffset+yMaxOffset,textPaint);
                }else {
                    path.rLineTo(stripValue,0);
                    textPaint.setTextAlign(Paint.Align.LEFT);
                    canvas.drawText((String.format("%.2f", percent*100))+"%",
                            width/2+x+text2strip+xOffset+xMaxOffset,height/2+y+yOffset+yMaxOffset,textPaint);
                }
                canvas.drawPath(path,paint);
            }

3、绘制饼图和文字

衔接上面的代码开始绘制饼图和文字

            /*绘制饼图*/
            startAngle=endAngle=angle=0;
            paint.setStyle(Paint.Style.FILL);
            RectF oval=new RectF();                     //RectF对象
            for (int i=0; i<values.length; i++){
                float percent = values[i]/sum;
                startAngle = endAngle;
                endAngle+=360 * percent;
                angle = endAngle - startAngle;
                /*最大一部分的xy轴偏移量*/
                xMaxOffset = maxIndex==i?offset*(float)Math.cos(Math.toRadians(startAngle+angle/2)):0;
                yMaxOffset = maxIndex==i?offset*(float)Math.sin(Math.toRadians(startAngle+angle/2)):0;
                /*饼图每一部分的偏移量，这样才能绘制出缝隙*/
                float xOffset = offset*(float)Math.cos(Math.toRadians(startAngle+angle/2));
                float yOffset = offset*(float)Math.sin(Math.toRadians(startAngle+angle/2));
                oval.left=width/2-r+r*PIE_PERCENT+xOffset+xMaxOffset;  //左边
                oval.top=height/2-r+r*PIE_PERCENT+yOffset+yMaxOffset;  //上边
                oval.right=width/2+r-r*PIE_PERCENT+xMaxOffset; //右边
                oval.bottom=height/2+r-r*PIE_PERCENT+yMaxOffset;   //下边

                /*防止最后一部分与第一部分的颜色重叠*/
                if (i==values.length-1&&i%ChartColor.COLORNUMMBER==0){
                    paint.setColor(colors[i%ChartColor.COLORNUMMBER+1]);
                }else {
                    paint.setColor(colors[i%ChartColor.COLORNUMMBER]);
                }
                
                canvas.drawArc(oval,startAngle,angle,true,paint);
                x = (R)*(float)Math.cos(Math.toRadians(startAngle+angle/2));
                y = (R)*(float)Math.sin(Math.toRadians(startAngle+angle/2));
                textPaint.setTextAlign(Paint.Align.CENTER);
            }

            /*为防止饼图的最后一部分将第一个文字覆盖，将文字的绘制独立了出来*/
            for (int i=0; i<values.length; i++){
                float percent = values[i]/sum;
                startAngle = endAngle;
                endAngle+=360 * percent;
                angle = endAngle - startAngle;
                x = (R)*(float)Math.cos(Math.toRadians(startAngle+angle/2));
                y = (R)*(float)Math.sin(Math.toRadians(startAngle+angle/2));
                textPaint.setTextSize(textSize);
                canvas.drawText(datas[i],width/2+x*2/3,height/2+y*2/3,textPaint);
            }
        }

二、柱状图

柱状图就是绘制矩形和xy轴，难点是沿着y轴绘制y轴坐标名称，解决的办法是沿折线绘制文字。

1、数据初始化

/*获取最大数值*/
        for (float value : values) {
            if(value >= max){
                max = value;
            }
        }
        /*画布宽高*/
        width = getWidth();
        height = getHeight();
        /*每个柱子间的间隙*/
        spacing = (width-2*marginLeft)*0.3f/(values.length+1);
        /*柱子的宽度*/
        bgWidth = (width-2*marginLeft)*0.7f/(values.length);
        /*柱子的最高高度*/
        maxHeight = height-5*marginBottom;
        /*y轴距左边缘的偏移值*/
        leftOffset = (unit!=""&&Yname!="") ? DensityUtil.dip2px(getContext(),10):0;

2、绘制xy轴与y轴坐标名称

            /*绘制xy轴*/
            path = new Path();
            paint = new Paint();
            textPaint = new Paint();
            textPaint.setTextSize(textSize);
            textPaint.setTextAlign(Paint.Align.CENTER);
            paint.setStyle(Paint.Style.STROKE);
            path.moveTo(marginLeft+leftOffset,marginBottom);
            path.rLineTo(0,height-3*marginBottom);
            canvas.drawPath(path,paint);

            /*绘制y轴坐标名称*/
            if(unit!=""&&Yname!=null){
                canvas.drawTextOnPath(Yname+"/"+unit,path,-(height-10*marginBottom)/2,textSize*3/2,textPaint);
            }
            path.rLineTo(width-2*marginLeft,0);
            canvas.drawPath(path,paint);

3、绘制柱子和数据

/*绘制柱子和文字*/
            startXposition = marginLeft+spacing+leftOffset;
            startYposition = marginBottom+height-3*marginBottom;
            paint.setStyle(Paint.Style.FILL);
            paint.setColor(ChartColor.VIOLETRED);

            /*柱子的左上角与右下角*/
            float left = 0;
            float top = 0;
            float right = 0;
            float bottom = 0;
            int i = 0;
            for (float value : values) {
                left = startXposition;
                top = startYposition - value/max * maxHeight;
                right = startXposition + bgWidth;
                bottom = startYposition;
                canvas.drawRect(left,top,right,bottom,paint);
                canvas.drawText(String.valueOf(value),startXposition+bgWidth/2,top-marginBottom/2,textPaint);
                canvas.drawText(datas[i],startXposition+bgWidth/2,startYposition+marginBottom*3/2,textPaint);
                startXposition = startXposition + spacing + bgWidth;
                i++;
            }

三、使用

1、添加依赖


2.饼图

在xml里添加布局

<com.mils.mychart.chart.PieChartView
        android:id="@+id/pc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

添加数据与数据名称

float[] values = new float[]{5,2,7,25,40,20,30,10,10,4,10,4};
String[] datas = new String[]{"语文","数学","英语","文综","理综","数学","英语","文综","理综","理综","文综","理综"};
pcView.setValues(values);
pcView.setDatas(datas);

设置文字与数值字体大小，默认为10dp

pcView.setPercentSize(10f);
pcView.setTextSize(10f);

3、柱状图

在xml里添加布局

<com.mils.mychart.chart.BarGraphView
        android:id="@+id/bg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

添加数据与数据名称

float[] values = new float[]{5,2,7,25,40,20,30,10,10,4,10,4};
String[] datas = new String[]{"语文","数学","英语","文综","理综","数学","英语","文综","理综","理综","文综","理综"};
bgView.setValues(values);
bgView.setData(datas);

添加y轴坐标单位与名称

bgView.setYaxis("分","分数");

设置柱状图颜色

bgView.setChartColor(ChartColor.ORANGEYELLOW);

END

github地址：https://github.com/Mils-liu/MyChart
HenCoder教程地址：https://hencoder.com/activity-mock-2/

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,826评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,968评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,234评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,562评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,611评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,482评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,271评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,166评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,608评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,644评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,249评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2赞 354