Android 自定义坐标曲线图

原创

于 2023-11-23 15:34:39 发布 · 911 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#android #自定义view #曲线图 #坐标图 #点线图

本文介绍了如何在项目开发中自定义View以实现复杂的坐标曲线图，包括onMeasure、onLayout和onDraw方法的应用，以及如何使用Paint、Path、Point等API绘制线条、虚线和曲线，并添加点击事件。

先看效果

项目开发中，被安排去调研实现坐标曲线图，网上第三方的库很多，可以实现，但是有些样式无法做到符合自己要求，Android 与iOS效果上也存在差异，所以自己自定义了一个；

其实比较简单，就是画点，画线，画虚线，画曲线，添加点击事件即可；这里面需要涉及到的知识点主要是有：对自定义View有一点基础，比如onMeasure()、onLayout()、onDraw()；至少得了解这三个方法；

另外就是需要会用画笔Paint、点Point、路径Path等，至少会使用这三个API，那基本就没有问题了，画点、点与点连接成线、然后闭合起来就是一个多边形、再给多边形填充颜色即可；

另外横坐标纵坐标，以及点的数据，都是外部传入，具体情况具体考虑；

先看使用方法：

在布局中添加

<com.test.jsontouijson.weight.LineGraphicView
        android:id="@+id/lineGraphicView"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

在activity或fragment中初始化，添加数据

lineGraphicView = findViewById(R.id.lineGraphicView); 
lineGraphicView.setData(pointData);
//添加点击事件
lineGraphicView.setListener((x, y) -> initPopupWindow(lineGraphicView, x, y));

点击后的弹框是外部实现的，这个自行使用popupWindow去实现，点击已经有返回点的坐标x、y了，弹框的显示位置可通过这个坐标点定位。

大概就是这些，下面是LineGraphicView具体代码，代码有比较详细的备注形式


import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.DashPathEffect;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class LineGraphicView extends View {
    private static final int CIRCLE_SIZE = 40;

    private static enum LineStyle {LINE, CURVE}

    private static enum YLineStyle {DASHES_LINE, FULL_LINE}

    private static enum ShaderOrientationStyle {ORIENTATION_H, ORIENTATION_V}

    private Context mContext;
    private Resources res;
    private DisplayMetrics dm;
    private OnClickListener listener;
    private LineStyle mStyle = LineStyle.LINE;
    private YLineStyle mYLineStyle = YLineStyle.DASHES_LINE;
    private ShaderOrientationStyle mShaderOrientationStyle = ShaderOrientationStyle.ORIENTATION_V;
    private int canvasHeight;
    private int canvasWidth;
    private int bHeight = 0;
    private int bWidth = 0;
    private int marginLeft;
    private boolean isMeasure = true;
    private boolean isShowFirstXContent = false;
    private int xTextWidth = 0;//Y轴内容宽度
    private int spacingHeight;
    private double averageValue;
    private int marginTop = 0;
    private int marginBottom = 0;
    /**
     * data
     */
    private Point[] mPoints;//点
    private List<String> yRawDatas;//y轴数据
    private PointData pointData;//外部传入数据
    private List<String> xRawDatas;//x轴数据
    private List<Double> dataList = new ArrayList<>();//点的数据
    private List<Integer> xList = new ArrayList<>();// 记录每个x的值
    private Map<String, Integer> xMap = new HashMap<>();//用于保存 点-X坐标 对应起来
    /**
     * paint color
     */
    private int xTextPaintColor;
    private int yTextPaintColor;
    private int startShaderColor;
    private int endShaderColor;
    private int mCanvasColor;
    /**
     * paint size
     */
    private int xTextSize = 12;
    private int yTextSize = 12;
    private Point mSelPoint;


    public LineGraphicView(Context context) {
        this(context, null);
    }

    public LineGraphicView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context