自定义view—折线图.docVIP

自定义view—折线图 绘制折线图预览图 绘制这个折线图需要都需要哪些步骤？ 一、如何绘制X和Y轴。 注意：绘制线用到的是path，而绘制X和Y轴，我们需要知道三个坐标，这里我们用的是 canvas.drawPath(mPath,linePaint); 1、我们来分析下，我们想知道三个坐标，那么这三个坐标是多少呢，我们该怎么计算呢？ 答：这里，我是在onSizeChanged（）方法中获取到了父类控件的宽度，然后把宽度分成16份，例如，下方的上下左右四个分别如下: lift = viewSize*(1/16f); top = viewSize*(1/16f); right = viewSize*(15/16f); buttom = viewSize*(8/16f); 2、这三个坐标我们有了，那就好办了，我们根据这四个参数值，就可以知道我们上面三个坐标点的坐标，在draw()方法中，连接这三个点即可： private void drawXY(Canvas canvas) { /* * 第三步，我们来通过viewSize尺寸来获取三个坐标点 * 第一个（X,Y）--(lift,top) * 第二个（X,Y）--(lift,button) * 第三个个（X,Y）--(right,buttom) * */ mPath.moveTo(lift, top); mPath.lineTo(lift, buttom); mPath.lineTo(right,buttom); //使用Path链接这三个坐标 canvas.drawPath(mPath,linePaint); // 释放画布 canvas.restore(); } 3、我们最后，在X，Y轴写个文字，那么我们需要知道X，Y这两个文字的坐标是多少？如图： 答：因为我们已经知道lift，right，top， buttom。其实我们就可计算出来他们的坐标了。其实Y轴的坐标只是向右移动一点即可(lift+num,top)，x的坐标向下移动一点即可（right,top+num）,其中num是你移动多少。自己可以合理调试 private void drawXYelement(Canvas canvas) { // 锁定画布 canvas.save(); mTextPaint.setTextSize(36);//文字大小 /* * Y轴文字提示 * drawText(String ,x,y,TextPaint) * (lift,top) * */ mTextPaint.setTextAlign(Paint.Align.LEFT);//左对齐 canvas.drawText(Y,lift+20,top,mTextPaint); /* * X轴文字提示 * drawText(String ,right,buttom,TextPaint) * */ mTextPaint.setTextAlign(Paint.Align.RIGHT);//右对齐 canvas.drawText(X,right,buttom+50,mTextPaint); // 释放画布 canvas.restore(); } 我们在main的xml引用此类 .polylinedemo.XYView01 android:id=@+id/My_XYView04 android:layout_width=wrap_content android:layout_height=500dp android:background=#8B7500 / 编译一下效果： 4、附上全部代码 package .polylinedemo; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import