android绘制曲线和折线图的方法
作者:会爬楼梯的鱼 时间:2021-11-19 02:26:02
本文实例为大家分享了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);
}
}
来源:https://blog.csdn.net/qq_30089721/article/details/121614214
标签:android,曲线,折线图
0
投稿
猜你喜欢
C#引用类型和值类型的介绍与实例
2022-08-11 16:24:34
C#创建WebService接口并连接的全过程
2023-04-07 07:47:21
c#.net 常用函数和方法集
2022-08-03 01:44:00
Spring实战之协调作用域不同步的Bean操作示例
2023-01-23 02:48:10
详解Spring Cloud Stream使用延迟消息实现定时任务(RabbitMQ)
2022-09-14 05:07:34
Java数组的基本学习教程
2021-07-14 05:08:00
python调用java的Webservice示例
2021-07-31 13:36:09
Android 静默安装实现方法
2021-08-04 05:11:25
Jenkins迁移job插件Job Import Plugin流程详解
2022-05-21 03:22:56
Spring JPA find单表查询方法示例详解
2022-11-03 19:43:38
Java中利用gson解析Json实例教程
2023-10-31 04:07:41
SpringBoot基于Sentinel在服务上实现接口限流
2023-11-27 17:19:25
c#和javascript函数相互调用示例分享
2023-10-08 21:33:52
Android模块化中数据传递/路由跳转实现示例
2023-06-29 03:12:06
java实现基于SMTP发送邮件的方法
2023-04-06 12:22:07
详解c# 多态
2021-12-07 07:12:40
Java使用通配符实现增强泛型详解
2021-07-06 17:28:01
C#泛型与非泛型性能比较的实例
2022-01-31 17:26:51
Java实现高校教务系统
2022-05-16 04:24:17
Java编程实现高斯模糊和图像的空间卷积详解
2022-06-18 10:44:34