目錄

第一部分、前言

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);//線模式為圓滑曲線（默認折線）//添加一個空的 LineDatalineData = 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"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="50dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="數據波形圖:"android:textSize="25sp"android:textColor="@color/colorBlack" /></LinearLayout><!--下面為折線圖的布局控件--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><com.github.mikephil.charting.charts.LineChartandroid:id="@+id/dynamic_chart1"android:layout_width="match_parent"android:layout_height="200dp"/><Buttonandroid: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;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//尋找控件IDfinal 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() {@Overridepublic void onClick(View view) {//數據傳入端口dynamicLineChartManager1.addEntry((int) (Math.random() * 100));}});} }

添加的代碼

?5、連接手機進行仿真驗證

使用方法：按下“隨機數據”按鍵就會產生一個隨機數，不停的點擊按鍵，進而產生的隨機數就構成了波形的數據點。

?注意：后期如果想顯示單片機或者云端傳過來數據的波形，只需要將這里的隨機數改為APP接收的數據即可。

?第三部分、總結

1、寫在后面

????????需要注意的是，博主這里只是去復現了別人的代碼，如果想實現更高級的波形，比如一張圖畫多曲線，條形圖等，請參考我上面提及到的博客。

2、完整工程代碼

????????這是博主的完整的代碼，可以直接下載，但是你是不是要關注點贊收藏，然后再下載？🤔🤔🤔博客中的工程

3、QQ群號?

? ? ? ? 有問題的小伙伴現在可以進群詢問啦，當然我所有博客中涉及到的參考資料和工程都在群文件里。之前也在博客中放過群號，但是那個時候沒有時間，群里面的小伙伴發的消息我都沒時間回復，所以就把群號給屏蔽了，現在讀研了，有時間了。歡迎大家的加入，群號：1020775171。群聊目前處于起步階段，哈哈哈哈哈😂😂😂

總結

以上是生活随笔為你收集整理的【Android Studio学习】第二篇、APP实现画简易的波形图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。