Android MPAndroidChart 自适应Markerview

Android MPAndroidChart 自适应Markerview

Android小彩虹2021-08-23 17:30:02300A+A-

前言

Android里面只要用过图表的应该都知道MPAndroidChart这个库。这个库在iOS里面也有对应Charts,所以一般移动端做图表,Android和iOS两端都要实现同样的效果,他们是不错的一个选择。 但是,对于图表这种包含的情况非常复杂的东西,很难满足大家各种各样的需求,所以很多都需要自定义。下面就是给大家分享一下自己写的自适应MarkerView。

先上图

正常居中显示

超过左边界

超过上边界

超过右边界

超过上边界和右边界

正文

要实现这样的效果,大家先想想怎么做? 这里的逻辑步骤分为: 1、创建新类继承自MarkerView 2、inflate layout进去 3、重写getOffsetForDrawingAtPoint ,分别处理各种边界情况的偏移 4、重写draw,绘制底色,根据不同的情况,绘制带箭头的对话框

直接上代码
public class XYMarkerView extends MarkerView {
    public static final int ARROW_SIZE = 40; // 箭头的大小
    private static final float CIRCLE_OFFSET = 10;//因为我这里的折点是圆圈,所以要偏移,防止直接指向了圆心
    private static final float STOKE_WIDTH = 5;//这里对于stroke_width的宽度也要做一定偏移
    private final TextView tvContent;
    private final RoundImageView avatar;
    private final TextView name;
    private final List<StepListModel> stepListModels;
    private int index;
    private int oldIndex = -1;

    public XYMarkerView(Context context, List<StepListModel> stepListModels) {
        super(context, R.layout.custom_marker_view);
        tvContent = (TextView) findViewById(R.id.tvContent);
        avatar = (RoundImageView) findViewById(R.id.avatar);
        name = (TextView) findViewById(R.id.name);
        this.stepListModels = stepListModels;
    }

    @Override
    public void refreshContent(Entry e, Highlight highlight) {
        super.refreshContent(e, highlight);
        index = highlight.getDataSetIndex();//这个方法用于获得折线是哪根
        tvContent.setText((int) e.getY() + "");
//            StepListModel stepListModel = stepListModels.get(highlight.getDataSetIndex() % Constants.battleUsersCount);
//            name.setText(stepListModel.getNickNm());
//            Glide.with(getContext())
//                    .load(GlideUtil.getGlideUrl(stepListModel.getIconUrl()))
//                    .into(avatar);
        Glide.with(getContext())
                .asBitmap()
                .load(avatars[index % avatars.length])
                .listener(new RequestListener<Bitmap>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Bitmap> target, boolean isFirstResource) {
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(Bitmap resource, Object model, Target<Bitmap> target, DataSource dataSource, boolean isFirstResource) {
                        if (resource != null) {
                            if (oldIndex != index) {
                                XYMarkerView.this.getChartView().invalidate();
                                oldIndex = index;
                            }
                            avatar.setImageBitmap(resource);
                        }
                        return false;
                    }
                })
                .into(avatar);
        name.setText(highlight.getDataSetIndex() + "");
        tvContent.setTextColor(getResources().getColor(ColorUtil.colors[highlight.getDataSetIndex() % ColorUtil.colors.length]));
        LogUtil.m("getDataSetIndex" + highlight.getDataSetIndex());

    }

    @Override
    public MPPointF getOffsetForDrawingAtPoint(float posX, float posY) {
        MPPointF offset = getOffset();
        Chart chart = getChartView();
        float width = getWidth();
        float height = getHeight();
// posY \posX 指的是markerView左上角点在图表上面的位置
//处理Y方向
        if (posY <= height + ARROW_SIZE) {// 如果点y坐标小于markerView的高度,如果不处理会超出上边界,处理了之后这时候箭头是向上的,我们需要把图标下移一个箭头的大小
            offset.y = ARROW_SIZE;
        } else {//否则属于正常情况,因为我们默认是箭头朝下,然后正常偏移就是,需要向上偏移markerView高度和arrow size,再加一个stroke的宽度,因为你需要看到对话框的上面的边框
            offset.y = -height - ARROW_SIZE - STOKE_WIDTH; // 40 arrow height   5 stroke width
        }
//处理X方向,分为3种情况,1、在图表左边 2、在图表中间 3、在图表右边
//
        if (posX > chart.getWidth() - width) {//如果超过右边界,则向左偏移markerView的宽度
            offset.x = -width;
        } else {//默认情况,不偏移(因为是点是在左上角)
            offset.x = 0;
            if (posX > width / 2) {//如果大于markerView的一半,说明箭头在中间,所以向右偏移一半宽度
                offset.x = -(width / 2);
            }
        }
        return offset;
    }

    @Override
    public void draw(Canvas canvas, float posX, float posY) {
        Paint paint = new Paint();//绘制边框的画笔
        paint.setStrokeWidth(STOKE_WIDTH);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND);
        paint.setColor(getResources().getColor(ColorUtil.colors[index % ColorUtil.colors.length]));

        Paint whitePaint = new Paint();//绘制底色白色的画笔
        whitePaint.setStyle(Paint.Style.FILL);
        whitePaint.setColor(Color.WHITE);

        Chart chart = getChartView();
        float width = getWidth();
        float height = getHeight();

        MPPointF offset = getOffsetForDrawingAtPoint(posX, posY);
        int saveId = canvas.save();

        Path path = new Path();
        if (posY < height + ARROW_SIZE) {//处理超过上边界
            path = new Path();
            path.moveTo(0, 0);
            if (posX > chart.getWidth() - width) {//超过右边界
                path.lineTo(width - ARROW_SIZE, 0);
                path.lineTo(width, -ARROW_SIZE + CIRCLE_OFFSET);
                path.lineTo(width, 0);
            } else {
                if (posX > width / 2) {//在图表中间
                    path.lineTo(width / 2 - ARROW_SIZE / 2, 0);
                    path.lineTo(width / 2, -ARROW_SIZE + CIRCLE_OFFSET);
                    path.lineTo(width / 2 + ARROW_SIZE / 2, 0);
                } else {//超过左边界
                    path.lineTo(0, -ARROW_SIZE + CIRCLE_OFFSET);
                    path.lineTo(0 + ARROW_SIZE, 0);
                }
            }
            path.lineTo(0 + width, 0);
            path.lineTo(0 + width, 0 + height);
            path.lineTo(0, 0 + height);
            path.lineTo(0, 0);
            path.offset(posX + offset.x, posY + offset.y);
        } else {//没有超过上边界
            path = new Path();
            path.moveTo(0, 0);
            path.lineTo(0 + width, 0);
            path.lineTo(0 + width, 0 + height);
            if (posX > chart.getWidth() - width) {
                path.lineTo(width, height + ARROW_SIZE - CIRCLE_OFFSET);
                path.lineTo(width - ARROW_SIZE, 0 + height);
                path.lineTo(0, 0 + height);
            } else {
                if (posX > width / 2) {
                    path.lineTo(width / 2 + ARROW_SIZE / 2, 0 + height);
                    path.lineTo(width / 2, height + ARROW_SIZE - CIRCLE_OFFSET);
                    path.lineTo(width / 2 - ARROW_SIZE / 2, 0 + height);
                    path.lineTo(0, 0 + height);
                } else {
                    path.lineTo(0 + ARROW_SIZE, 0 + height);
                    path.lineTo(0, height + ARROW_SIZE - CIRCLE_OFFSET);
                    path.lineTo(0, 0 + height);
                }
            }
            path.lineTo(0, 0);
            path.offset(posX + offset.x, posY + offset.y);
        }

        // translate to the correct position and draw
        canvas.drawPath(path, whitePaint);
        canvas.drawPath(path, paint);
        canvas.translate(posX + offset.x, posY + offset.y);
        draw(canvas);
        canvas.restoreToCount(saveId);
    }
}

详细

不同颜色、头像等处理

我这里的需求是根据不同的折线,显示不同的人物头像、名字和对应的值,并且对话框的颜色、字体都要对应折线的颜色。 所以,我这里根据highlight.getDataSetIndex()就能处理不同颜色、头像等信息的情况。

//类似这个
 name.setText(highlight.getDataSetIndex() + "");
 tvContent.setTextColor(getResources().getColor(ColorUtil.colors[highlight.getDataSetIndex() % ColorUtil.colors.length]));

注意: 这里有个地方要注意一下,这里如果你使用Glide来加载图片到ImageView里去,会出现第一次加载不出来头像,第二次点击的时候就加载出来了。 原因 :是因为其实glide已经加载出来了,然后只是异步加载出来之后,已经是在layout绘制完成之后了,并没有进行invalidate的刷新。所以直到第二次的时候,其实glide已经加载过了,有缓存,所以直接就显示了,发生在draw方法之前,因为refreshContent就在draw之前调用


            // callbacks to update the content
            mMarker.refreshContent(e, highlight);

            // draw the marker
            mMarker.draw(canvas, pos[0], pos[1]);

我这里是直接在glide的onResourceReady里面调用chart的invalidate,但是这样的话会一直循环刷新了,卡死! 所以,这里使用了一个oldIndex是否等于index来判断是否是已经invalidate,这样的话就只有点击不同的折线的时候会invalidate一次,之后就不会了。

  private int index;
  private int oldIndex = -1;
  ...
  Glide.with(getContext())
                .asBitmap()
                .load(avatars[index % avatars.length])
                .listener(new RequestListener<Bitmap>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Bitmap> target, boolean isFirstResource) {
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(Bitmap resource, Object model, Target<Bitmap> target, DataSource dataSource, boolean isFirstResource) {
                        if (resource != null) {
                            if (oldIndex != index) {
                                XYMarkerView.this.getChartView().invalidate();
                                oldIndex = index;
                            }
                            avatar.setImageBitmap(resource);
                        }
                        return false;
                    }
                })
                .into(avatar);
边界情况的处理

MarkerView的draw方法,里面有posX、posY,这个点坐标代表的是markerView的左上角的坐标(如果不偏移的情况下,官方的默认也是做了偏移处理的,但是还有不够完善)。

默认是在左上角的,像这样
getOffsetForDrawingAtPoint就是处理偏移的方法,最终应用是在draw里面,进行canvas的translate变换

 @Override
    public void draw(Canvas canvas, float posX, float posY) {

        MPPointF offset = getOffsetForDrawingAtPoint(posX, posY);

        int saveId = canvas.save();
        // translate to the correct position and draw
        canvas.translate(posX + offset.x, posY + offset.y);
        draw(canvas);
        canvas.restoreToCount(saveId);
    }

下面是我对各种边界情况的处理

     @Override
    public MPPointF getOffsetForDrawingAtPoint(float posX, float posY) {
        MPPointF offset = getOffset();
        Chart chart = getChartView();
        float width = getWidth();
        float height = getHeight();
// posY \posX 指的是markerView左上角点在图表上面的位置
//处理Y方向
        if (posY <= height + ARROW_SIZE) {// 如果点y坐标小于markerView的高度,如果不处理会超出上边界,处理了之后这时候箭头是向上的,我们需要把图标下移一个箭头的大小
            offset.y = ARROW_SIZE;
        } else {//否则属于正常情况,因为我们默认是箭头朝下,然后正常偏移就是,需要向上偏移markerView高度和arrow size,再加一个stroke的宽度,因为你需要看到对话框的上面的边框
            offset.y = -height - ARROW_SIZE - STOKE_WIDTH; // 40 arrow height   5 stroke width
        }
//处理X方向,分为3种情况,1、在图表左边 2、在图表中间 3、在图表右边
//
        if (posX > chart.getWidth() - width) {//如果超过右边界,则向左偏移markerView的宽度
            offset.x = -width;
        } else {//默认情况,不偏移(因为是点是在左上角)
            offset.x = 0;
            if (posX > width / 2) {//如果大于markerView的一半,说明箭头在中间,所以向右偏移一半宽度
                offset.x = -(width / 2);
            }
        }
        return offset;
    }

处理左边界

处理一般情况

处理上边界

处理右边界

对于各个箭头的处理

实现这个对话框,主要是通过绘制path来实现的,箭头的处理也是根据不同的情况,进行不同的path绘制实现的。

 @Override
    public void draw(Canvas canvas, float posX, float posY) {
        Paint paint = new Paint();//绘制边框的画笔
        paint.setStrokeWidth(STOKE_WIDTH);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND);
        paint.setColor(getResources().getColor(ColorUtil.colors[index % ColorUtil.colors.length]));

        Paint whitePaint = new Paint();//绘制底色白色的画笔
        whitePaint.setStyle(Paint.Style.FILL);
        whitePaint.setColor(Color.WHITE);

        Chart chart = getChartView();
        float width = getWidth();
        float height = getHeight();

        MPPointF offset = getOffsetForDrawingAtPoint(posX, posY);
        int saveId = canvas.save();

        Path path = new Path();
        if (posY < height + ARROW_SIZE) {//处理超过上边界
            path = new Path();
            path.moveTo(0, 0);
            if (posX > chart.getWidth() - width) {//超过右边界
                path.lineTo(width - ARROW_SIZE, 0);
                path.lineTo(width, -ARROW_SIZE + CIRCLE_OFFSET);
                path.lineTo(width, 0);
            } else {
                if (posX > width / 2) {//在图表中间
                    path.lineTo(width / 2 - ARROW_SIZE / 2, 0);
                    path.lineTo(width / 2, -ARROW_SIZE + CIRCLE_OFFSET);
                    path.lineTo(width / 2 + ARROW_SIZE / 2, 0);
                } else {//超过左边界
                    path.lineTo(0, -ARROW_SIZE + CIRCLE_OFFSET);
                    path.lineTo(0 + ARROW_SIZE, 0);
                }
            }
            path.lineTo(0 + width, 0);
            path.lineTo(0 + width, 0 + height);
            path.lineTo(0, 0 + height);
            path.lineTo(0, 0);
            path.offset(posX + offset.x, posY + offset.y);
        } else {//没有超过上边界
            path = new Path();
            path.moveTo(0, 0);
            path.lineTo(0 + width, 0);
            path.lineTo(0 + width, 0 + height);
            if (posX > chart.getWidth() - width) {
                path.lineTo(width, height + ARROW_SIZE - CIRCLE_OFFSET);
                path.lineTo(width - ARROW_SIZE, 0 + height);
                path.lineTo(0, 0 + height);
            } else {
                if (posX > width / 2) {
                    path.lineTo(width / 2 + ARROW_SIZE / 2, 0 + height);
                    path.lineTo(width / 2, height + ARROW_SIZE - CIRCLE_OFFSET);
                    path.lineTo(width / 2 - ARROW_SIZE / 2, 0 + height);
                    path.lineTo(0, 0 + height);
                } else {
                    path.lineTo(0 + ARROW_SIZE, 0 + height);
                    path.lineTo(0, height + ARROW_SIZE - CIRCLE_OFFSET);
                    path.lineTo(0, 0 + height);
                }
            }
            path.lineTo(0, 0);
            path.offset(posX + offset.x, posY + offset.y);
        }

        // translate to the correct position and draw
        canvas.drawPath(path, whitePaint);
        canvas.drawPath(path, paint);
        canvas.translate(posX + offset.x, posY + offset.y);
        draw(canvas);
        canvas.restoreToCount(saveId);
    }

绘制MarkerView分为两部分,一部分是绘制对话框,一部分是绘制传入的R.layout.xx的view。

类似这样

这里有一个问题,就是需要填充对话框白色,并且还要有边框。 一个画笔是不够的,所以这里有两个画笔,一个是填充的,一个是画边框的。 并且,是必须要先绘制对话框的底色,绘制对话框,再绘制传入的view

   Paint paint = new Paint();//绘制边框的画笔
        paint.setStrokeWidth(STOKE_WIDTH);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND);
        paint.setColor(getResources().getColor(ColorUtil.colors[index % ColorUtil.colors.length]));

        Paint whitePaint = new Paint();//绘制底色白色的画笔
        whitePaint.setStyle(Paint.Style.FILL);
        whitePaint.setColor(Color.WHITE);
// 第一步        canvas.drawPath(path, whitePaint); 
// 第二步        canvas.drawPath(path, paint); 
                canvas.translate(posX + offset.x, posY + offset.y); 
// 第三步        draw(canvas);

因为我们的markerView偏移是对于canvas的偏移,但是我们的对话框的path并没有偏移,所以我们也要对path进行同样的偏移处理。很简单,直接获取偏移值,然后偏移就好。

   MPPointF offset = getOffsetForDrawingAtPoint(posX, posY);
  path.offset(posX + offset.x, posY + offset.y);

最后

这样的最终效果就是传入的layout 被对话框包裹在里面了。

箭头的绘制处理也比较简单,就是根据不同的情况来进行绘制就好,看代码吧。

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们