目录
第一部分、前言
为了任务需求，还要实现APP能够画简易的折线图，为此，这篇博客会记录下我是如何实现简易的波形。
1、效果展示
首先，看一下你想要的结果是不是下面这个样子的。
2、参考博客
我这里实现的只是别人博客一小部分代码，博客链接在下面，这篇博客真的讲的太好了。我文章中的代码大部分都是来源于这篇博客，所以一定要看。
3、实现方式
这里我将在前一篇文章的工程基础上来实现这个功能，前面这篇博客主要是实现一个注册和登录界面，这篇博客加上波形的显示。【Android Studio学习】第一篇、制作一个拥有登录和注册功能的简易APP_大屁桃的博客-CSDN博客
第二部分、详细步骤
1、添加波形函数的依赖
第一步、首先在Gradle Scripts下，打开第一个build.gradle，添加以下代码
//添加的依赖
allprojects {
repositories {
jcenter()
maven { url "https://jitpack.io" }
}
}
第二步、其次再在Gradle Scripts下，打开第二个build.gradle，添加以下代码
implementation 'com.github.PhilJay:MPAndroidChart:v3.0.2'
第三步、点击Sync Now，立即同步所需的依赖，然后等待完成
2、添加一个管理类
第一步、在com.example.myapplication文件夹下，新建一个Java Class文件
命名为LineChartFunction
第二步、在LineChartFunction添加以下代码（画一条曲线的代码）。注意：如果想画多条曲线，请参考上面我提到的博客。
package com.example.myapplication;
import android.graphics.Color;
import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
public class LineChartFunction {
private LineChart lineChart; //定义一个chart类型的数据
private YAxis leftAxis; //定义左y轴
private YAxis rightAxis; //定义右y轴
private XAxis xAxis; //定义x 轴
private LineDataSet lineDataSet;
private LineData lineData;
//一条曲线
public LineChartFunction(LineChart mLineChart, String name, int color) {
this.lineChart = mLineChart;
leftAxis = lineChart.getAxisLeft();
rightAxis = lineChart.getAxisRight();
xAxis = lineChart.getXAxis();
initLineChart();
initLineDataSet(name, color);
}
/**
* 初始化LineChar
*/
private void initLineChart() {
//网格的背景是灰色还是白色
lineChart.setDrawGridBackground(false);
//显示边界线，边界线被加粗
lineChart.setDrawBorders(false);
//折线图例 标签 设置
Legend legend = lineChart.getLegend();
legend.setForm(Legend.LegendForm.LINE);
legend.setTextColor(Color.BLACK); //设置Legend 文本颜色
legend.setTextSize(11f);//折线的对应名称字的大小
//显示位置
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
legend.setDrawInside(false);
//X轴设置显示位置在底部
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setGranularity(1f);
xAxis.setLabelCount(10);
//取消右边y轴的显示
rightAxis.setEnabled(false); //右侧Y轴不显示
//设置网格颜色
leftAxis.setGridColor(Color.WHITE); //网格线颜色
leftAxis.setAxisLineColor(Color.BLACK); //Y轴颜色
xAxis.setGridColor(Color.WHITE); //网格线颜色
xAxis.setAxisLineColor(Color.BLACK); //X轴颜色
//保证Y轴从0开始，不然会上移一点
leftAxis.setAxisMinimum(0f);
rightAxis.setAxisMinimum(0f);
}
/**
* 初始化折线(一条线)
*
* @param name
* @param color
*/
private void initLineDataSet(String name, int color) {
lineDataSet = new LineDataSet(null, name);
lineDataSet.setLineWidth(1.5f);
lineDataSet.setCircleRadius(1.5f);
lineDataSet.setColor(color);//设置除了点之外折线的颜色
//设置曲线值的圆点是实心还是空心
lineDataSet.setDrawCircleHole(false);//false 实心 true 空心
lineDataSet.setCircleColor(color);//设置折线上点的颜色也为黑色
lineDataSet.setHighLightColor(color);
//设置曲线填充
lineDataSet.setDrawFilled(true);//就是曲线下面的颜色
lineDataSet.setFillColor(color);//填充颜色
lineDataSet.setDrawValues(false);//曲线上每个点的值，这里是取消显示
lineDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
lineDataSet.setValueTextSize(10f);//设置显示值的字体大小
lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);//线模式为圆滑曲线（默认折线）
//添加一个空的 LineData
lineData = new LineData();
lineChart.setData(lineData);
lineChart.invalidate();
}
/**
* 动态添加数据（一条折线图）
*
* @param number
*/
public void addEntry(int number) {
//最开始的时候才添加 lineDataSet（一个lineDataSet 代表一条线）
if (lineDataSet.getEntryCount() == 0) {
lineData.addDataSet(lineDataSet);
}
lineChart.setData(lineData);
Entry entry = new Entry(lineDataSet.getEntryCount(), number);
lineData.addEntry(entry, 0);
//通知数据已经改变
lineData.notifyDataChanged();
lineChart.notifyDataSetChanged();
//设置在曲线图中显示的最大数量
lineChart.setVisibleXRangeMaximum(20);
//移到某个位置
lineChart.moveViewToX(lineData.getEntryCount() - 5);
}
/**
* 设置Y轴值
*
* @param max
* @param min
* @param labelCount
*/
public void setYAxis(float max, float min, int labelCount) {
if (max < min) {
return;
}
leftAxis.setAxisMaximum(max);
leftAxis.setAxisMinimum(min);
leftAxis.setLabelCount(labelCount, false);
rightAxis.setAxisMaximum(max);
rightAxis.setAxisMinimum(min);
rightAxis.setLabelCount(labelCount, false);
lineChart.invalidate();
}
}3、修改activity_main.xml文件的代码
第一步、原始activity_main.xml布局文件中，只有一个“Hello World”，这里添加画曲线的所需的控件
第二步、将代码改为以下代码，注意：将原始的约束布局androidx.constraintlayout.widget.ConstraintLayout改为线性布局LinearLayout。
并且改为线性布局方向为垂直android:orientation="vertical"。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="数据波形图:"
android:textSize="25sp"
android:textColor="@color/colorBlack" />
</LinearLayout>
<!--下面为折线图的布局控件-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/dynamic_chart1"
android:layout_width="match_parent"
android:layout_height="200dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="随机数据"
android:id="@+id/button_data1"
android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>第三步、得到的布局结果
4、修改MainActivity.Java文件的代码
第一步、MainActivity.Java修改代码如下
package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import com.github.mikephil.charting.charts.LineChart;
public class MainActivity extends AppCompatActivity {
//定义画图框变量
private LineChartFunction dynamicLineChartManager1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//寻找控件ID
final LineChart mChart1 = findViewById(R.id.dynamic_chart1);
final Button button_data1 = findViewById(R.id.button_data1);
dynamicLineChartManager1 = new LineChartFunction(mChart1, "数据", Color.GREEN);
dynamicLineChartManager1.setYAxis(100, 0, 10);//最大值，最小值，中间刻度值的数量
//按下按键实现的功能
button_data1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//数据传入端口
dynamicLineChartManager1.addEntry((int) (Math.random() * 100));
}
});
}
}添加的代码
5、连接手机进行仿真验证
使用方法：按下“随机数据”按键就会产生一个随机数，不停的点击按键，进而产生的随机数就构成了波形的数据点。
注意：后期如果想显示单片机或者云端传过来数据的波形，只需要将这里的随机数改为APP接收的数据即可。
第三部分、总结
1、写在后面
需要注意的是，博主这里只是去复现了别人的代码，如果想实现更高级的波形，比如一张图画多曲线，条形图等，请参考我上面提及到的博客。
2、完整工程代码
这是博主的完整的代码，可以直接下载，但是你是不是要关注点赞收藏，然后再下载？🤔🤔🤔博客中的工程
3、QQ群号
有问题的小伙伴现在可以进群询问啦，当然我所有博客中涉及到的参考资料和工程都在群文件里。之前也在博客中放过群号，但是那个时候没有时间，群里面的小伙伴发的消息我都没时间回复，所以就把群号给屏蔽了，现在读研了，有时间了。欢迎大家的加入，群号：1020775171。群聊目前处于起步阶段，哈哈哈哈哈😂😂😂
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
