自定义View，滑动标注线动态显示数据

由于项目需要，要实现这种效果的曲线图，以下是为标注的图形题材

这里写图片描述

当滑动标注线的位置的时候动态的显示Y轴的数据。
在这里我们先不介绍使用自定义View绘制曲线图，由于项目的实际需要，使用第三方绘制曲线图的图表库如：AChartEngine、XCL-Chart、MPAndroidChart、andbase开源框架库都已经不太满足实际项目的需求。
不过在andbase 这个开源框架库中可以实现这种效果：

这里写图片描述

存在一定的缺陷，因为时间的原因没有更多的了解当中的 Librarys 而是直接引用了jar (亲！尽量还是在了解当中的库之后再引用其jar文件)
所以能否将其实现，还未可知！

还是介绍时候 ChartView extends View 当中的一些简单实现吧！因为“标注线”要随手指的Move 显示曲线连点的的Y轴数据所以我们的拿到移动的X轴的距离或者是移动的Y轴距离。定义一个mPonits[Count] 数组容器将X轴各个点的距离存储到该数组当中！因为当我们移动标注线的位置是，会得到相应的X、Y轴坐标点的位置。

具体的思路实现就是以上的逻辑，在这里就贴出部分的代码：首先我们的监听手势事件重写 OnTouchEvnent(MotionEvent event)

    private boolean isTouched;// 是否触发点击事件
    private long firstClickTime = 0;  
    private long secondClickTime = 0;  
    private float moveDistance = 300; // 设置默认的移动距离


    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
        case MotionEvent.ACTION_DOWN:
            isTouched = true;
            if(secondClickTime - firstClickTime < 1000) {  
                firstClickTime = 0;  
                secondClickTime = 0;  
            } 

            Log.i("wangly", "action-down");  
            if(event.getX() >=(moveDistance-30) && event.getX() <= (moveDistance+30)) {  
                isTouched = true;  
                invalidate();  
            } 

            break;
        case MotionEvent.ACTION_MOVE:
            Log.i("wangly", "action-move");
            if(isTouched){
                /**
                 * 在这里我记录的是 X轴坐标，同理你也可以定义Y轴坐标 event.getY(); 
                 * */
                moveDistance = event.getX();//将此时手势x坐标记录下来, 根据此x重绘中间线、  

                for (int i = 0; i < mPonits.length; i++) {
                    if(mPonits[i] == moveDistance){
                        Toast.makeText(mContext,"日期"+xRawDatas.get(i)+"--为"+yRawData.get(i), 0).show();
                    }

                }
                isTouched = true;
                invalidate();  
            }

            break;
        case MotionEvent.ACTION_UP:
            if(isTouched) {  
                moveDistance = event.getX();//记录当下移动位置坐标  
                isTouched = false;  
                invalidate();  
            }  
            break;

            return true;
        }
        return true;
    }

在OnDraw(Canvas canvas) 方法中将X轴各个点的坐标存储到mPonits[Count] 数组当中，

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        width = getWidth();
        width = width - 2 * mInnerCicleRadius - leftoffset;
        // 计算出x轴的单位距离
        mDistance = (width - mYTitleWitdh) / (mYLineCount - 1);
        int height = getHeight();
        int scrollX = getScrollX();
        float orgStroke = mPaint.getStrokeWidth();
        float orgStrokeCicle = mOuterCiclePaint.getStrokeWidth();
        // y轴的真实距离
        yDistance = height - mXAnixValueHight - mContentMarginTop;
        float yLen = yDistance / totalnum;
        if (mYanixValues != null && mYanixValues.size() != 0) {
            // 将yDistance变成y轴上的单位距离
            yDistance = yDistance / (mYanixValues.size() - 1);
        }

        // 绘制节点圆
        mOuterCiclePaint.setColor(mOuterCicleColor);
        mOuterCiclePaint.setStyle(Style.FILL);
        mOuterCiclePaint.setStrokeWidth(mTrendLineSize);
        mInnerCiclePaint.setStrokeWidth(mTrendLineSize);
        for (int i = startPosition; i < endPosition; i++) {
            int startX = mDistance * i + leftoffset - offset;
            int startY = (int) (height - (yLen * mDate.get(i) + mXAnixValueHight));

            canvas.drawCircle(startX, startY, mInnerCicleRadius,
                    mInnerCiclePaint);
            // 超过10000万的画空心圆
            if (mDate.get(i) >= standardnum) {
                canvas.drawCircle(startX, startY, mOuerCicleRadius,
                        mOuterCiclePaint);
            }

            mPoints[i] = startX;

        }