WechatIMG3.jpeg
WechatIMG4.jpeg
这是支付宝里面的基金的折线图，可以实现左右滑动查看具体一天的情况的图
最近我司业务也遇到需要这样的效果图，趁机自己也撸了一炮写一个类似的view
我做的效果图
不点击的时候
点击的时候
代码写的非常简单，适合新手学习的代码
package mo.wall.org.markerview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.graphics.Rect;
import android.os.Build;
import android.support.annotation.Nullable;
import android.support.annotation.RequiresApi;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* Copyright (C), 2018-2019
* Author: ziqimo
* Date: 2019-12-06 19:54
* Description:
* History:
* <author> <time> <version> <desc>
* 作者姓名 修改时间 版本号 描述
*/
public class MarkerView extends View {
private static final String TAG = MarkerView.class.getSimpleName();
private int width, height;
public List<String> yHearts;
public List<String> xTimes;
public Map<String, String> datas;
private Paint yTextPaint = null;
private Paint yLinePaint = null;
private Paint xLinePaint = null;
private Paint xTextPaint = null;
/**
* 曲线图的画
*/
private Paint contentPaint = null;
private Path contentPath = null;
private int radius;
private int radiusCenter;
private Paint normalPointPaint;
private Paint normalWhilePointPaint;
private List<Float> xWeizi = new ArrayList<>();
private List<PointXY> points = new ArrayList<>();
public MarkerView(Context context) {
this(context, null);
}
public MarkerView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public MarkerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(attrs);
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public MarkerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
width = getWidth();
height = getHeight();
}
/**
* 滑动的线在这2个区间内
*/
float startX = 0;
float endX = 0;
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制y轴上的文字
int ySize = yHearts.size();
int yEqually = height / ySize;
int textH = -1;
for (int i = 0; i < ySize; i++) {
String yText = yHearts.get(i);
int nextY = yEqually * (ySize - i) - getPaddingBottom() - getPaddingTop();
float yTextMeasureText = yTextPaint.measureText(yText);
Rect rect = new Rect();
yTextPaint.getTextBounds(yText, 0, yText.length(), rect);
textH = rect.height();
canvas.drawText(yText, getPaddingLeft(), nextY, yTextPaint);
//这里画条线
startX = getPaddingLeft() + yTextMeasureText + dip2px(getContext(), 10);
endX = width - getPaddingRight();
canvas.drawLine(startX, nextY - textH / 2, endX, nextY - textH / 2, yLinePaint);
}
//绘制x轴上的文字
int xSize = xTimes.size();
int xEqually = width / xSize;
int singleY = -1;
int minY = -1;
int maxY = -1;
try {
minY = Integer.parseInt(yHearts.get(0));
maxY = Integer.parseInt(yHearts.get(ySize - 1));
} catch (Exception e) {
} finally {
singleY = (maxY - minY) / ySize;
}
//y 每一个等分距离
//每个等分都要减去文字的一半的高度
int yUnit = (height - getPaddingBottom() - getPaddingTop()) / ySize - textH / 2;
points.clear();
xWeizi.clear();
for (int i = 0; i < xSize; i++) {
float nextX = (int) (xEqually * i + startX) + getPaddingLeft();
//记录滑动线的最大值和最小值
if (i == 0) {
startX = Math.max(nextX, startX);
}
if (i == xSize - 1) {
endX = Math.min(nextX, endX);
}
String xText = xTimes.get(i);
xWeizi.add(nextX);
canvas.drawText(xText, nextX, height - getPaddingBottom(), xTextPaint);
//记录下线的位置
PointXY point = new PointXY();
int y = 0;
try {
String content = datas.get(xText);
y = Integer.parseInt(content);
} catch (Exception e) {
} finally {
point.x = nextX;
//计算y的位置
point.y = (height - getPaddingBottom() - getPaddingTop()) - yUnit * (y - minY) / singleY;
}
points.add(point);
if (i == 0) {
contentPath.moveTo(point.x, point.y);
} else {
contentPath.lineTo(point.x, point.y);
}
}
//这是合并的效果，暂时不需要
//这是合并的效果，暂时不需要
//这是合并的效果，暂时不需要
// contentPath.lineTo(points.get(points.size() - 1).x, height - getPaddingBottom() - getPaddingTop() - textH / 2);
// contentPath.lineTo(startX + getPaddingLeft(), height - getPaddingBottom() - getPaddingTop() - textH / 2);
// contentPath.close();
//这是合并的效果，暂时不需要
//这是合并的效果，暂时不需要
//这是合并的效果，暂时不需要
canvas.drawPath(contentPath, contentPaint);
//画点
for (int i = 0; i < points.size(); i++) {
canvas.drawCircle(points.get(i).x, points.get(i).y, radius, normalPointPaint);
canvas.drawCircle(points.get(i).x, points.get(i).y, radiusCenter, normalWhilePointPaint);//用于消除交际部分，我菜只能这样做了
}
//垂直的线
canvas.drawLine(currentX, height, currentX, 0, xLinePaint);
}
private void init(AttributeSet attrs) {
if (attrs != null) {
}
yTextPaint = new Paint();
yTextPaint.setColor(Color.parseColor("#333333"));
yTextPaint.setTextSize(23);
yTextPaint.setTextAlign(Paint.Align.LEFT);
xTextPaint = new Paint();
xTextPaint.setColor(Color.parseColor("#333333"));
xTextPaint.setTextSize(24);
xTextPaint.setTextAlign(Paint.Align.CENTER);
yLinePaint = new Paint();
yLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
yLinePaint.setColor(Color.parseColor("#333333"));
xLinePaint = new Paint();
xLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
xLinePaint.setColor(Color.parseColor("#333333"));
xLinePaint.setStrokeWidth(dip2px(getContext(), 1));
contentPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
contentPaint.setColor(Color.parseColor("#303F9F"));
contentPaint.setStrokeWidth(dip2px(getContext(), 3));
contentPaint.setStyle(Paint.Style.STROKE);
contentPath = new Path();
radius = dip2px(getContext(), 3);//圆半径
radiusCenter = radius - dip2px(getContext(), 1);//圆半径
normalPointPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
normalPointPaint.setColor(Color.parseColor("#303F9F"));
normalPointPaint.setStrokeWidth(dip2px(getContext(), 3));
normalPointPaint.setStyle(Paint.Style.STROKE);
normalWhilePointPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
normalWhilePointPaint.setColor(Color.parseColor("#FFFFFF"));
normalWhilePointPaint.setStrokeWidth(dip2px(getContext(), 3));
normalWhilePointPaint.setStyle(Paint.Style.FILL);
yHearts = new ArrayList<>();
xTimes = new ArrayList<>();
datas = new HashMap<>();
yHearts.add("300");
yHearts.add("400");
yHearts.add("500");
yHearts.add("600");
yHearts.add("700");
yHearts.add("800");
xTimes.add("11-13");
xTimes.add("11-14");
xTimes.add("11-15");
xTimes.add("11-16");
xTimes.add("11-17");
xTimes.add("11-18");
datas.put("11-13", "309");
datas.put("11-14", "510");
datas.put("11-15", "760");
datas.put("11-16", "390");
datas.put("11-17", "620");
datas.put("11-18", "590");
}
private float currentX;
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
currentX = (int) event.getX();
if (currentX > endX) {
currentX = endX;
}
if (currentX < startX) {
currentX = startX;
}
int pos = 0;
for (int i = 0; i < xWeizi.size(); i++) {
//每个点的x与touch的x求绝对值……
//哪个最小就是哪个点近。。
float curX = xWeizi.get(i);
if (i == 0 && currentX < xWeizi.get(i + 1) / 2) {
pos = i;
break;
} else if (currentX < curX) {
pos = i;
break;
}
}
float curX = xWeizi.get(pos);
currentX = curX;
// boolean contains = xWeizi.contains(currentX);
// if (contains) {
// Log.i(TAG, "currentX：" + currentX);
// Log.i(TAG, "startX：" + startX);
// Log.i(TAG, "endX：" + endX);
// }
invalidate();
break;
case MotionEvent.ACTION_UP:
currentX = -100;
invalidate();
break;
}
return true;
}
static class PointXY {
float x;
float y;
}
/**
* 将dp转换成px
*
* @param context
* @param dpValue
* @return
*/
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
/**
* 将像素转换成dp
*
* @param context
* @param pxValue
* @return
*/
public static int px2dip(Context context, float pxValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (pxValue / scale + 0.5f);
}
}
先前这个画的一般般，后面优化了很多细节的东西放在这里
image.png
上面这个是新增的类
image.png
最后github地址：https://github.com/moz1q1/WalleLibrary
网友评论