android 实现淘宝收益图的折线

实现的效果我一会贴上,我先说下原理,我们知道要实现在canvas上画线,不就是要搞一个paint嘛,然后首先肯定要设置下paint的属性,那么画文字呢,不就是Textpaint吗,

对,就是这么简单,接下来怎么画,折线图主要分为X轴和y轴,x轴表示日期,y表示收益,好,说道这里,大家应该知道怎么去做了,下面直接贴代码,

这个方法是,画x,y坐标系的,以及上面的日期和收益了
private void drawCoordinate(Canvas canvas) {
    //坐标系画笔
    Paint coordinatePaint = new Paint();
    coordinatePaint.setAntiAlias(true);
    coordinatePaint.setStrokeWidth(1);
    coordinatePaint.setColor(getResources().getColor(R.color.c5));
    //坐标系文字画笔
    TextPaint coordinateTextPaint = new TextPaint();
    coordinateTextPaint.setAntiAlias(true);
    coordinateTextPaint.setTextSize(scaleTextSize);
    coordinateTextPaint.setAntiAlias(true);
    coordinateTextPaint.setColor(scaleTextColor);
    coordinateTextPaint.setTextAlign(Align.CENTER);

    //水平的刻度线
    float verticalScaleStep = getVerticalScaleStep();
    coordinateTextPaint.setTextAlign(Align.RIGHT);
    float textHeight = getTextHeight(coordinateTextPaint, "8");
    for (int i = 0; i < maxVerticalScaleValue; i++) {
        float y = getHeight() - bottomPadding - (verticalScaleStep * i);
        canvas.drawLine(leftPadding, y, getWidth() - rightPadding, y, coordinatePaint);
        canvas.drawText(i + "", leftPadding - 13, y + textHeight / 2, coordinateTextPaint);
    }
    //垂直的刻度线
    float horizontalScaleStep = getHorizontalScaleStep();
    for (int i = 0; i < line.getSize(); i++) {
        float x = leftPadding + (horizontalScaleStep * i);
        if (i == 0) {
            canvas.drawLine(x, topPadding, x, getHeight() - bottomPadding, coordinatePaint);
        }
        coordinateTextPaint.setColor(mTouchIndex == i ? verticalLineColor : scaleTextColor);
        coordinateTextPaint.setTextAlign(i == 0 ? Align.LEFT : Align.CENTER);
        canvas.drawText(line.getPoint(i).getX(), x, getHeight() - bottomPadding + textHeight + 10, coordinateTextPaint);
    }
}

但是产品有个需求啊,就是点击当前日期可以查看我的收益,并且在交汇点上展示出来

private void drawCurve(Canvas canvas) {
    Paint curvePaint = new Paint();//曲线画笔
    curvePaint.setColor(curveColor);
    curvePaint.setAntiAlias(true);
    curvePaint.setStrokeWidth(curveStrokeWidth);

    float horizontalScaleStep = getHorizontalScaleStep();
    float lastXPixels = 0, newYPixels = 0;
    float lastYPixels = 0, newXPixels = 0;
    float useHeight = getHeight() - bottomPadding - topPadding;
    for (int i = 0; i < line.getSize(); i++) {
        float yPercent = line.getPoint(i).getY() / maxVerticalScaleValue;
        if (i == 0) {
            lastXPixels = leftPadding + i * horizontalScaleStep;
            lastYPixels = getHeight() - bottomPadding - useHeight * yPercent;
        } else {
            newXPixels = leftPadding + i * horizontalScaleStep;
            newYPixels = getHeight() - bottomPadding - useHeight * yPercent;
            canvas.drawLine(lastXPixels, lastYPixels, newXPixels, newYPixels, curvePaint);
            lastXPixels = newXPixels;
            lastYPixels = newYPixels;
        }
        line.getPoint(i).fLineX = lastXPixels;
        line.getPoint(i).fLineY = lastYPixels;
    }
}

点击交汇点,有文字提示说明,

private void drawTipRect(Canvas canvas) {
    if (mTouchIndex == -1) return;
    LinePoint point = line.getPoint(mTouchIndex);
    float x = point.fLineX;
    float y = point.fLineY;

    // 描绘竖线
    Paint paint = new TextPaint();
    PathEffect effects = new DashPathEffect(new float[]{5, 5, 5, 5}, 1);
    paint.setPathEffect(effects);
    paint.setAntiAlias(true);
    paint.setStrokeWidth(verticalLineStrokeWidth);
    paint.setColor(verticalLineColor);
    canvas.drawLine(x, topPadding, x, getHeight() - bottomPadding, paint);

    //描绘交汇圆点
    paint.setPathEffect(null);
    paint.setStyle(Paint.Style.FILL_AND_STROKE);
    paint.setColor(Color.WHITE);
    canvas.drawCircle(x, y, circleRadius, paint);
    paint.setStyle(Paint.Style.STROKE);
    paint.setColor(circleColor);
    paint.setStrokeWidth(circleStrokeWidth);
    canvas.drawCircle(x, y, circleRadius, paint);

    float midY = (topPadding + getHeight() - bottomPadding) / 2;
    float midX = (leftPadding + getWidth() - rightPadding) / 2;

    //描绘圆角矩形
    TextPaint textPaint = new TextPaint();
    textPaint.setTextSize(tipTextSize);
    textPaint.setTextAlign(Align.CENTER);
    textPaint.setColor(tipTextColor);
    textPaint.setAntiAlias(true);

    String label = tipPrefix + point.getY();
    float textWidth = textPaint.measureText(label) + 15;
    float textHeight = getTextHeight(textPaint, label) + 8;
    float hMargin = 10;//水平间距
    float vMargin = 8;//垂直间距
    float w = textWidth + hMargin * 2;//宽
    float h = textHeight + vMargin * 2;//高

    RectF rect = new RectF();
    if (x > midX) {
        rect.right = x - hMargin;
        rect.left = x - w;
    } else {
        rect.left = x + hMargin;
        rect.right = x + w;
    }

    if (y > midY) {
        rect.top = y - h;
        rect.bottom = y - vMargin;
    } else {
        rect.bottom = y + h;
        rect.top = y + vMargin;
    }
    Paint roundRectPaint = new Paint();
    roundRectPaint.setColor(tipRectColor);
    roundRectPaint.setStyle(Paint.Style.FILL);
    roundRectPaint.setAntiAlias(true);
    canvas.drawRoundRect(rect, 3, 3, roundRectPaint);

    // 描绘圆角矩形中间的文字
    float roundTextX = (rect.left + rect.right) / 2;
    float roundTextY = (rect.top + rect.bottom + getTextHeight(textPaint, label)) / 2;
    canvas.drawText(label, roundTextX, roundTextY, textPaint);
}

好了核心的代码就这么多了,由于我们把它当做的是控件再用,那么我们在初始化的时候,肯定会引入一些自定义的样式表,

private void initViews(AttributeSet attrs, int defStyle) {
    TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.LineGraph, defStyle, 0);
    scaleTextSize = typedArray.getDimension(R.styleable.LineGraph_scale_text_size, 20);
    scaleTextColor = typedArray.getColor(R.styleable.LineGraph_scale_text_color, getResources().getColor(R.color.c5));
    tipRectColor = typedArray.getColor(R.styleable.LineGraph_tip_rect_color, getResources().getColor(R.color.c8));
    tipTextSize = typedArray.getDimension(R.styleable.LineGraph_tip_text_size, 22);
    tipTextColor = typedArray.getColor(R.styleable.LineGraph_tip_text_color, getResources().getColor(R.color.c12));
    curveStrokeWidth = typedArray.getDimension(R.styleable.LineGraph_curve_stroke_width, 4);
    curveColor = typedArray.getColor(R.styleable.LineGraph_curve_color, getResources().getColor(R.color.c8));
    verticalLineStrokeWidth = typedArray.getDimension(R.styleable.LineGraph_vertical_line_stroke_width, 2);
    verticalLineColor = typedArray.getColor(R.styleable.LineGraph_vertical_line_color, getResources().getColor(R.color.c8));
    circleStrokeWidth = typedArray.getDimensionPixelSize(R.styleable.LineGraph_circle_stroke_width, 3);
    circleColor = typedArray.getColor(R.styleable.LineGraph_circle_color, getResources().getColor(R.color.c8));
    circleRadius = typedArray.getDimensionPixelSize(R.styleable.LineGraph_circle_radius, 7);
    typedArray.recycle();

    bottomPadding = dip2px(getContext(), 20);
    topPadding = dip2px(getContext(), 10);
    leftPadding = dip2px(getContext(), 20);
    rightPadding = dip2px(getContext(), 10);
}

样式表文件我就不多说了,行如下面的格式,

<declare-styleable name="LineGraph">
    <attr name="scale_text_size" format="dimension" />
    <attr name="scale_text_color" format="color" />
    <attr name="tip_text_size" format="dimension" />
    <attr name="tip_text_color" format="color" />
    <attr name="tip_rect_color" format="color" />
    <attr name="curve_stroke_width" format="dimension" />
    <attr name="curve_color" format="color" />
    <attr name="vertical_line_stroke_width" format="dimension" />
    <attr name="vertical_line_color" format="color" />
    <attr name="circle_stroke_width" format="dimension" />
    <attr name="circle_color" format="color" />
    <attr name="circle_radius" format="dimension" />
</declare-styleable>

最后贴上个效果图,有需要的联系我吧,欢迎留言

git下载地址:https://github.com/xiangzhihong/lineview

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

android自定义xmls文件属性

在使用到自定义View的xml布局文件中需要加入xmlns:前缀=http://schemas.android.com/apk/res/你的自定义View所在...

21850
来自专栏封碎

Android放大镜的实现 博客分类: Android Android

快三个月了没写博客了,因为工作调动,很多经验、心得都没有时间记录下来。现在时间稍微充裕了点,我会尽量抽时间将之前想写而没写的东西补上。进入正题。     ...

33710
来自专栏程序员叨叨叨

【Android】手把手教你上滑解锁的效果

最近,公司开发的APP中要实现类似上滑解锁效果的推荐页,捣腾了两天,基本实现了效果,附效果图如上。接下来和大家聊聊如何实现这样的效果。

64620
来自专栏Winter漫聊技术

Android水波动画帮助类,一行代码实现View显示/隐藏/startActivity特效(0.3.1)

So,你可以如下compile该library了,也可以把这个类CircularAnim拷贝到项目里去。

14020
来自专栏developerHaoz 的安卓之旅

Android 带你撸一个好玩的 DoodleView(涂鸦)

可以看到这个这个自定义 View 的功能还是很丰富的,无论是设置画笔的形状、颜色、粗细,还是进行重置和保存,该有的 API,基本都已经实现了。有需要的读者直接 ...

13830
来自专栏移动开发

FruitLoadView 一个自定义view可用来做加载view

Github地址:https://github.com/X-FAN/FruitLoadView 欢迎star

10820
来自专栏开发之途

Android ImageView的Tint属性

23840
来自专栏项勇

笔记11 | 动态设置TextView的字体大小

25160
来自专栏潇涧技术专栏

Fab and Dialog Morphing Animation

Fab and Dialog Morphing Animation on Android.

9820
来自专栏Sorrower的专栏

动画必须有(二):悬浮菜单了解一下!

33630

扫码关注云+社区

领取腾讯云代金券