android绘制曲线和折线图的方法

本文实例为大家分享了android绘制曲线和折线图的具体代码，供大家参考，具体内容如下

(曲线)

(折线)

1.CurveView.java

package com.package;
 
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.graphics.PointF;
import android.graphics.Rect;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.Pair;
import android.util.TypedValue;
import android.view.View;
import android.view.WindowManager;
 
import androidx.annotation.Nullable;
 
import java.util.ArrayList;
import java.util.List;
 
public class CurveView extends View {
    private Paint mBrokenLinePaint;
    private Paint mInCirclePaint;
    private Paint mFillCirclePaint;
    private Paint mOutCirclePaint;
    private Paint mBottomLinePaint;
    private Paint mXTextPaint;
    private Paint mYLinePaint;
    private Paint mYTextPaint;
    private boolean isCurve;
    /**
     * X轴的数量,按需调整
     */
    private int mLength = 7;
    /**
     * 获取屏幕的宽度
     */
    private final int mScreenWidth = getScreenWidth(getContext());
    /**
     * 获取实际屏幕的宽度
     */
    private int cScreenWidth = getScreenWidth(getContext());
    /**
     * 整个折线图的高度=屏幕高度-顶部的状态栏高度
     */
    private final int mHeight = getScreenHeight(getContext()) - dp2px(getContext(), 190);
    /**
     * 节点外圆的半径
     */
    private final int outRadius = dp2px(getContext(), 6);
    /**
     * 节点内圆的半径
     */
    private final int inRadius = dp2px(getContext(), 3);
    /**
     * 左右两边距边缘的距离
     */
    private final float mSideLength = dp2px(getContext(), 20);
    /**
     * X轴底部文字的高度
     */
    private final int mXTextHeight = dp2px(getContext(), 30);
 
    /**
     * 距离上边距的高度
     */
    private final int mPaddingTop = dp2px(getContext(), 10);
 
    /**
     * 获取间隔距离
     */
    private int mSpaceLength;
    /**
     * 用户设置的数据
     */
    private final List<Pair<String, Float>> dataValue = new ArrayList<>();
    /**
     * 节点数据
     */
    private final List<Pair<Float, Float>> nodeValue = new ArrayList<>();
    /**
     * 节点上标注的文字
     */
    private final List<String> yValue = new ArrayList<>();
    private Paint mShadowPaint;
 
    public CurveView(Context context) {
        this(context, null);
    }
 
    public CurveView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }
 
    public CurveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
 
    /**
     * dp转px
     */
    public static int dp2px(Context context, float dp) {
        float px = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, context.getResources().getDisplayMetrics());
        return Math.round(px);
    }
 
    /**
     * 获取屏幕宽度
     */
    public static int getScreenWidth(Context context) {
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        Point size = new Point();
        wm.getDefaultDisplay().getSize(size);
        return size.x;
    }
 
    /*设置实际内容宽度*/
    public void setContentWidth(int size) {
        mLength = size + 1;
        cScreenWidth = (mScreenWidth / 7) * size;
    }
 
    /**
     * 获取屏幕高度
     */
    public static int getScreenHeight(Context context) {
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        Point size = new Point();
        wm.getDefaultDisplay().getSize(size);
        return size.y;
    }
 
    /**
     * 设置数据
     */
    public void setData(List<String> xAxis, List<String> yAxis) {
        dataValue.clear();
        yValue.clear();
        float yHeight = mHeight - mXTextHeight;
        for (int i = 0; i < xAxis.size(); i++) {
            yValue.add(yAxis.get(i));
            float value = Float.parseFloat(yAxis.get(i));
            dataValue.add(new Pair<>(xAxis.get(i), (yHeight - value / 200f * yHeight)));
        }
        invalidate();
        requestLayout();
    }
 
    private void init() {
        getSpaceLength();//获取间隔距离
        initYLine();//初始化竖直方向的线条
        initBottomLine();//初始化底部横线paint
        initInCircle();//初始化节点内圆
        initBrokenLine();//初始化曲线、折线
        initXtext();//初始化X轴标签
        initYtext();//初始化Y轴上数值
        initShadowPaint();//初始化阴影
    }
 
    /**
     * 获取间隔距离
     * （屏幕宽度-两边的间距）/(x轴数量-1)
     */
    private void getSpaceLength() {
        mSpaceLength = (int) (mScreenWidth - mSideLength * 2) / (mLength - 1);
    }
 
    /**
     * 初始化竖直方向的线条
     */
    private void initYLine() {
        mYLinePaint = new Paint();
        mYLinePaint.setColor(Color.GRAY);
        mYLinePaint.setStrokeWidth(1);
        mYLinePaint.setStyle(Paint.Style.STROKE);
        mYLinePaint.setAntiAlias(true);
    }
 
    /**
     * 初始化底部横线paint
     */
    private void initBottomLine() {
        mBottomLinePaint = new Paint();
        mBottomLinePaint.setColor(Color.GRAY);
        mBottomLinePaint.setStrokeWidth(dp2px(getContext(), 0.5f));
        mBottomLinePaint.setStyle(Paint.Style.STROKE);
        mBottomLinePaint.setAntiAlias(true);
    }
 
    /**
     * 初始化X轴标签
     */
    private void initXtext() {
        mXTextPaint = new Paint();
        mXTextPaint.setColor(Color.GRAY);
        mXTextPaint.setTextSize(dp2px(getContext(), 12));
        mXTextPaint.setStyle(Paint.Style.FILL);
        mXTextPaint.setAntiAlias(true);
    }
 
    /**
     * 初始化Y轴上数值
     */
    private void initYtext() {
        mYTextPaint = new Paint();
        mYTextPaint.setColor(Color.GRAY);
        mYTextPaint.setTextSize(dp2px(getContext(), 12));
        mYTextPaint.setStyle(Paint.Style.FILL);
        mYTextPaint.setAntiAlias(true);
    }
 
    /**
     * 初始化节点内圆
     */
    private void initInCircle() {
        //初始化外圆
        mOutCirclePaint = new Paint();
        mOutCirclePaint.setColor(Color.GREEN);
        mOutCirclePaint.setStyle(Paint.Style.FILL);
        mOutCirclePaint.setAntiAlias(true);
        //内框
        mInCirclePaint = new Paint();
        mInCirclePaint.setColor(Color.GRAY);
        mInCirclePaint.setStyle(Paint.Style.STROKE);
        mInCirclePaint.setStrokeWidth(dp2px(getContext(), 2));
        mInCirclePaint.setAntiAlias(true);
        //内圆
        mFillCirclePaint = new Paint();
        mFillCirclePaint.setColor(Color.GRAY);
        mFillCirclePaint.setStyle(Paint.Style.FILL);
        mFillCirclePaint.setAntiAlias(true);
    }
 
    /**
     * 初始化曲线、折线
     */
    private void initBrokenLine() {
        mBrokenLinePaint = new Paint();//折线
        mBrokenLinePaint.setColor(Color.GRAY);
        mBrokenLinePaint.setStrokeWidth(dp2px(getContext(), 2f));
        mBrokenLinePaint.setStyle(Paint.Style.STROKE);
        mBrokenLinePaint.setStrokeCap(Paint.Cap.ROUND);
        mBrokenLinePaint.setAntiAlias(true);
    }
 
    /**
     * 初始化阴影
     */
    private void initShadowPaint() {
        mShadowPaint = new Paint();
        mShadowPaint.setStyle(Paint.Style.FILL);
        mShadowPaint.setAntiAlias(true);
        Shader shader = new LinearGradient(getWidth() / 2f, getHeight(), getWidth() / 2f, 0,
                Color.parseColor("#3300FF00"), Color.parseColor("#3300FF00"), Shader.TileMode.MIRROR);
        mShadowPaint.setShader(shader);
    }
 
    /**
     * 绘制
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawYLine(canvas);
        // 绘制底部的X轴线
        drawBottomLine(canvas);
        // 绘制节点和折线图
        drawCircleLine(canvas);
        // 绘制Y轴上的数据和背景
        drawYtext(canvas);
        // 绘制X轴标签文字
        drawBottomText(canvas);
        //阴影
        drawShadow(canvas);
    }
 
    /**
     * 绘制竖直方向上的线
     */
    private void drawYLine(Canvas canvas) {
        for (int i = 0; i < dataValue.size(); i++) {
            canvas.drawLine(mSideLength + mSpaceLength * i, mPaddingTop, mSideLength + mSpaceLength * i, mHeight - mXTextHeight, mYLinePaint);
        }
    }
 
    /**
     * 绘制节点和曲线或者折线图
     */
    private void drawCircleLine(Canvas canvas) {
        nodeValue.clear();
        for (int i = 0; i < dataValue.size(); i++) {
            Pair<String, Float> pair = dataValue.get(i);
            // 绘制节点外圆
            canvas.drawCircle(mSideLength + mSpaceLength * i, pair.second, outRadius, mOutCirclePaint);
            // 绘制节点内框
            canvas.drawCircle(mSideLength + mSpaceLength * i, pair.second, inRadius, mFillCirclePaint);
            // 绘制节点内圆
            canvas.drawCircle(mSideLength + mSpaceLength * i, pair.second, inRadius, mInCirclePaint);
            // 保存圆心坐标
            Pair<Float, Float> pairs = new Pair<>(mSideLength + mSpaceLength * i, pair.second);
            nodeValue.add(pairs);
        }
        drawScrollLine(canvas);//曲线
        // drawLine(canvas);//折线
    }
 
    /**
     * 绘制曲线图
     */
    private void drawScrollLine(Canvas canvas) {
        isCurve = true;
        PointF pStart, pEnd;
        List<PointF> points = getPoints();
        Path path = new Path();
        for (int i = 0; i < points.size() - 1; i++) {
            pStart = points.get(i);
            pEnd = points.get(i + 1);
            PointF point3 = new PointF();
            PointF point4 = new PointF();
            float wd = (pStart.x + pEnd.x) / 2;
            point3.x = wd;
            point3.y = pStart.y;
            point4.x = wd;
            point4.y = pEnd.y;
            path.moveTo(pStart.x, pStart.y);
            path.cubicTo(point3.x, point3.y, point4.x, point4.y, pEnd.x, pEnd.y);
            canvas.drawPath(path, mBrokenLinePaint);
        }
    }
 
    /**
     * 绘制折线
     */
    private void drawLine(Canvas canvas) {
        isCurve = false;
        for (int i = 0; i < nodeValue.size(); i++) {
            if (i != nodeValue.size() - 1) {
                canvas.drawLine((float) nodeValue.get(i).first,
                        (float) nodeValue.get(i).second,
                        (float) nodeValue.get(i + 1).first,
                        (float) nodeValue.get(i + 1).second, mBrokenLinePaint);
            }
        }
    }
 
    /**
     * 绘制阴影
     */
    private void drawShadow(Canvas canvas) {
        List<PointF> points = getPoints();
        if (isCurve) {//曲线
            PointF pStart, pEnd;
            Path path = new Path();
            for (int i = 0; i < points.size() - 1; i++) {
                pStart = points.get(i);
                pEnd = points.get(i + 1);
                PointF point3 = new PointF();
                PointF point4 = new PointF();
                float wd = (pStart.x + pEnd.x) / 2;
                point3.x = wd;
                point3.y = pStart.y;
                point4.x = wd;
                point4.y = pEnd.y;
                path.moveTo(pStart.x, pStart.y);
                path.cubicTo(point3.x, point3.y, point4.x, point4.y, pEnd.x, pEnd.y);
                //减去文字和指示标的高度
                path.lineTo(pEnd.x, getHeight() - mXTextHeight);
                path.lineTo(pStart.x, getHeight() - mXTextHeight);
            }
            path.close();
            canvas.drawPath(path, mShadowPaint);
        } else {
            Path path = new Path();
            path.moveTo(points.get(0).x, points.get(0).y);
            for (int i = 1; i < points.size(); i++) {
                path.lineTo(points.get(i).x, points.get(i).y);
            }
            //链接最后两个点
            int index = points.size() - 1;
            path.lineTo(points.get(index).x, getHeight() - mXTextHeight);
            path.lineTo(points.get(0).x, getHeight() - mXTextHeight);
            path.close();
            canvas.drawPath(path, mShadowPaint);
        }
    }
 
    /**
     * 获取坐标点
     */
    private List<PointF> getPoints() {
        ArrayList<PointF> points = new ArrayList<>();
        for (Pair<Float, Float> pair : nodeValue) {
            points.add(new PointF((float) pair.first, (float) pair.second));
        }
        return points;
    }
 
    /**
     * 绘制底部的X轴线
     */
    private void drawBottomLine(Canvas canvas) {
        canvas.drawLine(0, mHeight - mXTextHeight, cScreenWidth, mHeight - mXTextHeight, mBottomLinePaint);
    }
 
    /**
     * 绘制X轴标签文字
     */
    private void drawBottomText(Canvas canvas) {
        for (int i = 0; i < dataValue.size(); i++) {
            String xValue = dataValue.get(i).first;
            // 获取Text内容宽度
            Rect bounds = new Rect();
            mXTextPaint.getTextBounds(xValue, 0, xValue.length(), bounds);
            int width = bounds.right - bounds.left;
            canvas.drawText(xValue, mSideLength - width / 2f + mSpaceLength * i, mHeight - mXTextHeight / 2f, mXTextPaint);
        }
    }
 
    /**
     * 绘制Y轴上的数据和背景
     */
    private void drawYtext(Canvas canvas) {
        for (int i = 0; i < dataValue.size(); i++) {
            Pair<String, Float> pair = dataValue.get(i);
            // 用Rect计算Text内容宽度
            Rect bounds = new Rect();
            mYTextPaint.getTextBounds(pair.first, 0, pair.first.length(), bounds);
            int textWidth = bounds.right - bounds.left;
            // 绘制节点上的文字
            canvas.drawText(yValue.get(i), mSideLength + mSpaceLength * i - textWidth / 2f, pair.second - 25, mYTextPaint);
        }
    }
}

2.xml里引入

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <com.package.line.CurveView
        android:id="@+id/curveView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#f2f2f2"/>
 
</androidx.constraintlayout.widget.ConstraintLayout>

3.activity中使用

package com.package;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.os.Bundle;
 
import com.package.line.CurveView;
 
import java.util.Arrays;
import java.util.List;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        CurveView curveView = findViewById(R.id.curveView);
          List<String> xList = Arrays.asList("1","2","3","4","5","6","7");
        List<String> yList = Arrays.asList("0","50","55","51","53","56","59");
        curveView.setData(xList, yList);
    }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。