【Android Studio学习】第二篇、APP实现画简易的波形图

目录

第一部分、前言

1、效果展示

 2、参考博客

3、实现方式

第二部分、详细步骤

1、添加波形函数的依赖

 2、添加一个管理类

3、修改activity_main.xml文件的代码

 4、修改MainActivity.Java文件的代码

 5、连接手机进行仿真验证

 第三部分、总结

1、写在后面

2、完整工程代码

3、QQ群号 

---

第一部分、前言

        为了任务需求，还要实现APP能够画简易的折线图，为此，这篇博客会记录下我是如何实现简易的波形。

1、效果展示

        首先，看一下你想要的结果是不是下面这个样子的。

 2、参考博客

        我这里实现的只是别人博客一小部分代码，博客链接在下面，这篇博客真的讲的太好了。我文章中的代码大部分都是来源于这篇博客，所以一定要看。

(2条消息) Android图表控件MPAndroidChart——曲线图LineChart（多条曲线）动态添加数据_xhu_ww的博客-CSDN博客_android linechart多条曲线addentry

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"。

"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。群聊目前处于起步阶段，哈哈哈哈哈😂😂😂