14. MarkerView

优质

小牛编辑

125浏览

2023-12-01

MarkerView

MakerView类能被任何用户创建的类扩展为了展示自定义的（弹窗）View无论何时要在图表中高亮一个值。

设置或者得到marker

setMarkerView(MarkerView mv): 为图表设置一个MarkerView为了展示被选择的值在哪里。
getMarkerView(): 返回在图表中被设置的MarkerView，没有就返回null

自定义实现

下面是一个看上去比较想MarkerView自定义实现的例子。比较重要的是你可以根据以下方法实现它：

refreshContent(Entry e, int dataSetIndex):每次这个方法被调用MarkerView被重新绘制，给你机会来更新它显示的内容（例如为TexView设置文本）
getXOffset():返回标记被绘制位置在x轴上的偏移。默认的，标记将被绘制在条目位置的左上边缘。
getYOffset(): 返回标记被绘制位置在y轴上的偏移。默认的，标记将被绘制在条目位置的左上边缘。

    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, int dataSetIndex) {
            tvContent.setText("" + e.getVal()); // set the entry-value as the display text
        }
        @Override
        public int getXOffset() {
            // this will center the marker-view horizontally
            return -(getWidth() / 2);
        }
        @Override
        public int getYOffset() {
            // this will cause the marker-view to be above the selected value
            return -getHeight();
        }
    }

在设置了自定义的标记类之后，创建一个.xml的布局来呈现你的标记。在这个例子中布局包含一个带背景图片的相对布局还包含一个TextView。当然你可以创建任何你想到的布局在这里。

    <?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:layout_marginTop="7dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            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中。

    CustomMarkerView mv = new CustomMarkerView (Context, R.layout.custom_marker_view_layout);
    // set the marker to the chart
    chart.setMarkerView(mv);