目录
第一部分、前言
1、效果展示
2、参考博客
3、实现方式
第二部分、详细步骤
1、添加波形函数的依赖
2、添加一个管理类
3、修改activity_main.xml文件的代码
4、修改MainActivity.Java文件的代码
5、连接手机进行仿真验证
第三部分、总结
1、写在后面
2、完整工程代码
3、QQ群号
为了任务需求,还要实现APP能够画简易的折线图,为此,这篇博客会记录下我是如何实现简易的波形。
首先,看一下你想要的结果是不是下面这个样子的。
我这里实现的只是别人博客一小部分代码,博客链接在下面,这篇博客真的讲的太好了。我文章中的代码大部分都是来源于这篇博客,所以一定要看。
(2条消息) Android图表控件MPAndroidChart——曲线图LineChart(多条曲线)动态添加数据_xhu_ww的博客-CSDN博客_android linechart多条曲线addentry
这里我将在前一篇文章的工程基础上来实现这个功能,前面这篇博客主要是实现一个注册和登录界面,这篇博客加上波形的显示。【Android Studio学习】第一篇、制作一个拥有登录和注册功能的简易APP_大屁桃的博客-CSDN博客
第一步、首先在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,立即同步所需的依赖,然后等待完成
第一步、在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();
}
}
第一步、原始activity_main.xml布局文件中,只有一个“Hello World”,这里添加画曲线的所需的控件
第二步、将代码改为以下代码,注意:将原始的约束布局androidx.constraintlayout.widget.ConstraintLayout改为线性布局LinearLayout。
并且改为线性布局方向为垂直android:orientation="vertical"。
第三步、得到的布局结果
第一步、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));
}
});
}
}
添加的代码
使用方法:按下“随机数据”按键就会产生一个随机数,不停的点击按键,进而产生的随机数就构成了波形的数据点。
注意:后期如果想显示单片机或者云端传过来数据的波形,只需要将这里的随机数改为APP接收的数据即可。
需要注意的是,博主这里只是去复现了别人的代码,如果想实现更高级的波形,比如一张图画多曲线,条形图等,请参考我上面提及到的博客。
这是博主的完整的代码,可以直接下载,但是你是不是要关注点赞收藏,然后再下载?博客中的工程
有问题的小伙伴现在可以进群询问啦,当然我所有博客中涉及到的参考资料和工程都在群文件里。之前也在博客中放过群号,但是那个时候没有时间,群里面的小伙伴发的消息我都没时间回复,所以就把群号给屏蔽了,现在读研了,有时间了。欢迎大家的加入,群号:1020775171。群聊目前处于起步阶段,哈哈哈哈哈