MPAndroidChart 教程：MarkerView（十一）

最新推荐文章于 2024-05-16 07:55:47 发布

锐湃

最新推荐文章于 2024-05-16 07:55:47 发布

阅读量1.5k

点赞数

分类专栏：图形文章标签： p2p 网络协议网络

原文链接：http://www.javashuo.com/article/p-pkofhlyj-ng.html

版权

图形专栏收录该内容

145 篇文章 12 订阅

订阅专栏

时间仓促，不免有错误，有的话但愿你们在评论中指出，谢谢。
源码：范例代码在线查看或下载java

1、什么是MarkerView

首先来看 MarkerView 的效果图：

如上图所示，当点击折线图上的点时，会弹出一个View，这就是 Markerview 。git

上面的左图是一个 TextView 布局和一个椭圆黑色的 background
右图是一个 TextView 布局和一个 bitmap 的 background

那么这具体是如何实现的呢？github

2、MakerView 抽象类

1. 简介

为显示自定义的（弹出的）扩展View而且使得点击的点的值在图表中突出显示，咱们能够建立一个类并继承MakerView 抽象类，而后实现该类的构造方法和继承自 MarkerView 类的抽象方法。

// extend MarkerView
public class YourCustomMarkerView extends MarkerView { ...

MarkerView 类继承自 RelativeLayout 。

2. MarkerView 类源码：

/** * View that can be displayed when selecting values in the chart. * Extend this class to provide custom layouts for your markers. */
public abstract class MarkerView extends RelativeLayout {

    /** * Constructor. Sets up the MarkerView with a custom layout resource. * * @param context * @param layoutResource the layout resource to use for the MarkerView */
    public MarkerView(Context context, int layoutResource) {
        super(context);
        setupLayoutResource(layoutResource);
    }

    /** * Sets the layout resource for a custom MarkerView. * * @param layoutResource */
    private void setupLayoutResource(int layoutResource) {

        View inflated = LayoutInflater.from(getContext())
            .inflate(layoutResource, this);

        inflated.setLayoutParams(
            new LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, 
            RelativeLayout.LayoutParams.WRAP_CONTENT));

        inflated.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED), 
                MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));

        // measure(getWidth(), getHeight());
        inflated.layout(0, 0, inflated.getMeasuredWidth(), 
            inflated.getMeasuredHeight());
    }

    /** * Draws the MarkerView on the given position on the screen * with the given Canvas object. * * @param canvas * @param posx * @param posy */
    public void draw(Canvas canvas, float posx, float posy) {

        // take offsets into consideration
        posx += getXOffset(posx);
        posy += getYOffset(posy);

        // translate to the correct position and draw
        canvas.translate(posx, posy);
        draw(canvas);
        canvas.translate(-posx, -posy);
    }

    /** * This method enables a specified custom MarkerView to * update it's content everytime the MarkerView is redrawn. * * @param e The Entry the MarkerView belongs to. This can * also be any subclass of Entry, like BarEntry or CandleEntry, * simply cast it at runtime. * @param highlight The highlight object contains information * about the highlighted value such as it's dataset-index, the * selected range or stack-index (only stacked bar entries). */
    public abstract void refreshContent(Entry e, Highlight highlight);

    /** * Use this to return the desired offset you wish the MarkerView * to have on the x-axis. By returning -(getWidth() / * 2) you will center the MarkerView horizontally. * * @param xpos the position on the x-axis in pixels where the marker is drawn * @return */
    public abstract int getXOffset(float xpos);

    /** * Use this to return the desired position offset you wish the MarkerView * to have on the y-axis. By returning * -getHeight() you will cause the MarkerView to be above the selected value. * * @param ypos the position on the y-axis in pixels where the marker is drawn * @return */
    public abstract int getYOffset(float ypos);
}

3. 设置/获取 MarkerView 的方法

setMarkerView(MarkerView mv) : 为 chart 设置一个 MarkerView 从而显示选中的值。
getMarkerView() : 获取 chart 已经设置了的 MarkerView ，未设置的话返回 null 。

3、实现步骤

后面你能够找到一个实现自定义 MarkerView 类的例子。重要的是，在这个过程当中要实现如下从 MarkerView 抽象类继承来的方法：canvas

refreshContent(Entry e, Highlight highlight) : 每次 MarkerView 重绘此方法都会被调用，并为您提供更新它显示的内容的机会（例如，为一个 TextView 设置文本，…）。它提供了当前突出显示的 Entry 和相应的Highlight对象以得到更多信息。
getXOffset(float xpos) : 在这里，应返回要绘制的 MarkerView 在x轴的偏移位置。默认状况下，MarkerView 的左上边缘处将绘制在 entry 的位置。在 xpos 参数表示绘制 MarkerView 的默认位置。
getYOffset(float ypos) : 在这里，应返回要绘制的 MarkerView 在y轴的偏移位置。默认状况下，MarkerView 的左上边缘处将绘制在 entry 的位置。在 ypos 参数表示绘制MarkerView 的默认位置。

实现自定义 MarkerView 类的例子：ide

public class CustomMarkerView extends MarkerView {

    private TextView tvContent;

    public CustomMarkerView (Context context, int layoutResource) {
        super(context, layoutResource);
        // this markerview only displays a textview
        tvContent = (TextView) findViewById(R.id.tvContent);
    }

    // callbacks everytime the MarkerView is redrawn, can be used to update the
    // content (user-interface)
    @Override
    public void refreshContent(Entry e, Highlight highlight) {
        tvContent.setText("" + e.getVal()); // set the entry-value as the display text
    }

    @Override
    public int getXOffset(float xpos) {
        // this will center the marker-view horizontally
        return -(getWidth() / 2);
    }

    @Override
    public int getYOffset(float ypos) {
        // this will cause the marker-view to be above the selected value
        return -getHeight();
    }
}

实现自定义的 MarkerView 类后，须要建立一个 .xml 文件来做为 MarkerView 的布局。本实例的布局仅是一个有背景图的且内含一个TextView 的 RelativeLayout ，但 你能够建立任何你想要在这里显示的布局。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="40dp" android:background="@drawable/markerImage" >

    <TextView  android:id="@+id/tvContent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:text="" android:textSize="12dp" android:textColor="@android:color/white" android:ellipsize="end" android:singleLine="true" android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

最后，为图表设置你已经建立了的自定义 MarkerView。建立 MarkerView 时请确保你建立的 .xml 文件提供了对应的 layout 资源。

CustomMarkerView mv = new CustomMarkerView(Context, 
        R.layout.custom_marker_view_layout);

// set the marker to the chart
chart.setMarkerView(mv);

4、随手写的一个样例

1. 动态效果图

2. 主要代码

1) 背景图 bg_marker.xml

<!-- bg_marker.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="@android:color/black"/>
</shape>

2) 布局代码 content_marker_view.xml

<!-- content_marker_view.xml -->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="72dp" android:layout_height="48dp" android:background="@drawable/bg_marker" android:gravity="center" android:orientation="vertical">

    <TextView  android:id="@+id/tv_content_marker_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="4dp" android:textAppearance="?android:attr/textAppearanceSmall" android:textColor="@android:color/white" android:textSize="18sp"/>
</RelativeLayout>

3) 自定义的 MyMarkerView.java

public class MyMarkerView extends MarkerView {
    private TextView mContentTv;

    public MyMarkerView(Context context, int layoutResource) {
        super(context, layoutResource);
        mContentTv = (TextView) findViewById(R.id.tv_content_marker_view);
    }

    @Override
    public void refreshContent(Entry e, Highlight highlight) {
        mContentTv.setText("" + e.getVal());
    }

    @Override
    public int getXOffset(float xpos) {
        return -(getWidth() / 2);
    }

    @Override
    public int getYOffset(float ypos) {
        return -getHeight();
    }
}

4) 为图表设置 MarkerView

// 设置MarkerView
    MarkerView mv = new MyMarkerView(this,R.layout.content_marker_view);
    chart.setMarkerView(mv);

转自：MPAndroidChart 教程：MarkerView（十一） - JavaShuo

锐湃

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
MPAndroidChart 教程：MarkerView（十一）

MPAndroidChart 教程：概述MPAndroidChart 教程：开始 Getting Started（一）MPAndroidChart 教程：与图表进行手势交互 Interaction with the Chart（二）MPAndroidChart 教程：坐标轴，X轴，Y轴，Labels（三）MPAndroidChart 教程：设置数据，设置颜色（四）MPAndroidChart 教程：数据格式器 ValueFormatter（五）MPAndroidChart 教程：图表的具体设置
复制链接

扫一扫