今天来撸一个折线图，斜体文本给我整的直难受，当初找了半天就是没有正常能用的， 后来费了半天劲才整明白，哎，画布真是有点搞不懂，不多说，先上图；
image.png
image.png
先来初始化一下
/**
* 初始化画笔
*/
private void initPaint() {
xyPaint = new Paint();
xyPaint.setAntiAlias(true);
xyPaint.setStrokeWidth(mXYLineWidth);
xyPaint.setStrokeCap(Paint.Cap.ROUND);
xyPaint.setColor(mXYLineColor);
xyTextPaint = new Paint();
xyTextPaint.setAntiAlias(true);
xyTextPaint.setTextSize(mXyTextSize);
xyTextPaint.setStrokeCap(Paint.Cap.ROUND);
xyTextPaint.setColor(mXyTextColor);
xyTextPaint.setStyle(Paint.Style.STROKE);
mLinePaint = new Paint();
mLinePaint.setAntiAlias(true);
mLinePaint.setStrokeWidth(mXYLineWidth);
mLinePaint.setStrokeCap(Paint.Cap.ROUND);
mLinePaint.setColor(mLinecolor);
mLinePaint.setStyle(Paint.Style.STROKE);
showPaint = new Paint();
showPaint.setAntiAlias(true);
showPaint.setStrokeWidth(mXYLineWidth);
showPaint.setStrokeCap(Paint.Cap.ROUND);
showPaint.setColor(Color.parseColor("#6f6f6f"));
showPaint.setStyle(Paint.Style.FILL);
showPaint.setTextSize(mXyTextSize);
}
/**
* 初始化自定义属性
*/
private void initView(Context context, AttributeSet attrs) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.brokenLineView);
mXYLineColor = array.getColor(R.styleable.brokenLineView_dbz_xy_line_color, mXYLineColor);
mXYLineWidth = (int) array.getDimension(R.styleable.brokenLineView_dbz_xy_line_width, TypedValue.applyDimension(PLEX_UNIT_PX, mXYLineWidth, getResources().getDisplayMetrics()));
mXyTextColor = array.getColor(R.styleable.brokenLineView_dbz_xy_text_color, mXyTextColor);
mXyTextSize = (int) array.getDimension(R.styleable.brokenLineView_dbz_xy_text_size, TypedValue.applyDimension(PLEX_UNIT_PX, mXyTextSize, getResources().getDisplayMetrics()));
mLinecolor = array.getColor(R.styleable.brokenLineView_dbz_line_color, mLinecolor);
mContentColor = array.getColor(R.styleable.brokenLineView_dbz_content_color, mContentColor);
bgcolor = array.getColor(R.styleable.brokenLineView_dbz_bg_color, bgcolor);
interval = (int) array.getDimension(R.styleable.brokenLineView_dbz_interval, TypedValue.applyDimension(PLEX_UNIT_PX, interval, getResources().getDisplayMetrics()));
array.recycle();
}
初始化一下画笔和自定义的属性 属性文件在文章尾部
测量onLayout()
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
if (changed) {
//得到宽度高度
width = getWidth();
height = getHeight();
int dp2 = dpToPx(2);
int dp3 = dpToPx(3);
xOrigin = mXYLineWidth;//dp2是y轴文本距离左边，以及距离y轴的距离
// 测量X轴月份的高度
xValueRect = getTextBounds("00月00日", xyTextPaint);
xTextHeight = xValueRect.width(); // 因为是垂直显示所以宽度就是高度
// 把宽度分成10 左右各占一个间距 总宽度 - 左右距离和中间的距离 除以10列
interval = (width - ((width / 10) - getPaddingLeft() - getPaddingRight())) / 10;
// 要把底部文本的高度留出来
yOrigin = (height - dp2 - xValueRect.height() - dp3 - mXYLineWidth) - xTextHeight;//dp3是x轴文本距离底边，dp2是x轴文本距离x轴的距离
xInit = interval + xOrigin;
}
super.onLayout(changed, left, top, right, bottom);
}
我的需求就是10天的数据量， 所以我就直接按照10的比例来分类的(如果有需求可以自行修改)
接下来
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(bgcolor);
drawXY(canvas);
drawBrokenLineAndPoint(canvas);
}
/**
* 绘制XY坐标
*
* @param canvas
*/
private void drawXY(Canvas canvas) {
//绘制Y轴线
// canvas.drawLine(xOrigin - xylinewidth / 2, 0, xOrigin - xylinewidth / 2, yOrigin, xyPaint);
// //绘制y轴箭头
// xyPaint.setStyle(Paint.Style.STROKE);
// Path path = new Path();
// path.moveTo(xOrigin - xylinewidth / 2 - dpToPx(5), dpToPx(12));
// path.lineTo(xOrigin - xylinewidth / 2, xylinewidth / 2);
// path.lineTo(xOrigin - xylinewidth / 2 + dpToPx(5), dpToPx(12));
// canvas.drawPath(path, xyPaint);
//绘制y轴刻度
// int yLength = (int) (yOrigin * (1 - 0.1f) / (yValues.size() - 1));//y轴上面空出10%,计算出y轴刻度间距
// for (int i = 0; i < yValues.size(); i++) {
// //绘制Y轴刻度
// canvas.drawLine(xOrigin, yOrigin - yLength * i + xylinewidth / 2, xOrigin, yOrigin - yLength * i + xylinewidth / 2, xyPaint);
// xyTextPaint.setColor(xytextcolor);
// //绘制Y轴文本
// String text = yValues.get(i).value;
// Rect rect = getTextBounds(text, xyTextPaint);
// canvas.drawText(text, 0, text.length(), xOrigin - xylinewidth - dpToPx(2) - rect.width(), yOrigin - yLength * i + rect.height() / 2, xyTextPaint);
// }
//绘制X轴坐标
canvas.drawLine(xOrigin, yOrigin + mXYLineWidth / 2, width, yOrigin + mXYLineWidth / 2, xyPaint);
//绘制x轴箭头
// xyPaint.setStyle(Paint.Style.STROKE);
// path = new Path();
//整个X轴的长度
// float xLength = xInit + interval * (xValues.size() - 1) + (width - xOrigin) * 0.1f;
// if (xLength < width)
// if (xLength > width)
// xLength = width;
// path.moveTo(xLength - dpToPx(12), yOrigin + xylinewidth / 2 - dpToPx(5));
// path.lineTo(xLength - xylinewidth / 2, yOrigin + xylinewidth / 2);
// path.lineTo(xLength - dpToPx(12), yOrigin + xylinewidth / 2 + dpToPx(5));
// path.moveTo(xLength, yOrigin + xylinewidth / 2);
// path.lineTo(xLength, yOrigin + xylinewidth / 2);
// path.lineTo(xLength, yOrigin + xylinewidth / 2);
// canvas.drawPath(path, xyPaint);
//绘制x轴刻度
for (int i = 0; i < xValues.size(); i++) {
float x = xInit + interval * i;
if (x >= xOrigin) {//只绘制从原点开始的区域
xyTextPaint.setColor(mXyTextColor);
canvas.drawLine(x, yOrigin, x, yOrigin, xyPaint);
// 如果是选中的 绘制垂直线
if (i == selectIndex - 1) {
canvas.drawLine(x, yOrigin, x, (float) xValues.get(i).num, xyPaint);
}
//绘制X轴文本
String text = xValues.get(i).value;
Rect rect = getTextBounds(text, xyTextPaint);
//绘制x轴选中文字和框
xyTextPaint.setStyle(Paint.Style.FILL);
float xV = x - rect.width() / 2;
float yV = yOrigin + mXYLineWidth + dpToPx(2) + rect.height();
// 画布旋转80度
canvas.rotate(-80, xV, yV);
canvas.drawText(text, xV - (xTextHeight - xTextHeight / 3), yV + (xTextHeight - xTextHeight / 2), xyTextPaint);
canvas.rotate(80, xV, yV);
// 水平方向显示的 xy 轴
// canvas.drawText(text, 0, text.length(), xV, yV, xyTextPaint);
// } else {
// canvas.drawText(text, 0, text.length(), x - rect.width() / 2, yOrigin + xylinewidth + dpToPx(2) + rect.height(), xyTextPaint);
// }
}
}
}
刻画XY轴， 当初画Y轴就是为了给自己找到一个标准，目前项目不需要， 如果需要的可以放开代码
/**
* 绘制折线和折线点
*/
private void drawBrokenLineAndPoint(Canvas canvas) {
if (xValues.size() <= 0)
return;
//设置显示折线的图层
int layer = canvas.saveLayer(0, 0, width, height, null, Canvas.ALL_SAVE_FLAG);
drawBrokenLine(canvas);
drawBrokenPoint(canvas);
// 将折线超出x轴坐标的部分截取掉
mLinePaint.setStyle(Paint.Style.FILL);
mLinePaint.setColor(bgcolor);
mLinePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
RectF rectF = new RectF(0, 0, xOrigin, height);
canvas.drawRect(rectF, mLinePaint);
mLinePaint.setXfermode(null);
//保存图层
canvas.restoreToCount(layer);
}
/**
* 绘制折线对应的点位圆圈
*/
private void drawBrokenPoint(Canvas canvas) {
float dp3 = dpToPx(3);
float dp5 = dpToPx(5);
//绘制节点对应的原点
for (int i = 0; i < xValues.size(); i++) {
float x = xInit + interval * i;
float y = (float) (yOrigin - yOrigin * (1 - 0.1f) * lineValues.get(i).num / yValues.get(yValues.size() - 1).num);
//绘制折线点
mLinePaint.setStyle(Paint.Style.FILL);
mLinePaint.setColor(Color.WHITE);
canvas.drawCircle(x, y, dp3, mLinePaint);
mLinePaint.setStyle(Paint.Style.STROKE);
mLinePaint.setColor(mLinecolor);
canvas.drawCircle(x, y, dp3, mLinePaint);
//绘制选中的点
if (i == selectIndex - 1) {
mLinePaint.setStyle(Paint.Style.FILL);
mLinePaint.setColor(Color.WHITE);
canvas.drawCircle(x, y, dp5, mLinePaint);
mLinePaint.setColor(mContentColor);
mLinePaint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(x, y, dp5, mLinePaint);
drawFloatTextBox(canvas, x, y - dp5, lineValues.get(i).value);
}
}
}
/**
* 绘制点位信息弹出框
*/
private void drawFloatTextBox(Canvas canvas, float x, float y, String text) {
int dp6 = dpToPx(6);
int dp20 = dpToPx(20);
Path path = new Path();
path.moveTo(x, y);
path.lineTo(x - dp6, y - dp6);
path.lineTo(x - dp20, y - dp6);
path.lineTo(x - dp20, y - dp6 - dp20);
path.lineTo(x + dp20, y - dp6 - dp20);
path.lineTo(x + dp20, y - dp6);
path.lineTo(x + dp6, y - dp6);
path.lineTo(x, y);
showPaint.setStyle(Paint.Style.FILL);
canvas.drawPath(path, showPaint);
//点位信息文字
mLinePaint.setStyle(Paint.Style.FILL);
mLinePaint.setColor(Color.WHITE);
mLinePaint.setTextSize(dpToPx(13));
Rect rect = getTextBounds(text + "", mLinePaint);
canvas.drawText(text + "", x - rect.width() / 2, y - dp6 - (dp20 - rect.height()) / 2, mLinePaint);
}
/**
* 绘制折线
*/
private void drawBrokenLine(Canvas canvas) {
mLinePaint.setStyle(Paint.Style.STROKE);
mLinePaint.setColor(mLinecolor);
//绘制折线
Path path = new Path();
float x = xInit + interval * 0;
float y = (float) (yOrigin - yOrigin * (1 - 0.1f) * lineValues.get(0).num / yValues.get(yValues.size() - 1).num);
path.moveTo(x, y);
for (int i = 1; i < xValues.size(); i++) {
x = xInit + interval * i;
y = (float) (yOrigin - yOrigin * (1 - 0.1f) * lineValues.get(i).num / yValues.get(yValues.size() - 1).num);
if (x < 0) x = 0;
if (y < 0) y = 0;
path.lineTo(x, y);
}
canvas.drawPath(path, mLinePaint);
}
这些就是绘制点与折线，还有信息框提示，接下来就是点击的事件， 如果我想查看某个数据点击就可以查看
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_UP:
clickAction(event);
this.getParent().requestDisallowInterceptTouchEvent(false);
break;
case MotionEvent.ACTION_CANCEL:
this.getParent().requestDisallowInterceptTouchEvent(false);
break;
}
return true;
}
/**
* 点击X轴坐标或者折线节点
*
* @param event
*/
private void clickAction(MotionEvent event) {
int dp8 = dpToPx(8);
float eventX = event.getX();
float eventY = event.getY();
for (int i = 0; i < xValues.size(); i++) {
//节点
float x = xInit + interval * i;
float y = (float) (yOrigin - yOrigin * (1 - 0.1f) * lineValues.get(i).num / yValues.get(yValues.size() - 1).num);
if (eventX >= x - dp8 && eventX <= x + dp8 &&
eventY >= y - dp8 && eventY <= y + dp8 && selectIndex != i + 1) {//每个节点周围8dp都是可点击区域
selectIndex = i + 1;
invalidate();
return;
}
//X轴刻度
String text = xValues.get(i).value;
Rect rect = getTextBounds(text, xyTextPaint);
x = xInit + interval * i;
y = yOrigin + mXYLineWidth + dpToPx(2);
// 因为X轴上的字是80度角， 所以高度即时宽度
if (eventX >= x - rect.height() / 2 - dp8 && eventX <= x + rect.height() + dp8 / 2 &&
eventY >= y - dp8 && eventY <= y + rect.width() + dp8 && selectIndex != i + 1) {
selectIndex = i + 1;
invalidate();
return;
}
// 这个是正常的文本点击事件
// if (eventX >= x - rect.width() / 2 - dp8 && eventX <= x + rect.width() + dp8 / 2 &&
// eventY >= y - dp8 && eventY <= y + rect.height() + dp8 && selectIndex != i + 1) {
// selectIndex = i + 1;
// invalidate();
// return;
// }
}
}
分为点 点击下面的月份点击， 如果不需要注释即可
因为X轴上的字是80度角， 所以高度即时宽度，正常的文本点击事件要把宽高调过来
public void setSelectIndex(int selectIndex) {
this.selectIndex = selectIndex;
invalidate();
}
public void setValue(List lineValues, List xValues, List yValues) {
this.lineValues = lineValues;
this.xValues = xValues;
this.yValues = yValues;
invalidate();
}
剩下的就是设置数据了， 设置点在哪个位置显示
下面来看看使用 先看xml布局
android:id="@+id/lineview"
android:layout_width="match_parent"
android:layout_height="220dp"
app:dbz_bg_color="@android:color/white"
app:dbz_content_color="#17894E"
app:dbz_line_color="#17894E"
app:dbz_xy_line_color="#cccccc"
app:dbz_xy_line_width="1dp"
app:dbz_xy_text_color="#494848"
app:dbz_xy_text_size="13dp" />
activity中的代码
public class MainActivity extends AppCompatActivity {
private List xValues = new ArrayList();
private List yValues = new ArrayList();
private List lineValues = new ArrayList();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mBrokenLineView = findViewById(R.id.lineview);
initView();
}
private void initView() {
/**
* 注意 我这里用的是随机数据， 当用接口返回的数据时 要取最大值设置数据， 但是Y轴也是最高值，
* 这样在显示数据时 Y轴上点位信息数据会向上顶， 也就是说会顶的看不见 ， 所以在绘制的时候，
* Y轴的最大值要比真实的数据要大， 最好在最大值上乘以 百分之二十
* 比如： 最大值是10 10 + 10 * 0.2
*/
//模拟折线数据
for (int i = 1; i <= 10; i++) {
BrokenLineView.XValue xValue = new BrokenLineView.XValue(i, "3月" + i + "号");
xValues.add(xValue);
double value = new BigDecimal(Math.random() * 10).setScale(2, BigDecimal.ROUND_HALF_UP).doubleValue();
BrokenLineView.LineValue lineValue = new BrokenLineView.LineValue(value, value + "");
lineValues.add(lineValue);
}
for (int i = 0; i <= 12; i++) {
BrokenLineView.YValue yValue = new BrokenLineView.YValue(i, i + "");
yValues.add(yValue);
}
mBrokenLineView.setValue(lineValues, xValues, yValues);
}
}
下面是自定义的属性文件
在values文件夹下面建一个attrs.xml
