Android自定义View实现简单的折线图、柱状图

首先说第一个柱状图，实现很简单。一个自定义View，重现里面的OnDraw方法。然后利用paint，canvas绘制带填充的长方形即可。每个长方形的X轴平方View的x轴即可，长方形的高度通过简单的计算即可得到。下面上柱状图代码

package com.hrules.charter.demo.widget;import android.animation.ValueAnimator;import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.RectF;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.view.View;import android.view.animation.BounceInterpolator;import com.hrules.charter.demo.R;import java.util.Random;/** * 柱状图 * Created by 黄海 on 2017/4/17. */public class Histogram extends View implements View.OnClickListener {    int width, height;    Paint paintBar, paintText;    float[] values = new float[15];    float[] valuesTemp = new float[15];    int colorBackground = R.color.default_barBackgroundColor;//柱状背景    int[] colorBar = new int[]{R.color.lightBlue500, R.color.lightBlue400, R.color.lightBlue300};//柱状颜色    float maxY;    int barMarginLeft = 7;    int tagHeight = 45;//x和Y轴的数字    boolean anim;    boolean showLineXNums = true, showLineYNums = true;//展示X、Y轴的数字    int lineYNums = 5;//Y轴展示的格数    ValueAnimator valueAnimator;    public Histogram(Context context, @Nullable AttributeSet attrs) {        this(context, attrs, 0);    }    public Histogram(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        paintText = paintBar = new Paint();        paintBar.setAntiAlias(true);        paintText.setAntiAlias(true);        paintText.setTextSize(25);        paintText.setColor(getResources().getColor(colorBar[0]));        initValuesAndMaxY();        setOnClickListener(this);    }    private void initValuesAndMaxY() {        Random random = new Random();        for (int i = 0; i < values.length; i++) {            values[i] = random.nextFloat() * 100;        }        for (float i : values) {            maxY = maxY < i ? i : maxY;        }    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        width = getMeasuredWidth();        height = getMeasuredHeight();        int barWidth = (width - tagHeight) / values.length;        int j = 0;        if (!anim)            valuesTemp = values.clone();        for (int i = 0; i < valuesTemp.length; i++) {            RectF rect = new RectF();            rect.left = tagHeight + i * barWidth + barMarginLeft;            rect.top = (height - tagHeight) * (1 - 1.0f * valuesTemp[i] / maxY);            rect.right = rect.left + barWidth - barMarginLeft;            rect.bottom = height - tagHeight;            //draw the barBackground            paintBar.setColor(getResources().getColor(colorBackground));            canvas.drawRect(rect.left, 0, rect.right, rect.bottom, paintBar);            //paint the bar            j = j > colorBar.length - 1 ? 0 : j;            paintBar.setColor(getResources().getColor(colorBar[j++]));            canvas.drawRect(rect, paintBar);            if (showLineXNums) {                //draw x-coordinate num                float textWidth = paintText.measureText(String.valueOf(i));                float textLeft = rect.left + rect.width() / 2 - textWidth / 2;                canvas.drawText(String.valueOf(i), textLeft, height, paintText);            }        }        //draw y-coordinate num        if (showLineYNums) {            int avgHeight = (height - tagHeight) / lineYNums;            for (int i = 0; i < lineYNums; i++) {                float x = 0;                float y = (height - tagHeight) - avgHeight * (i + 1);                int valueY = (int) (maxY * (i + 1) / lineYNums);                // canvas写字是从x、y轴往右上写的                canvas.drawText(String.valueOf(valueY), x, y + 30, paintText);            }        }    }    @Override    public void onClick(View v) {        anim = true;        valueAnimator = ValueAnimator.ofFloat(0f, 1f);        valuesTemp = values.clone();        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                for (int i = 0; i < valuesTemp.length; i++) {                    //update valuesTemps                    float animatedValue = (float) animation.getAnimatedValue();                    valuesTemp[i] = maxY * animatedValue < values[i] ? maxY * animatedValue : values[i];                }                invalidate();            }        });//        valueAnimator.setInterpolator(new LinearInterpolator());        //落地回调效果        valueAnimator.setInterpolator(new BounceInterpolator());        valueAnimator.setDuration(2000l);        valueAnimator.start();    }}

实现比较简单，注释都有。最后说下onClick方法的作用：valuesTemp是原有柱状数据的副本，view点击后让valuesTemp的每个数据从maxY的最小百分比开始不断的增长，从而实现一个动态改变的动画效果，如下：

折线图运用的paint，canvas与path完成，计算每个点的位置和柱状图类似，折线图形成一个填充效果也简单就是path close一下，然后绘制close后的path就是。下面看源码

package com.hrules.charter.demo.widget;import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Path;import android.graphics.PointF;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.view.View;import com.hrules.charter.demo.R;import java.util.ArrayList;import java.util.List;import java.util.Random;/** * 折线图 * Created by 黄海 on 2017/4/18. */public class LineChart extends View {    Path path = new Path();    float[] values = new float[15];    float maxY;    Paint paintXy, paintLine;    int width, height;//view 宽高    public LineChart(Context context, @Nullable AttributeSet attrs) {        this(context, attrs, 0);    }    public LineChart(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        initValuesAndMaxY();        paintXy = new Paint(Paint.ANTI_ALIAS_FLAG);        paintXy.setStyle(Paint.Style.STROKE);        paintXy.setStrokeWidth(6);        paintXy.setColor(getResources().getColor(R.color.lightBlue500));        paintLine = new Paint(Paint.ANTI_ALIAS_FLAG);        paintLine.setStyle(Paint.Style.FILL);        paintLine.setColor(getResources().getColor(R.color.colorPrimary));    }    private void initValuesAndMaxY() {        Random random = new Random();        for (int i = 0; i < values.length; i++) {            values[i] = random.nextFloat() * 100;            maxY = maxY < values[i] ? values[i] : maxY;        }    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        width = getMeasuredWidth();        height = getMeasuredHeight();        //每格宽度        int widthAvg = width / values.length;        //画x轴y轴        path.moveTo(0, 0);        path.lineTo(0, height);        path.lineTo(width, height);        canvas.drawPath(path, paintXy);        List<PointF> list = new ArrayList<>();        for (int i = 0; i < values.length; i++) {//收集坐标信息            PointF point = new PointF(widthAvg / 2 + i * widthAvg, 0);            point.set(widthAvg / 2 + i * widthAvg, (1 - values[i] / maxY) * height);            list.add(point);        }        //画线        path.reset();//清除 画x轴y轴而产生的闭合影响        path.moveTo(list.get(0).x, list.get(0).y);        for (int i = 1; i < values.length; i++) {            path.lineTo(list.get(i).x, list.get(i).y);//            path.cubicTo(ps.x, ps.y,(ps.x+pe.x)/2,(ps.y+pe.y)/2, pe.x, pe.y);//画三次贝塞尔曲线        }        canvas.drawPath(path, paintXy);        //折线图闭合        path.lineTo(list.get(values.length - 1).x, height);        path.lineTo(list.get(0).x, height);        path.close();        canvas.drawPath(path, paintLine);        //画点        for (int i = 0; i < values.length; i++) {            canvas.drawCircle(list.get(i).x, list.get(i).y, 9, paintLine);        }    }}