android自定义u形线,Android实战之自定义View折线图

如果你对自定义View还不是很了解，那么这篇文章将从实战的角度带你一步一步的编写出一个符合规范的自定义View。

需求：假设有一个病人，他不定时的将自己的血压值录入到我们的客户端，而我们要做的就是将他近七天所录入的值展示成一张折线趋势图，区分异常和正常值。

以上就是我们的需求，那我们就通过自定义View来实现它：

效果图

我们知道自定义View的时候最重要的方法就是draw()方法，我们在页面上所展示的效果就是通过这个方法来实现的。当然还有onMeasure()方法，这个是对控件进行测量的，可能你会遇到这种情况，当你在xml文件中将其宽度设置为warp_content的时候，你的控件在页面上啥也没有，这是为毛啊？原因就是可能没有在onMeasure()方法里做相应的处理。那么我们先来看看如何处理这个问题：

//测量View的宽高

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);

int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);

int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);

int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);

//如果宽高都是warp_content时，设置控件的宽高的大小

if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) {

setMeasuredDimension(400, 600);

} else if (widthSpecMode == MeasureSpec.AT_MOST) {

setMeasuredDimension(400, heightSpecSize);

} else if (heightSpecMode == MeasureSpec.AT_MOST) {

setMeasuredDimension(widthSpecSize, 600);

}

}

在上面的代码中，先是获取到控件宽和高的MeasureSpec的方式，然后进行判断是否为MeasureSpec.AT_MOST模式，如果是则调用父类中setMeasuredDimension()函数(不了解的话可以看看View的相关源码，测量宽高最后调用的就是这个方法),可以看出我设置默认的宽高分别为400和600。这段代码可能都已经成为模板了，可以直接复制粘贴的。

好了最重要的就是如何来绘制这个这折线图？我们一步一步来，首先我们得绘制一下对这个折线图的说明：

/**

* 绘制图的说明

* @param canvas

*/

private void drawDes(Canvas canvas) {

canvas.drawText(normalText, getPaddingLeft() + getTextWidth(mList.get(0), mTextPaint) * 2, (float) getTextHeight(normalText, mTextPaint) + getPaddingTop(), mTextPaint);

mCirclePaint.setColor(Color.parseColor(normalColor));

canvas.drawCircle(getPaddingLeft() + getTextWidth(mList.get(0), mTextPaint) * 3 + (float) getTextWidth(normalText, mTextPaint) / 2, (float) getTextHeight(normalText, mTextPaint) - r + getPaddingTop(), r, mCirclePaint);

canvas.drawText(unusualText, getPaddingLeft() + getTextWidth(mList.get(0), mTextPaint) * 3 + getTextWidth(normalText, mTextPaint), (float) getTextHeight(normalText, mTextPaint) + getPaddingTop(), mTextPaint);

mCirclePaint.setColor(Color.parseColor(unusualColor));

canvas.drawCircle(getPaddingLeft() + getTextWidth(mList.get(0), mTextPaint) * 3 + (float) getTextWidth(normalText, mTextPaint) * 5 / 2, (float) getTextHeight(normalText, mTextPaint) - r + getPaddingTop(), r, mCirclePaint);

}

这个就是将图中的正常和异常这几个文字和圆点画上去，调用的是绘制文字drawText和绘制圆点drawCircle这两个方法,为了能够支持padding，我们必须将其考虑进去，这里主要就是计算出文字本身宽高，我们可以通过计算出包围文字的最小矩形，从而得到文字的宽高：

/**

* @param text 绘制的文字

* @param paint 画笔

* @return 文字的宽度

*/

public int getTextWidth(String text, Paint paint) {

Rect bounds = new Rect();

paint.getTextBounds(text, 0, text.length(), bounds);

int width = bounds.left + bounds.width();

return width;

}

说明绘制完之后，接着来绘制图的坐标刻度以及横线：

/**

* 绘制坐标轴

* @param canvas

*/

private void drawAxis(Canvas canvas) {

//计算出y轴刻度的间距

float h = (float) ((height - getTextHeight(normalText, mTextPaint) - getTextHeight(mList.get(0), mTextPaint) * 2.0) / mList.size());

for (int i = 0; i < mList.size(); i++) {

canvas.drawText(mList.get(i), (float) getPaddingLeft() + getTextWidth(mList.get(0), mTextPaint) / 2, getTextHeight(normalText, mTextPaint) * 2 + getPaddingTop() + h * i, mTextPaint);

canvas.drawLine(getPaddingLeft() + getTextWidth(mList.get(0), mTextPaint) * 2,

getTextHeight(normalText, mTextPaint) * 2 + getPaddingTop() + h * i - (float) getTextHeight(mList.get(0), mTextPaint) / 4,

getWidth() - getPaddingRight(),

getTextHeight(normalText, mTextPaint) * 2 + getPaddingTop() + h * i - (float) getTextHeight(mList.get(0), mTextPaint) / 4,

mTextPaint);

//Log.e(TAG, "drawXY: xi="+(getPaddingLeft()+getTextWidth(mList.get(0), mTextPaint) * 2));

// Log.e(TAG, "drawXY: yj="+(getTextHeight(normalText, mTextPaint)*2 + getPaddingTop() + h * i - (float) getTextHeight(mList.get(0), mTextPaint) / 4));

if (i == mList.size() - 1) {

float v = (width - (float) getTextHeight(mList.get(0), mTextPaint) * 2) / 7;

// Log.e(TAG, "drawData: w2="+v);

for (int j = 0; j < mDateList.size(); j++) {

canvas.drawLine(getPaddingLeft() + getTextWidth(mList.get(0), mTextPaint) * 2 + v * j,

getTextHeight(normalText, mTextPaint) * 2 + getPaddingTop() + h * i - (float) getTextHeight(mList.get(0), mTextPaint) / 4,

getPaddingLeft() + getTextWidth(mList.get(0), mTextPaint) * 2 + v * j,

getTextHeight(normalText, mTextPaint) * 2 + getPaddingTop() + h * i - (float) getTextHeight(mList.get(0), mTextPaint) / 4 - 5,

mTextPaint);

canvas.drawText(mDateList.get(j).substring(8, 10), getPaddingLeft() + getTextWidth(mList.get(0), mTextPaint) * 2 + v * j + v / 2 - (float) getTextWidth(mDateList.get(0).substring(8, 10), mTextPaint) / 2, (float) getTextHeight(mDateList.get(0), mTextPaint) * 2 + getTextHeight(normalText, mTextPaint) * 2 + getPaddingTop() + h * i, mTextPaint);

}

}

}

}

在这里我先画出y轴上的刻度和横线，然后在将x轴的刻度和数值画上，这里需要我们计算出每根横线之间的间距就是(控件的高度-paddingTop-文字说明的高度-刻度高度/2-paddingBottom-x轴刻度的高度)/横线数量。

坐标轴画完之后，接下来就是画折线了，画折线之前需要把要展示的数据转换成相应的点坐标。首先求出x坐标，因为x轴表示的是时间，那么我们可以利用录入时时间和前七天的时间差来换算出比例从而得出点的x坐标，再来看y坐标，同理我们根据y轴上的最大和最小刻度差和控件的实际高度来换算出y坐标。

求出所有数据相对应的点坐标，接下来就好办了，直接进行绘制。但需要主要一点就是，我们应该先画折线，然后再画圆点，让圆点覆盖在折线上面。如果一起绘制的话，那可能要麻烦些，需要用到勾股定理来得出线段的起点和终点。这里除了可以使用canvas.drawLine方法外，还可以使用canvas.drawPaint();来将点连接起来。

for (int i = 0; i < mPointentities.size() - 1; i++) {

PointEntity pointEntity = mPointentities.get(i);

PointEntity pointEntityNext = mPointentities.get(i + 1);

canvas.drawLine(pointEntity.getX(), pointEntity.getY(), pointEntityNext.getX(), pointEntityNext.getY(), mLinePaint);

}

for (int i = 0; i < mPointentities.size(); i++) {

PointEntity pointEntity = mPointentities.get(i);

Log.e(TAG, "drawData: x="+pointEntity.getX()+" y="+pointEntity.getY() +"maxRisk="+maxRisk+" minRisk="+minRisk);

if (pointEntity.getY() <=maxRisk &&pointEntity.getY() >=minRisk)

mCirclePaint.setColor(Color.parseColor(normalColor));

else

mCirclePaint.setColor(Color.parseColor(unusualColor));

canvas.drawCircle(pointEntity.getX(), pointEntity.getY(), r, mCirclePaint);

}

以上就差不多就是绘制这个View的主要工作流程，刚开始写博客，不知道如何入手，写的有点混乱(勿喷！！！)，完整代码已经上传到gitHub上了。