自定义view之向左自动移动的折线图

attr：

<declare-styleable name="MyEcgView">
    <attr name="ecg_lin_color" format="color" />
    <attr name="ecg_color" format="color" />
</declare-styleable>

代码：

public class MyEcgView extends View {

    // 画线   画图
    private Paint linPaint, ecgPaint;
    private Path ecgPath;

    private int linColor, ecgColor;
    //view 宽 高
    private int viewWidth, viewHeight;
    //小网格的宽度            分的份数
    protected int sGridWidth, sGridNum = 30;

    private List<Integer> listData;


    public MyEcgView(Context context) {
        this(context, null);
    }

    public MyEcgView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyEcgView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    @SuppressLint("NewApi")
    public MyEcgView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);

        TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyEcgView, defStyleAttr, defStyleRes);
        linColor = ta.getColor(R.styleable.MyEcgView_ecg_lin_color, context.getResources().getColor(R.color.colorPrimary));
        ecgColor = ta.getColor(R.styleable.MyEcgView_ecg_color, context.getResources().getColor(R.color.colorAccent));

        setWillNotDraw(false);

        ecgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        ecgPaint.setAntiAlias(true);
        ecgPaint.setStyle(Paint.Style.STROKE);
        ecgPaint.setColor(ecgColor);
        ecgPaint.setStrokeWidth(2f);
        ecgPath = new Path();

        listData = new ArrayList<>();
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

        viewWidth = getWidth();
        viewHeight = getHeight();

        sGridWidth = viewHeight / sGridNum;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //画网格
        drawGird(canvas);
        //画折线
        drawEcg(canvas);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
    }

    private void drawGird(Canvas canvas) {
        //大网格
        int wNum = viewWidth / sGridWidth;   //竖线
        int hNum = viewHeight / sGridWidth;  //横线
        for (int i = 1; i < wNum + 1; i++) {
            initLinPaint();
            Path path = new Path();
            path.reset();
            path.moveTo(i * sGridWidth, 0);
            path.lineTo(i * sGridWidth, viewHeight);
            if (i % 5 != 0) {
                PathEffect effect = new DashPathEffect(new float[]{1, 5}, 1);
                linPaint.setPathEffect(effect);
            }
            canvas.drawPath(path, linPaint);
//            canvas.drawLine(i * sGridWidth, 0, i * sGridWidth, viewHeight, linPaint);
        }
        for (int i = 1; i < hNum + 1; i++) {
            initLinPaint();
            Path path = new Path();
            path.moveTo(0, i * sGridWidth);
            path.lineTo(viewWidth, i * sGridWidth);
            if (i % 5 != 0) {
                PathEffect effect = new DashPathEffect(new float[]{1, 5}, 1);
                linPaint.setPathEffect(effect);
            }
            canvas.drawPath(path, linPaint);
//            canvas.drawLine(0, i * sGridWidth, viewWidth, i * sGridWidth, linPaint);
        }

    }

    int gap_x = 30;
    private void drawEcg(Canvas canvas) {
        ecgPath.reset();
        if (listData.size() > 0) {
            for (int i = 0; true; i++) {
                ecgPath.moveTo(i * gap_x, listData.get(i));
                break;
            }
            for (int i = 0; i < listData.size(); i++) {
                ecgPath.lineTo(i * gap_x, listData.get(i));
            }

//            canvas.drawLine(listData.size() * gap_x - 10, viewHeight / 2, viewWidth, viewHeight / 2, ecgPaint);
            ecgPath.moveTo(listData.size() * gap_x - 10, viewHeight / 2);
            ecgPath.lineTo(viewWidth, viewHeight / 2);

            canvas.drawPath(ecgPath, ecgPaint);
        } else {
            ecgPath.moveTo(0, viewHeight / 2);
            ecgPath.lineTo(viewWidth, viewHeight / 2);
            canvas.drawPath(ecgPath, ecgPaint);
        }

        if (listData.size() > viewWidth / gap_x - 10) {
            listData.remove(0);
        }

    }

    private void initLinPaint() {
        linPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        linPaint.setAntiAlias(true);
        linPaint.setStyle(Paint.Style.STROKE);
        linPaint.setColor(linColor);
        linPaint.setStrokeWidth(1f);
    }

    public void addata(int i) {
        listData.add(viewHeight / 2 + i - 100);
        postInvalidate();
    }

}