說到在Android中畫圖，相信大家對MPAndroidChart不陌生，其功能強大，能畫出各種各樣非常絢麗的效果圖。但是近期公司的項目要求在markerview上添加一些按鈕，能夠直接在markerview上操作按鈕來直接對圖上的point進行操控。然後在lib裏找了半天，發現原生根本就不支持此功能，然後在其github MPAndroidChart的issue裏查找相關問題，發現還真是有很多人提出了這個問題，讓作者解決這個問題，但是這個問題一直沒有得到很好的解決，記得作者在issue裏回答說”it is harder than what I thought…”，然後就沒有然後了。我直接懵逼…
但是，硬着頭皮也要上，自己override各種方法來嘗試，均爲成功，差點沒有崩潰！最後，在issue裏發現了一個對我很有啓發的方式，這裏謝謝這個哥們兒！
https://github.com/PhilJay/MPAndroidChart/issues/2482
不過這種方式需要改源碼，不能讓你使用如下方式來集成進項目
compile ‘com.github.PhilJay:MPAndroidChart:v3.0.0-beta1’
所以，要解決這個問題，首先必須把MPAndroidChart從github上download下來，以compile library的方式來使用。
另外，這個只解決了，是否點擊了markerview，如果點擊了的話，相應其點擊事件。如果此時，需要更爲精確的控制，比如最開始提出的在markerview裏添加一些按鈕，對這些按鈕來響應不同的點擊事件，該怎麼辦呢？我這裏已經實現了！在這裏把它分享出來，相信對有需要的朋友有所幫助！
- 在BarLineChartBase裏修改一下onTouchEvent方法，如下:
@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
if (mChartTouchListener == null || mData == null)
return false;
//這裏是新添加的判斷，讓markerView有機會相應點擊事件！
if(mMarker !=null && MotionEvent.ACTION_UP == event.getAction() && mMarker.isTouch(event)){
mMarker.markViewClick();
return true;
}
// check if touch gestures are enabled
if (!mTouchEnabled)
return false;
else
return mChartTouchListener.onTouch(this, event);
}- 在IMarker裏添加如下方法
boolean isTouch(MotionEvent event);
void markViewClick();- 在MarkerView裏修改draw方法，實現isTouch，markViewClick方法，另外添加2個屬性用來記錄點擊point在markerview裏的相對位置
/**
* relativeTouchPointX, relativeTouchPointY 是 touch 的點相對於 markerView 的 left, top 的座標
*/
private float relativeTouchPointX = 0;
private float relativeTouchPointY = 0;
public float getRelativeTouchPointX() {
return relativeTouchPointX;
}
public void setRelativeTouchPointX(float relativeTouchPointX) {
this.relativeTouchPointX = relativeTouchPointX;
}
public float getRelativeTouchPointY() {
return relativeTouchPointY;
}
public void setRelativeTouchPointY(float relativeTouchPointY) {
this.relativeTouchPointY = relativeTouchPointY;
}
......
/**
*
* @param canvas
* @param posX 畫圖的point X值
* @param posY 畫圖的point Y值
*/
@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);
mpPointF.x = posX;
mpPointF.y = posY;
}
@Override
public boolean isTouch(MotionEvent event) {
if(mpPointF.x == 0)
return false;
float left = mpPointF.x - getWidth() / 2;
float top = mpPointF.y - getHeight();
float right = mpPointF.x + getWidth() / 2;
float bottom = mpPointF.y;
boolean touchInMarkerView = new RectF(left, top, right, bottom).contains(event.getX(), event.getY());
if(touchInMarkerView){
setRelativeTouchPointX(event.getX() - left);
setRelativeTouchPointY(event.getY() - top);
}
mpPointF.x = 0;
mpPointF.y = 0;
return touchInMarkerView;
}
@Override
public void markViewClick() {
}- 在自己的markerview實現類裏，得到不同按鈕的在markerview的相對位置，override getOffset方法，最後就可以override markViewClick方法，在裏面精確的控制點擊區域，來控制不同的點擊事件了！
public class DemoMarkerView extends MarkerView{
private Context context;
private TextView tv;
private Button minusBtn;
private Button addBtn;
private float minusBtnLeft, minusBtnTop, minusBtnRight, minusBtnBottom;
private float addBtnLeft, addBtnTop, addBtnRight, addBtnBottom;
public DemoMarkerView(Context context, int layoutResource) {
super(context, layoutResource);
this.context = context;
tv = (TextView) findViewById(R.id.tv);
minusBtn = (Button) findViewById(R.id.minus);
addBtn = (Button) findViewById(R.id.add);
}
@Override
public void refreshContent(Entry e, Highlight highlight) {
super.refreshContent(e, highlight);
tv.setText("x = " + e.getX() + ", y = " + e.getY());
minusBtnLeft = minusBtn.getLeft();
minusBtnTop = minusBtn.getTop();
minusBtnRight = minusBtn.getRight();
minusBtnBottom = minusBtn.getBottom();
addBtnLeft = addBtn.getLeft();
addBtnTop = addBtn.getTop();
addBtnRight = addBtn.getRight();
addBtnBottom = addBtn.getBottom();
Log.e("Demo", "minusBtn: left = " + minusBtn.getLeft() + ", top = " + minusBtn.getTop() + ", right = " + minusBtn.getRight() + ", bottom = " + minusBtn.getBottom());
}
@Override
public MPPointF getOffset() {
MPPointF mpPointF = new MPPointF();
mpPointF.x = - getWidth() / 2;
mpPointF.y = - getHeight();
return mpPointF;
}
@Override
public void markViewClick() {
Log.e("Demo", "onClick relativeTouchPointX = " + getRelativeTouchPointX() + ", relativeTouchPointY = " + getRelativeTouchPointY());
float x = getRelativeTouchPointX();
float y = getRelativeTouchPointY();
/**
* 最終的核心思想就是利用點擊point在markerview中的相對位置，是否被包含在了對應的button區域內。因爲此時button的(l,t,r,b)也是相對於markerviwe的座標，這樣2者在同一個座標系中，是可以判斷的。從而實現了點擊不同的區域，就相當於點擊不同的按鈕事件!
**/
if(new RectF(minusBtnLeft, minusBtnTop, minusBtnRight, minusBtnBottom).contains(x, y))
Toast.makeText(context, "onClick minusButton!", Toast.LENGTH_SHORT).show();
else if(new RectF(addBtnLeft, addBtnTop, addBtnRight, addBtnBottom).contains(x, y))
Toast.makeText(context, "onClick addButton!", Toast.LENGTH_SHORT).show();
else
Toast.makeText(context, "onClick markerView!", Toast.LENGTH_SHORT).show();
}
}
其中，markerview的layout.xml內容如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@color/colorPrimary"
android:orientation="vertical"
android:layout_width="150dp"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tv"
android:textColor="@android:color/white"
android:textSize="16sp"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content" />
<Button
android:id="@+id/minus"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="-"/>
<Button
android:id="@+id/add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="+"/>
</LinearLayout>很簡單，只有一個textview，和2個按鈕，點擊minus和add按鈕toast不同的內容。
大家可以直接去github上下載我給出的demo：
https://github.com/AndrewXiao/MarkerViewClickDemo
如果還有什麼不清楚的，歡迎留言！