图表绘制的需求在安卓开发中并不少见。常见的有饼图，柱状图，折线图等等。
在这里，我们可以给折线图添加一些色彩。除了线条本身的颜色外，还可以增加一些“花样”——渐变色。填充空余的地方，让图形更美观。
效果参考图
示例工程请见： https://github.com/RustFisher/aboutView
代码实现
我们选择直接继承View类，新建ShadowLineChart.java。
在onSizeChanged中获取到View的宽高等等基本信息。
在onDraw(Canvas canvas)中先绘制背景，然后绘制数据。
背景和坐标设定
显示的上下限设定，横轴设定。坐标原点需要在View中计算。
private int mMaxDataCount = 256; // 横轴显示的最大数据个数
private float mDataMax = 2048;
private float mDataMin = -2048; // 图表显示数据的下限
private float mCoorOriginX; // 坐标原点 x
private float mCoorOriginY; // 坐标原点 y
数据设定和存储
这里使用float，全部存储在float数组中。也可以选用LinkedList之类的数据结构。
private float[] mDataInDraw;
// 初始化
mDataInDraw = new float[mMaxDataCount];
mMaxDataCount是可以自由设定的。
传入数据
数据结构选用了数组，传入新的数据时将旧的数据移动到前面，将新的数据复制到后面。需要判断一下传入数据的个数。
public void inputData(float[] inputData) {
if (null == inputData || inputData.length == 0) {
return;
}
int inputLen = inputData.length;
int maxLen = mDataInDraw.length;
if (inputLen < maxLen) {
// 复制原有数据到前面去
System.arraycopy(mDataInDraw, inputLen, mDataInDraw, 0, maxLen - inputLen);
System.arraycopy(inputData, 0, mDataInDraw, maxLen - inputLen, inputLen);
} else {
System.arraycopy(inputData, inputLen - maxLen, mDataInDraw, 0, maxLen);
}
invalidate();
}
绘制背景和文字
计算出原点坐标后，可以比较容易地画出x和y轴。
绘制坐标轴参数时，需要注意一下居中。
// 先确定字体所在的矩形
mTextTmpRect.set(0, (int) (mCoorOriginY - mTextRectHeight), (int) markTextX, (int) (mCoorOriginY + mTextRectHeight));
// 绘制文字
canvas.drawText("0", markTextX, calTextBaselineY(mTextTmpRect), mTextPaint);
mTextTmpRect.set(0, (int) markY1 - mTextRectHeight, (int) markTextX, (int) markY1 + mTextRectHeight);
canvas.drawText(String.format(Locale.CHINA, "%.0f", mMark1), markTextX, calTextBaselineY(mTextTmpRect), mTextPaint);
mTextTmpRect.set(0, (int) markY2 - mTextRectHeight, (int) markTextX, (int) markY2 + mTextRectHeight);
canvas.drawText(String.format(Locale.CHINA, "%.0f", mMark2), markTextX, calTextBaselineY(mTextTmpRect), mTextPaint);
/**
* @param textRect 让字体显示在这个矩形的正中间
* @return 文字的baseline
*/
private int calTextBaselineY(Rect textRect) {
Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
float top = fontMetrics.top; // 为基线到字体上边框的距离,即上图中的top
float bottom = fontMetrics.bottom; // 为基线到字体下边框的距离,即上图中的bottom
return (int) (textRect.centerY() - top / 2 - bottom / 2);
}
绘制数据
计算出x轴和y轴每个单元格的长度，然后计算出每个数据点的坐标值，用path连起来即可。
float pointX = mCoorOriginX + xStep * i;
float pointY = calDataYCoor(mDataInDraw[i], perDataDy);
// ...
private float calDataYCoor(float dataValue, float perDataDy) {
return mCoorOriginY - dataValue * perDataDy;
}
绘制渐变色
主要使用的是Paint.setShader方法和线性梯度类LinearGradient
shadowPaint.setShader(new LinearGradient(0, calDataYCoor(maxDataValue, perDataDy) + mDataPaint.getStrokeWidth(),
0, mViewHeight, shadowPaint.getColor(), Color.TRANSPARENT, Shader.TileMode.CLAMP));
canvas.drawPath(mShadowPath, shadowPaint);
mShadowPath 连接所有的数据点，并将图标下方区域全部囊括。
自定义属性设定
自定义属性比如线条颜色，粗细，轴的粗细。可以自行添加方法来设定。
例如使用文件attr_shadow_line_chart.xml
