折线图 自定义折线图 自定义view

转载请标明出处：http://blog.csdn.net/u012840567/article/details/54289430

设计到的几个主要方法：

    drawXLine(canvas);
    drawYLine(canvas);

    //网格横线
    drawxxLine(canvas);
    drawyyLine(canvas);

    drawXFont(canvas);
    drawYFont(canvas);

    //大圆   左下角圆形坐标
    drawBcircle(canvas);
    //小圆
    drawScircle(canvas);

    if (speedlist != null){
        //绘制折线
        drawBrokenLine(canvas);

        //折线对应的点
        drawLineBcircle(canvas);

        drawLinescircle(canvas);

        drawChoose(canvas);
    }

绘制xy 横竖线没什么可以说的，主要体现在折线图 和 坐标点对应的值 和事件分发点击事件出来的效果图 (实际上点击出来的效果是事先就有的，只是设置了颜色值看起来好像是没有点击之后重新绘制颜色值就有了)

这里参考过一个大神的事件分发处理的：链接地址http://www.jb51.net/article/97548.htm

主要代码部分：注释掉的部分是之前写死的时候的保留

//绘制折线
private void drawBrokenLine(Canvas canvas){
    Path path = new Path();
//        path.moveTo(xwidth*2,height-2*yheight);// 此点为多边形的起点
//        for (int i = 0; i < 6; i++){
//            path.lineTo(xwidth*(i+3),height-(i+3)*yheight);
//        }

//        int start = getyheight(speedlist.get(0));
//        path.moveTo(xwidth*2, start - yheight);// 此点为多边形的起点
//        for (int i = 0; i < 6; i++){
//            int start2 = getyheight(speedlist.get(i+1));
//            path.lineTo(xwidth*(i+3),start2 - 2*yheight);
//        }

    int start = getyheight(speedlist.get(0).getSpeed());
    path.moveTo(xwidth*2, start);// 此点为多边形的起点
    for (int i = 0; i < 6; i++){
        int start2 = getyheight(speedlist.get(i+1).getSpeed());
        path.lineTo(xwidth*(i+3),start2);
    }
    canvas.drawPath(path,xyPaint);
}

//折线对应的点大圆
private void drawLineBcircle(Canvas canvas) {
    //startx  endx  已经确定   starty endy 计算
    for (int i = 0; i < 7; i++){
        Point point = new Point();
//          int getyheight = getyheight(height - (i + 1) * yheight);
            int getyheight = getyheight(speedlist.get(i).getSpeed());
            if (getyheight == 0){

        }else {
            RectF arcRectF = new RectF(xwidth*(i+2)-bwidth,getyheight-bwidth,xwidth*(i+2)+bwidth,getyheight+bwidth);
            canvas.drawArc(arcRectF,0,360,false,bPaint);
            point.x = xwidth*(i+2);
            point.y = getyheight;
            scorePoints.add(point);
        }
    }
    canvas.save();
}

//折线对应的点小圆
    private void drawLinescircle(Canvas canvas) {
        //startx  endx  已经确定   starty endy 计算
        for (int i = 0; i < 7; i++){
//          int getyheight = getyheight(height - (i + 1) * yheight);
            int getyheight = getyheight(speedlist.get(i).getSpeed());
            if (getyheight == 0){

        }else {
            RectF arcRectF = new RectF(xwidth*(i+2)-swidth,getyheight-swidth,xwidth*(i+2)+swidth,getyheight+swidth);
            canvas.drawArc(arcRectF,0,360,false,sPaint);
        }
    }
    canvas.save();
}

主要的点击涉及到的显示信息图案：

    //折线对应的点小圆
    private void drawLinescircle(Canvas canvas) {
        //startx  endx  已经确定   starty endy 计算
        for (int i = 0; i < 7; i++){
//            int getyheight = getyheight(height - (i + 1) * yheight);
            int getyheight = getyheight(speedlist.get(i).getSpeed());
            if (getyheight == 0){

        }else {
            RectF arcRectF = new RectF(xwidth*(i+2)-swidth,getyheight-swidth,xwidth*(i+2)+swidth,getyheight+swidth);
            canvas.drawArc(arcRectF,0,360,false,sPaint);
        }
    }
    canvas.save();
}


//弹出那个窗口
    private void drawFloatTextBackground(Canvas canvas, int x, int y) {
        brokenPath.reset();
        brokenPaint.setColor(Color.parseColor("#00BBE2"));
        brokenPaint.setStyle(Paint.Style.FILL);

    //P1  箭头开始
    Point point = new Point(x, y);
    brokenPath.moveTo(point.x, point.y);

    //P2 逆时针编辑
    point.x = point.x + dipToPx(5);
    point.y = point.y - dipToPx(5);
    brokenPath.lineTo(point.x, point.y);

    //P3   向右
    point.x = point.x + dipToPx(30);
    brokenPath.lineTo(point.x, point.y);

    //P4  右竖线向上
    point.y = point.y - dipToPx(20);
    brokenPath.lineTo(point.x, point.y);

    //P5 上面横线向左移动60
    point.x = point.x - dipToPx(70);
    brokenPath.lineTo(point.x, point.y);

    //P6 左线向下
    point.y = point.y + dipToPx(20);
    brokenPath.lineTo(point.x, point.y);

    //P7 左下线往箭头平移
    point.x = point.x + dipToPx(30);
    brokenPath.lineTo(point.x, point.y);

    //最后一个点连接到第一个点
    brokenPath.lineTo(x, y);

    canvas.drawPath(brokenPath, brokenPaint);
    canvas.save();

    brokenPath.reset();
    brokenPaint.reset();
    brokenPaint.setColor(Color.parseColor("#088FB6"));
    brokenPaint.setStyle(Paint.Style.FILL);

    Point point2 = new Point(x, y);
    point2.x = point2.x+ dipToPx(35);//右边竖线的起点
    point2.y = point2.y- dipToPx(20);//在下面那个上面
    brokenPath.moveTo(point2.x, point2.y);

    point2.y = point2.y- dipToPx(20);//向上偏移
    brokenPath.lineTo(point2.x, point2.y);

    point2.x = point2.x- dipToPx(70);//上面横线向左移动60 与下面的一直
    brokenPath.lineTo(point2.x, point2.y);

    point2.y = point2.y+ dipToPx(20);//向下偏移
    brokenPath.lineTo(point2.x, point2.y);

    canvas.drawPath(brokenPath, brokenPaint);
}

接下来是事件分发机制的处理点击事件显示了

@Override
    public boolean onTouchEvent(MotionEvent event) {
        this.getParent().requestDisallowInterceptTouchEvent(true);//一旦底层View收到touch的action后调用这个方法那么父层View就不会再调用onInterceptTouchEvent了，也无法截获以后的action

    switch(event.getAction()){
        case MotionEvent.ACTION_DOWN:
            break;
        case MotionEvent.ACTION_MOVE:
            break;
        case MotionEvent.ACTION_UP:
            onActionUpEvent(event);
            this.getParent().requestDisallowInterceptTouchEvent(false);
            break;
        case MotionEvent.ACTION_CANCEL:
            this.getParent().requestDisallowInterceptTouchEvent(false);
            break;
    }
    return true;
}

private void onActionUpEvent(MotionEvent event){
    boolean isValidTouch = validateTouch(event.getX(), event.getY());

    if(isValidTouch){
        invalidate();
    }
}
//是否是有效的触摸范围
private boolean validateTouch(float x, float y){

    //曲线触摸区域
    for(int i = 0; i < scorePoints.size(); i++){
        // dipToPx(8)乘以2为了适当增大触摸面积
        if(x > (scorePoints.get(i).x - dipToPx(8) * 2) && x < (scorePoints.get(i).x + dipToPx(8) * 2)){
            if(y > (scorePoints.get(i).y - dipToPx(8) * 2) && y < (scorePoints.get(i).y + dipToPx(8) * 2)){
                Log.e("===========================================","点击了。。。。。。"+(i+1));
                choose = i;
                return true;
            }
        }
    }
    return false;
}

使用方法： 由于代码中写死了必须传7位数组，没有就传0

for (int i = 0; i < 7; i++){
    MPLinebean mpLinebean = new MPLinebean();
    if(i < 3){
        mpLinebean.setSpeed(30);速度，单位是b/s
        mpLinebean.setTime("1月10日");时间日期
        mpLinebean.setIsmsg(true);//是否可点击消息 为0 的信息不点击
        speedlist.add(mpLinebean);
    }else{
        mpLinebean.setSpeed(0);
        mpLinebean.setTime("");
        mpLinebean.setIsmsg(false);
        speedlist.add(mpLinebean);
    }   
    }
    testspeed_chat.setSpeedlist(speedlist);

下载地址：http://download.csdn.net/detail/u012840567/9732716