关于绘制简单表格的介绍（横轴日期，纵轴值）

因为项目中用到一个图表，所以自己定义的一个绘制图表的小控件。

下面介绍一下大概的过程吧，如有疑问欢迎指教

先看效果吧



自定义控件那些过程就不多说了直接上代码啊

1.首先就是简单的初始化值，准备画笔什么的了注释还算清楚public linechartview(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}

public linechartview(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public linechartview(Context context) {
super(context);
init();
}

private void init() {
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
textpaint = new Paint(Paint.ANTI_ALIAS_FLAG);
// 虚线笔
hiddenpaint = new Paint(Paint.ANTI_ALIAS_FLAG);
canvas = new Canvas();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);

measuredWidth = getMeasuredWidth();
measuredHeight = getMeasuredHeight();

left = getLeft();
bottom = getBottom();

width = getWidth();
height = getHeight();

initDate();

}

// 赋值
private void initDate() {

centrex = 50;
centrey = height - 50;
xlong = width - 80;
ylong = height - 80;

jianjux = xlong / xnumber.length;
jianjuy = ylong / ynumber;
drawx = xlong / xnumber.length;
// 比例尺
if (maSxy != 0) {

comparingrule = ylong / maSxy;

}
}2.下面是开始绘图了，我的过程是先绘制图表的网格，然后在绘制折线。其中比较重要的是表格的原点位置，和比例尺的情况
绘图方法写的太臃肿了

，这里面其实问题还是有挺多的下面先看代码

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (maSxy != 0) {

scale = maSxy / (float) ynumber;

}
// canvas.drawText("ceshi", centrex + jianjux, centrey - 50, textpaint);

// 画坐标x和y
canvas.drawLine(centrex, centrey, centrex + xlong, centrey, paint);
canvas.drawLine(centrex, centrey, centrex, centrey - ylong, paint);

// 画坐标x的字
for (int i = 0; i < xnumber.length; i++) {
canvas.drawText(xnumber[i] + "", centrex + jianjux - 10,
centrey + 20, textpaint);
if (isGone) {
// 画虚线
Path path = new Path();
path.moveTo(centrex + jianjux, centrey - ylong);
path.lineTo(centrex + jianjux, centrey);
PathEffect effects = new DashPathEffect(new float[] { 1, 2, 4,
8 }, 1);
hiddenpaint.setPathEffect(effects);
hiddenpaint.setStyle(Style.STROKE);
canvas.drawPath(path, hiddenpaint);
}

// canvas.drawLine(getX() + jianjux, getY(), getX() + jianjux,
// getY() - 200, hiddenpaint);
jianjux = jianjux + xlong / xnumber.length;
}
// 画坐标y上的字
for (int i = 0; i < ynumber; i++) {
if (maSxy != 0) {
canvas.drawText(scale + "", centrex - 30,
centrey - jianjuy + 5, textpaint);
scale = scale + maSxy / (float) ynumber;

} else {
canvas.drawText(jianjuy + "", centrex - 30, centrey - jianjuy
+ 5, textpaint);

}
if (isGone) {
// 画虚线
Path path = new Path();
path.moveTo(centrex, centrey - jianjuy);
path.lineTo(centrex + xlong, centrey - jianjuy);
PathEffect effects = new DashPathEffect(new float[] { 1, 2, 4,
8 }, 1);
hiddenpaint.setPathEffect(effects);
hiddenpaint.setStyle(Style.STROKE);
canvas.drawPath(path, hiddenpaint);
}
// canvas.drawLine(getX(), getY() - jianjuy, getX() + 200,getY() -
// jianjuy, hiddenpaint);
jianjuy = jianjuy + ylong / ynumber;
}
// 画网格线

// canvas.save();
// 画折线
// 坐标点的计算

paint.setStrokeWidth(2);
paint.setColor(Color.RED);
if (mListPoint != null && mListPoint.size() > 0) {
for (int i = 1; i < mListPoint.size(); i++) {

// 绘制折点原点

canvas.drawCircle(centrex,
(centrey - mListPoint.get(0).get("key_y")
* comparingrule), 3, paint);

canvas.drawCircle(centrex + drawx * i, (centrey - mListPoint
.get(i).get("key_y") * comparingrule), 3, paint);

// 绘制折线
canvas.drawLine(centrex + drawx * (i - 1),
(centrey - mListPoint.get(i - 1).get("key_y")
* comparingrule), centrex + drawx * i,
(centrey - mListPoint.get(i).get("key_y")
* comparingrule), paint);
Log.i("view", comparingrule + "ssss");

}

}

}这里主要有过程
1)绘制坐标原点

2）绘制横纵坐标线

3）绘制表格

4）绘制折线

可以慢慢看应该可以看懂虽然我代码写的确实不好，各位莫怪啊

3.下面工作就简单了是一些需要的绘图数据的设置了下面看看代码（自己可以根据需求改动），写了简单些。

private Paint paint;
private Paint textpaint;
private Paint hiddenpaint;
private Canvas canvas;
private int measuredWidth;
private int measuredHeight;
private int width;
private int height;
private int left;
private int bottom;
// 点的坐标
private List<Map<String, Float>> mListPoint;

// 远点坐标
private int centrex;
private int centrey;
// x和y轴长度
private int xlong;
private int ylong;
// 横坐标和纵坐标的数组
private int ynumber = 4;
private String[] xnumber = new String[] { "1", "2", "3", "4" };
// 间隔应该根据坐标个数和坐标轴长度来确定
private int jianjux;
private int jianjuy;
// 绘图用间距
private int drawx;
// 是否显示虚线表格
private Boolean isGone = true;

// 坐标值对应在图表中的位置
private float maSxy;
private float scale;
private float comparingrule;

public void setMaSxy(float maSxy) {
this.maSxy = maSxy;
}

// ((mListPoint.get(0).get("key_y")/ynumber.length)/ynumber.length)*ylong;
public void setIsGone(Boolean isGone) {
this.isGone = isGone;
}

public void setXnumber(String[] xnumber) {
if (xnumber == null || xnumber.length == 0) {
return;
}
this.xnumber = xnumber;
}

public void setYnumber(int ynumber) {
if (ynumber == 0) {
return;
}
this.ynumber = ynumber;
}

public void setmListPoint(List<Map<String, Float>> mListPoint) {
this.mListPoint = mListPoint;
}

这个不多说了，一会会在末尾放上源码。
4.如何使用呢？也还是比较简单的下面看看代码，图标的大小位置的话直接在xml中控制了就不贴代码了，这个还是相对简单的，希望各位多多指教了

public class MainActivity extends Activity {

private linechartview findViewById;
private ArrayList<Map<String, Float>> mListPoint;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById = (linechartview) findViewById(R.id.lcv);
initData();

findViewById.setmListPoint(mListPoint);
// findViewById.setIsGone(false);

}

private void initData() {
mListPoint = new ArrayList<Map<String, Float>>();
float[] y = new float[] {1f, 2.5f, 5f,6f, 7.5f, 10f };
for (int i = 0; i < y.length; i++) {
HashMap<String, Float> hashMap = new HashMap<String, Float>();
hashMap.put("key_y", (y[i]));// i*20 +100
mListPoint.add(hashMap);
}

findViewById.setXnumber(new String[] { "12-1", "12-2", "12-3", "12-4","12-5" });
findViewById.setYnumber(4);
findViewById.setMaSxy(10.0f);

}
}
点击打开源码链接