先来看看效果图
上面的柱状图之前的文章已经讲过了：Android自定义View-柱状图(java) - 掘金 (juejin.cn)
这次我们讲讲下面这个曲线图
分析一波
曲线图包含的元素：
1、左边的纵坐标轴值
2、底部的横坐标轴值
3、中间的坐标轴虚线
4、各位点值连接而成的曲线
5、曲线往下覆盖住的区域
一共包含这五个东西。
看看整体的属性
// 坐标轴上描述性文字的空间大小
private int mBottomTextHeight;
private int mLeftTextWidth, mLeftTextMargin;
private List<WaveConfigData> mWaves;// 数值集合
private int mCoordinateYCount = 6;// y轴的分块数
private String[] mCoordinateXValues;// 外界传入,x轴的值
private float[] mCoordinateYValues;// 动态计算,y轴的值
// 网格尺寸
private int mGridWidth, mGridHeight;
// 所有曲线中所有数据中的最大值
private float mGlobalMaxValue;// 用于确认是否需要调整坐标系
private float mMaxYValue;// 所有数据线里面，最大的Y轴数据
看看数据类：
public static class WaveConfigData {
int color; // 曲线颜色
int linearGradientEndColor; // 区域类型，渐变颜色的endColor
boolean isCoverRegion; // 是否是覆盖区域类型
float[] values; // 点位数值
}
以下是View初始化逻辑：
private void init(Context context, @Nullable AttributeSet attrs) {
// 自定义属性的赋值，具体逻辑看项目源码
......
// 初始化数据集合的容器
mWaves = new ArrayList<>();
// 初始化坐标轴Paint
mCoordinatorPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
mCoordinatorPaint.setColor(coordinatorColor);
mCoordinatorPaint.setStrokeWidth(dp2px(0.5f));
// 初始化文本Paint
mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
mTextPaint.setColor(textColor);
mTextPaint.setTextSize(coordinatorTextSize);
// 初始化曲线Paint
mWrapPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
mWrapPaint.setTextSize(showTextSize);
mWrapPaint.setStrokeWidth(dp2px(2));
mCoordinateDashedPathEffect = new DashPathEffect(new float[]{9, 9}, 5);
mWaveDashedPathEffect = new DashPathEffect(new float[]{20, 10}, 10);
}
首先看下数据创建逻辑
public void addWave(int color, int linearGradientEndColor, int dashStartPoint, boolean isCoverRegion, float... values) {
WaveConfigData waveConfigData = new WaveConfigData(color, linearGradientEndColor, isCoverRegion, values);
waveConfigData.dashStartPoint = dashStartPoint;
mWaves.add(waveConfigData);
// 根据value的值去计算纵坐标的数值
float maxValue = 0;
for (float value : values) {
maxValue = Math.max(maxValue, value);
}
mMaxYValue = Math.max(mMaxYValue, maxValue);
if (maxValue < mGlobalMaxValue) return;
float gridValue = 1;
float tempMaxY = mMaxYValue;
while ((tempMaxY /= 10f) > 1) {
gridValue *= 10;
}
if (tempMaxY >= 0.5)
gridValue *= 2;
mGlobalMaxValue = gridValue * (mCoordinateYCount - 1);
// 给纵坐标的数值赋值
mCoordinateYValues = new float[mCoordinateYCount];
for (int i = 0; i < mCoordinateYCount; i++) {
mCoordinateYValues[i] = i * gridValue;
}
invalidate();
}
在添加曲线或覆盖区域的时候，根据点位数据float[] values计算出最大的纵坐标值maxValue，然后根据maxValue计算出y轴各个点位的具体值mCoordinateYValues。
开始Draw
/**
* 获取X轴位置
*/
private int getXCoordinator() {
return getHeight() - getPaddingBottom() - mBottomTextHeight;
}
/**
* 获取Y轴位置
*/
private int getYCoordinator() {
return getPaddingStart() + mLeftTextWidth + mLeftTextMargin;
}
@Override
protected void onDraw(Canvas canvas) {
drawCoordinate(canvas);
drawWrap(canvas);
drawShowPop(canvas);
}
首先进行绘制坐标系：
我这边做了一个简化操作：y轴到控件左边的间距直接进行写死mLeftTextWidth和mLeftTextMargin，x轴到控件底部的间距直接写死mBottomTextHeight，少算了很多间距问题，但肯定会有情况没有适配到。例如左边y轴值的值很大20000000，就会显示不全，这个后期可以优化成读取文本宽度进行动态调整。
既然已经有mLeftTextWidth、mLeftTextMargin和mBottomTextHeight三个值了，坐标系的位置也很好确认了，开画：
/**
* 绘制坐标系
*/
private void drawCoordinate(Canvas canvas) {
Point start = new Point();
Point stop = new Point();
// 1. 绘制横轴线和纵坐标单位 只绘制坐标轴X轴和实际最大值的横轴线
int xLineCount = mCoordinateYValues.length;
mGridHeight = (getXCoordinator() - getPaddingTop()) / (xLineCount - 1);
float offsetY = CanvasUtil.getDrawTextOffsetY(mTextPaint);
String drawText;
float baseLine, left;
for (int i = 0; i < xLineCount; i++) {
if (i > 0) {
mCoordinatorPaint.setPathEffect(mCoordinateDashedPathEffect);
} else {
mCoordinatorPaint.setPathEffect(null);
}
start.x = getYCoordinator();
start.y = getXCoordinator() - mGridHeight * i;
stop.x = getWidth() - getPaddingEnd();
stop.y = start.y;
// 绘制横轴线
canvas.drawLine(start.x, start.y, stop.x, stop.y, mCoordinatorPaint);
// 绘制纵坐标单位
drawText = String.valueOf((int) mCoordinateYValues[i]);
baseLine = start.y + offsetY;
left = getYCoordinator() - mTextPaint.measureText(drawText) - mLeftTextMargin;
canvas.drawText(drawText, left, baseLine, mTextPaint);
}
// 2. 绘制纵轴线和横坐标单位
int yLineCount = mCoordinateXValues.length;
mGridWidth = (getWidth() - getYCoordinator() - getPaddingEnd()) / (yLineCount - 1);
start.y = getPaddingTop();
stop.y = getXCoordinator();
for (int i = 0; i < yLineCount; i++) {
if (i > 0) {
mCoordinatorPaint.setPathEffect(mCoordinateDashedPathEffect);
} else {
mCoordinatorPaint.setPathEffect(null);
}
start.x = stop.x = getYCoordinator() + mGridWidth * i;
// 绘制纵轴线
canvas.drawLine(start.x, start.y, stop.x, stop.y, mCoordinatorPaint);
// 绘制横坐标单位
drawText = mCoordinateXValues[i];
baseLine = getXCoordinator() + mBottomTextHeight / 2f + offsetY;
left = start.x - mTextPaint.measureText(drawText) / 2;
canvas.drawText(drawText, left, baseLine, mTextPaint);
}
}
接着画曲线：
/**
* 绘制曲线
*/
private void drawWrap(Canvas canvas) {
float yHeight = mGridHeight * (mCoordinateYCount - 1);
float waveMinY, x, y, preX = 0, preY = 0;
Path path = new Path();
boolean hadDrawMaxYLine = false;
float maxY = mCoordinateYValues[mCoordinateYCount - 1];// Y轴坐标的最大值
for (WaveConfigData wave : mWaves) {
waveMinY = Float.MAX_VALUE;
for (int index = 0; index < wave.values.length; index++) {
// 计算点的位置
x = getYCoordinator() + mGridWidth * index;
y = getXCoordinator() - yHeight * (wave.values[index] / maxY);
waveMinY = Math.min(waveMinY, y);
if (index == 0)
path.moveTo(x, y);
else {
float centerX = preX + mGridWidth / 2f;
path.cubicTo(centerX, preY, centerX, y, x, y);//创建三阶贝塞尔曲线
}
preX = x;
preY = y;
if (wave.dashStartPoint >= 0 && wave.dashStartPoint == index && index + 1 < wave.values.length) {
// 需要绘制虚线，则先把之前的实线绘制掉
drawWavePath(wave, canvas, path, waveMinY);
// 切换画笔为虚线
mWrapPaint.setPathEffect(mWaveDashedPathEffect);
path.reset();
path.moveTo(x, y);
}
}
drawWavePath(wave, canvas, path, waveMinY);
path.reset();
}
}
private void drawWavePath(WaveConfigData wave, Canvas canvas, Path path, float waveMinY) {
if (wave.isCoverRegion) { // 如果是覆盖区域，则连上坐标轴的右下角和原点，圈出整个区域
mWrapPaint.setStyle(Paint.Style.FILL);
path.lineTo(getWidth() - getPaddingEnd(), getXCoordinator());
path.lineTo(getYCoordinator(), getXCoordinator());
path.close();
} else {
mWrapPaint.setStyle(Paint.Style.STROKE);
}
if (wave.linearGradientEndColor != 0) { // 如果有渐变颜色endColor，则设置渐变色shader
LinearGradient linearGradient = new LinearGradient(
getYCoordinator() + mGridWidth * wave.values.length / 2f, waveMinY,
getYCoordinator() + mGridWidth * wave.values.length / 2f, getXCoordinator(),
wave.color, wave.linearGradientEndColor, Shader.TileMode.CLAMP);
mWrapPaint.setShader(linearGradient);
} else {
mWrapPaint.setShader(null);
mWrapPaint.setColor(wave.color);
}
canvas.drawPath(path, mWrapPaint);
// 清除虚线的配置
mWrapPaint.setPathEffect(null);
// 清除渐变色的配置
mWrapPaint.setShader(null);
}
添加手势
到此，基本的曲线图展示功能就完成了，接下来，就是完善了。
添加手势，用于查看点位的值，如下：
首先是判断点击的位置在那个范围，判断获取到对应的index位置：
@Override
public boolean onTouchEvent(MotionEvent event) {
if (mWaves.isEmpty()) return super.onTouchEvent(event);
if (event.getAction() == MotionEvent.ACTION_UP) {
// 隐藏信息弹窗
mCurrentShowIndex = -1;
invalidate();
} else {
// 展示信息弹窗
float x = event.getX();
int start, center, end;
int needShowIndex = -1;
for (int i = 0; i < mCoordinateXValues.length; i++) {
center = getYCoordinator() + mGridWidth * i;
if (i == 0) {
start = center;
end = center + mGridWidth / 2;
} else if (i == mCoordinateXValues.length - 1) {
start = center - mGridWidth / 2;
end = center;
} else {
start = center - mGridWidth / 2;
end = center + mGridWidth / 2;
}
if (x >= start && x <= end) {
needShowIndex = i;
break;
}
}
if (needShowIndex >= 0 && needShowIndex != mCurrentShowIndex) {
mCurrentShowIndex = needShowIndex;
invalidate();
}
}
Log.i("WaveView", "currentShowIndex: " + mCurrentShowIndex);
return true;
}
之后进行绘制弹窗：
/**
* 绘制点击展示的数据弹窗
*/
private void drawShowPop(Canvas canvas) {
if (mCurrentShowIndex >= 0 && !mWaves.isEmpty()) {
WaveConfigData wave = mWaves.get(0);
float value = wave.values[mCurrentShowIndex];
float maxY = mCoordinateYValues[mCoordinateYCount - 1];// Y轴坐标的最大值
float yHeight = mGridHeight * (mCoordinateYCount - 1);
float x = getYCoordinator() + mGridWidth * mCurrentShowIndex;
float y = getXCoordinator() - yHeight * (wave.values[mCurrentShowIndex] / maxY);
// 绘制弹窗的圆角矩形
float offsetY = y - mShowCircleRadius + mWrapPaint.getStrokeWidth();
mWrapPaint.setStyle(Paint.Style.FILL);
mWrapPaint.setColor(wave.color);
float triangleSize = 20;
String text = String.format(Locale.getDefault(), "%.02f", value);
float textWidth = mWrapPaint.measureText(text);
float startX = x - mShowPaddingHorizontal - textWidth / 2f;
float startY = offsetY - triangleSize - 2 * mShowPaddingVertical - mWrapPaint.getTextSize();
canvas.drawRoundRect(startX, startY, startX + 2 * mShowPaddingHorizontal + textWidth,
startY + 2 * mShowPaddingVertical + mWrapPaint.getTextSize(), 15, 15, mWrapPaint);
// 连线绘制圆角
Path path = new Path();
path.moveTo(x - triangleSize, offsetY - triangleSize - mWrapPaint.getStrokeWidth() / 2f);
path.lineTo(x + triangleSize, offsetY - triangleSize - mWrapPaint.getStrokeWidth() / 2f);
path.lineTo(x, offsetY);
path.close();
canvas.drawPath(path, mWrapPaint);
// 写中间的字
mWrapPaint.setColor(Color.WHITE);
canvas.drawText(text, startX + mShowPaddingHorizontal,
startY + mShowPaddingVertical + mWrapPaint.getTextSize() / 2f + CanvasUtil.getDrawTextOffsetY(mWrapPaint),
mWrapPaint);
// 先画圆环
mWrapPaint.setStyle(Paint.Style.STROKE);
mWrapPaint.setColor(wave.color);
RectF rectF = new RectF();
rectF.left = x - mShowCircleRadius;
rectF.right = x + mShowCircleRadius;
rectF.top = y - mShowCircleRadius;
rectF.bottom = y + mShowCircleRadius;
canvas.drawArc(rectF, 360, 360, false, mWrapPaint);
// 再画白色圆圈叠加在中间进行遮挡
mWrapPaint.setStyle(Paint.Style.FILL);
mWrapPaint.setColor(Color.WHITE);
canvas.drawCircle(x, y, mShowCircleRadius - mWrapPaint.getStrokeWidth() / 2, mWrapPaint);
}
}
完结撒花
项目源码：Calendar: 周日历、月日历 用于记录展示事件列表 (gitee.com) 首页点击右上角更多按钮，点击查看柱状图就是了哟。
项目里面的ncalendar模块，使用的是GitHub - yannecer/NCalendar: 一款安卓日历，仿miui，钉钉，华为的日历，万年历、365、周日历，月日历，月视图、周视图滑动切换，农历，节气，Andriod Calendar , MIUI Calendar,小米日历
微信搜索“A查佣利小助手”，获取支付宝红包、TB/JD/PDD返利最新优惠资讯
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
