Android 曲线图-自定义控件

Android 曲线图-自定义控件

各位好 最近工作遇到曲线图需求 所以决定自己写一个 哈哈 实现起来还算是比较简单 这里分享一下
————————————————

具体实现说来话长 我长话短说 画图 当然得有笔了 创建画笔

 linePaint = new Paint();

然后 画。。。哈哈

/**
     * 画线
     */
    private void toDrawLine(Canvas canvas) {
        if (xyList == null || xyList.size() == 0) {
            return;
        }
        List<PointF> NewPoints = new ArrayList<>();
        NewPoints.addAll(xyList);
        float lX = 0;
        float lY = 0;
        baseLinePath.reset();
        baseLinePath.moveTo(NewPoints.get(0).x, NewPoints.get(0).y);
        for (int i = 1; i < NewPoints.size(); i++) {
            PointF p = NewPoints.get(i);
            PointF firstPointF = NewPoints.get(i - 1);
            float x1 = firstPointF.x + lX;
            float y1 = firstPointF.y + lY;

            PointF secondPointF = NewPoints.get(i + 1 < NewPoints.size() ? i + 1 : i);
            lX = (secondPointF.x - firstPointF.x) / 2 * smoothness;
            lY = (secondPointF.y - firstPointF.y) / 2 * smoothness;
            float x2 = p.x - lX;
            float y2 = p.y - lY;
            if (y1 == p.y) {
                y2 = y1;
            }
            baseLinePath.cubicTo(x1, y1, x2, y2, p.x, p.y);
        }
        canvas.drawPath(baseLinePath, mPaint);
        for (int i = 0; i < NewPoints.size(); i++) {
            float x = NewPoints.get(i).x;
            float y = NewPoints.get(i).y;
            int time = timeList.get(i);
            String mThumbText = String.valueOf(time);
            Rect rect = new Rect();
            linePaint.getTextBounds(mThumbText, 0, mThumbText.length(), rect);
            canvas.drawText(mThumbText, x - rect.width() / 2, y - dp2px(6), linePaint);//画最上面字体
            canvas.drawCircle(x, y, dp2px(3), circlePaint);
            canvas.drawCircle(x, y, dp2px(2), circlePaint2);
            Rect rectf = new Rect();
            textPaint.getTextBounds(dataList.get(i), 0, dataList.get(i).length(), rectf);
            canvas.drawText(dataList.get(i), x - rectf.width() / 2, sumHeight - dp2px(2), textPaint);//画最下方的字体
        }
        drawArea(canvas, NewPoints);
        drawBottomLine(canvas);
        drawLine(canvas);

    }

/**
     * 分割线
     *
     * @param canvas
     */
    private void drawLine(Canvas canvas) {
        int lineNum1 = 20;
        int lineNum2 = 60;
        int mMax = (int) max;
        lineNum1 = mMax /5;
        lineNum2 = mMax /2 + mMax/10;
        String text = "0";
        Rect rect = new Rect();
        scorePaint.getTextBounds(text, 0, text.length(), rect);
        //0
        canvas.drawText(text, 0, sumHeight - buttomHeiht - rect.height() / 2, textPaint);
        text = lineNum1+"";
        float y3 = (sumHeight - (oneHeight * lineNum1));
        canvas.drawText(text, 0, y3 - buttomHeiht - rect.height() / 2 - dp2px(4), textPaint);
        canvas.drawLine(0, y3 - buttomHeiht, sumWidth, y3 - buttomHeiht, scorePaint);
        //60
        text = lineNum2+"";
        float y = (sumHeight - (oneHeight * lineNum2));
        canvas.drawText(text, 0, y - buttomHeiht - rect.height() / 2 - dp2px(4), textPaint);
        canvas.drawLine(0, y - buttomHeiht, sumWidth, y - buttomHeiht, scorePaint);
        //100
        text = mMax+"(单位)";
        float y2 = (sumHeight - (oneHeight * mMax));
        canvas.drawText(text, 0, y2 - buttomHeiht - rect.height() / 2 - dp2px(4), textPaint);
        canvas.drawLine(0, y2 - buttomHeiht, sumWidth, y2 - buttomHeiht, scorePaint);
    }

/**
     * 底部标线
     *
     * @param canvas
     */
    private void drawBottomLine(Canvas canvas) {
        Rect rect = new Rect();
        scorePaint.getTextBounds("0", 0, "0".length(), rect);
        canvas.drawLine(0, sumHeight - dp2px(15) - rect.height() / 2, sumWidth, sumHeight - dp2px(15) - rect.height() / 2, scorePaint);//画底部灰线
    }

/**
 * 阴影层叠
 *
 * @param canvas
 * @param Points
 */

private void drawArea(Canvas canvas, List<PointF> Points) {
    LinearGradient mShader = new LinearGradient(0, 0, 0, getMeasuredHeight(), new int[]{Color.parseColor("#25CAF3"), Color.parseColor("#FF8BDBF6"), Color.parseColor("#EDD0F1FA")}, new float[]{0.55f, 0.7f, 0.9f}, Shader.TileMode.REPEAT);
    baseShadow.setShader(mShader);
    if (Points.size() > 0 && xyList != null && xyList.size() > 0) {
        baseLinePath.lineTo(xyList.get(Points.size() - 1).x, sumHeight - buttomHeiht);
        baseLinePath.lineTo(xyList.get(0).x, sumHeight - buttomHeiht);
        baseLinePath.close();
        canvas.drawPath(baseLinePath, baseShadow);
    }

}

下载地址 附件 demo

有问题请留言