看图
样例代码
layout.xml
<com.XXXXX.utils.GraphBendLine
android:id="@+id/ghost_view"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="40dp"
app:node_bar_line_color="#F9FEFD"
app:node_bar_line_dan_color="#BAEFE6"
app:node_color="#D7F5F0"
app:node_line_color="#8BE4D4" />
attr.xml
<declare-styleable name="nodeLine">
<!--节点默认颜色-->
<attr name="node_color" format="color" />
<!--曲线颜色-->
<attr name="node_bar_line_color" format="color" />
<!--曲线颜色浅色-->
<attr name="node_bar_line_dan_color" format="color" />
<!--进度条默认颜色-->
<attr name="node_line_color" format="color" />
</declare-styleable>
activity
GraphBendLine mLine = (GraphBendLine) findViewById(R.id.ghost_view);
timeList.add(80f);
timeList.add(0f);
timeList.add(50f);
timeList.add(20f);
timeList.add(60f);
timeList.add(20f);
timeList.add(90f);
dataList.add("3.15");
dataList.add("3.16");
dataList.add("3.17");
dataList.add("3.18");
dataList.add("3.19");
dataList.add("3.20");
dataList.add("3.21");
mLine.updateTime(timeList, dataList);
画布类
public class GraphBendLine extends View {
private float sumHeight;//总控件的高度
private float sumWidth;//总空间的宽度
private float maxY;//y轴最大值
private float minY;//y轴最小值
private float centerY;//y轴中间值
private String unitY;//y轴值单位
private float maxTime;//最大的时间 用来划分单位的 最小就是20 X1.2是为了给上方和下方预留空间
private Paint linePaint;//线的画笔
private Paint shadowPaint;//阴影的画笔
private Paint mPaint;//曲线画笔
private Paint circlePaint;//圆点画笔
private Paint circlePaint2;//圆点画笔
private Paint scorePaint;
private Paint textPaint;//文字的画笔
private ArrayList<Float> dataList;//监测值
private ArrayList<String> timeList;//底部的时间
private float oneHeight; //每一个小段所要分成的高
private float oneWidth;//每一个小段所要分成的宽
private float buttomHeiht; //给底部一排日期预留出的时间
private Path baseLinePath;//折线路径
private float smoothness = 0.36f; //折线的弯曲率
private Paint baseShadow;//折线下的阴影的画笔
private String lineColor = "#CBF2ED";//节点默认颜色 "#17CAAA"
private String barLineColor = "#BAEFE6";//曲线覆盖区颜色
private String barLineDanColor = "#D7F5F0";//曲线覆盖区浅颜色颜色 "#F9FEFD"
private String nodeColor = "#8BE4D4";//节点默认颜色
private ArrayList<PointF> xyList;//储存定好的坐标点的集合
public GraphBendLine(Context context) {
super(context);
initPaint();
}
public GraphBendLine(Context context, AttributeSet attrs) {
super(context, attrs);
// mContext = context;
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.nodeLine);
lineColor = ta.getString(R.styleable.nodeLine_node_line_color);
nodeColor = ta.getString(R.styleable.nodeLine_node_color);
barLineColor = ta.getString(R.styleable.nodeLine_node_bar_line_color);
barLineDanColor = ta.getString(R.styleable.nodeLine_node_bar_line_dan_color);
ta.recycle();
initPaint();
}
/**
* 初始化画笔
*
* @linpaint 线条画笔
* @shadowPaint 阴影画笔
*/
private void initPaint() {
//画线的画笔
linePaint = new Paint();
linePaint.setColor(Color.parseColor("#333333"));
linePaint.setAntiAlias(true);
linePaint.setTextSize(dp2px(getContext(), 9));
linePaint.setStrokeWidth(dp2px(getContext(), 1));
//画背景的画笔
shadowPaint = new Paint();
shadowPaint.setColor(Color.parseColor(lineColor));
shadowPaint.setAntiAlias(true);
//画最下方文字的画笔
textPaint = new Paint();
textPaint.setColor(Color.parseColor("#333333"));
textPaint.setAntiAlias(true);
textPaint.setTextSize(dp2px(getContext(), 8));
circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
circlePaint.setColor(Color.WHITE);
circlePaint.setStrokeWidth(dp2px(getContext(), 2));
circlePaint.setStyle(Paint.Style.STROKE);
circlePaint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
circlePaint2.setColor(Color.parseColor(lineColor));
circlePaint2.setStyle(Paint.Style.FILL);
baseShadow = new Paint();
baseShadow.setAntiAlias(true);
baseShadow.setColor((Color.WHITE & 0x40FFFFFF) | 0x10000000);
baseShadow.setStyle(Paint.Style.FILL);
buttomHeiht = dp2px(35);//线距离底部高度
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.parseColor(lineColor));
mPaint.setStrokeWidth(dp2px(getContext(), 2));
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeCap(Paint.Cap.ROUND);
scorePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
scorePaint.setStyle(Paint.Style.STROKE);
scorePaint.setStrokeCap(Paint.Cap.ROUND);
scorePaint.setColor(Color.parseColor("#DDDDDD"));
scorePaint.setStrokeWidth(dp2px(0.5f));
baseLinePath = new Path();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
sumHeight = getMeasuredHeight();
sumWidth = getMeasuredWidth();
}
private void measure() {
maxTime = maxY;//最大为300
for (int i = 0; i < dataList.size(); i++) {
if (maxTime <= dataList.get(i)) {
maxTime = dataList.get(i);
}
}
if (maxTime < 20) {
maxTime = 20;
}
String text = "V";
Rect rect = new Rect();
textPaint.getTextBounds(text, 0, text.length(), rect);
oneHeight = ((sumHeight - buttomHeiht - 2 * rect.height()) / maxTime);
oneWidth = sumWidth / 28;
}
/**
* 设置最大最小值
*/
public void setMaxMin(float max, float min, float center, String unit) {
this.maxY = max;
this.minY = min;
this.centerY = center;
this.unitY = unit;
}
/**
* 更新阅读时间
*/
public void updateTime(ArrayList<Float> timeList, ArrayList<String> bottomList) {
this.dataList = timeList;
this.timeList = bottomList;
if (this.dataList != null && this.dataList.size() > 0 && timeList != null && timeList.size() > 0) {
invalidate();
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (dataList == null || timeList == null) return;
maxTime = getMaxTime(dataList);
measure();
toGetXy();//获取x和y的坐标
toDrawLine(canvas);
}
private void toGetXy() {
int leftWidth = dp2px(13);//距离右边宽度
xyList = new ArrayList<>();
for (int i = 0; i < dataList.size(); i++) {
float x = oneWidth + i * 4 * oneWidth;
float time = dataList.get(i);//每点时间
float y = (sumHeight - (oneHeight * time));
xyList.add(new PointF(x + leftWidth, y - buttomHeiht));
}
}
/**
* 画线
*/
private void toDrawLine(Canvas canvas) {
if (xyList == null || xyList.size() == 0) {
return;
}
List<PointF> NewPoints = new ArrayList<>();
NewPoints.addAll(xyList);
float lX = 0;
float lY = 0;
baseLinePath.reset();
baseLinePath.moveTo(NewPoints.get(0).x, NewPoints.get(0).y);
for (int i = 1; i < NewPoints.size(); i++) {
PointF p = NewPoints.get(i);
PointF firstPointF = NewPoints.get(i - 1);
float x1 = firstPointF.x + lX;
float y1 = firstPointF.y + lY;
PointF secondPointF = NewPoints.get(i + 1 < NewPoints.size() ? i + 1 : i);
lX = (secondPointF.x - firstPointF.x) / 2 * smoothness;
lY = (secondPointF.y - firstPointF.y) / 2 * smoothness;
float x2 = p.x - lX;
float y2 = p.y - lY;
if (y1 == p.y) {
y2 = y1;
}
baseLinePath.cubicTo(x1, y1, x2, y2, p.x, p.y);
}
canvas.drawPath(baseLinePath, mPaint);
if (timeList.size() > 1) {
for (int i = 0; i < timeList.size(); i++) {
float x = NewPoints.get(i).x;
float y = NewPoints.get(i).y;
float time = dataList.get(i);
String mThumbText = String.valueOf(time);
Rect rect = new Rect();
linePaint.getTextBounds(mThumbText, 0, mThumbText.length(), rect);
canvas.drawText(mThumbText, x - rect.width() / 2, y - dp2px(6), linePaint);//画最上面字体
canvas.drawCircle(x, y, dp2px(3), circlePaint);
canvas.drawCircle(x, y, dp2px(2), circlePaint2);
Rect rectf = new Rect();
textPaint.getTextBounds(timeList.get(i), 0, timeList.get(i).length(), rectf);
canvas.drawText(timeList.get(i), x - rectf.width() / 2, sumHeight - dp2px(2), textPaint);//画最下方的字体
}
drawArea(canvas, NewPoints);
}
drawBottomLine(canvas);
drawLine(canvas);
}
/**
* 分割线
*
* @param canvas
*/
private void drawLine(Canvas canvas) {
//
String text = minY + "";
Rect rect = new Rect();
scorePaint.getTextBounds(text, 0, text.length(), rect);
//0
canvas.drawText(text, 0, sumHeight - buttomHeiht - rect.height() / 2, textPaint);
//60
text = centerY + "";
float y = (sumHeight - (oneHeight * centerY));
canvas.drawText(text, 0, y - buttomHeiht - rect.height() / 2 - dp2px(4), textPaint);
canvas.drawLine(0, y - buttomHeiht, sumWidth, y - buttomHeiht, scorePaint);
//100
text = maxY + "(" + unitY + ")";
float y2 = (sumHeight - (oneHeight * maxY));
canvas.drawText(text, 0, y2 - buttomHeiht - rect.height() / 2 - dp2px(4), textPaint);
canvas.drawLine(0, y2 - buttomHeiht, sumWidth, y2 - buttomHeiht, scorePaint);
}
/**
* 底部标线
*
* @param canvas
*/
private void drawBottomLine(Canvas canvas) {
Rect rect = new Rect();
scorePaint.getTextBounds("0", 0, "0".length(), rect);
canvas.drawLine(0, sumHeight - dp2px(15) - rect.height() / 2, sumWidth, sumHeight - dp2px(15) - rect.height() / 2, scorePaint);//画底部灰线
}
/**
* 阴影层叠
*
* @param canvas
* @param Points
*/
private void drawArea(Canvas canvas, List<PointF> Points) {
LinearGradient mShader = new LinearGradient(0, 0, 0, getMeasuredHeight(), new int[]{Color.parseColor(nodeColor), Color.parseColor(barLineColor), Color.parseColor(barLineDanColor)}, new float[]{0.5f, 0.65f, 0.85f}, Shader.TileMode.REPEAT);
baseShadow.setShader(mShader);
if (Points.size() > 0 && xyList != null && xyList.size() > 0) {
baseLinePath.lineTo(xyList.get(Points.size() - 1).x, sumHeight - buttomHeiht);
baseLinePath.lineTo(xyList.get(0).x, sumHeight - buttomHeiht);
baseLinePath.close();
canvas.drawPath(baseLinePath, baseShadow);
}
}
public int dp2px(float dp) {
final float scale = this.getResources().getDisplayMetrics().density;
return (int) (dp * scale + 0.5f);
}
/**
* 取出时间里面的最大的一个用来计算总长度
*
* @param timeList
* @return
*/
public float getMaxTime(List<Float> timeList) {
maxTime = 0;
for (int i = 0; i < timeList.size(); i++) {
if (maxTime < timeList.get(i)) {
maxTime = timeList.get(i);
}
}
if (maxTime <= 10) {
maxTime = 10;
}
maxTime *= 1.2;
return maxTime;
}
public int dp2px(Context context, float dp) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dp * scale + 0.5f);
}
public float dp2px(Resources resources, float dp) {
final float scale = resources.getDisplayMetrics().density;
return dp * scale + 0.5f;
}
public float sp2px(Resources resources, float sp) {
final float scale = resources.getDisplayMetrics().scaledDensity;
return sp * scale;
}
}
以上就是全部实现
