目錄

第一部分、前言

1、效果展示

?2、參考博客

3、實(shí)現(xiàn)方式

第二部分、詳細(xì)步驟

1、添加波形函數(shù)的依賴

?2、添加一個(gè)管理類(lèi)

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

?4、修改MainActivity.Java文件的代碼

?5、連接手機(jī)進(jìn)行仿真驗(yàn)證

?第三部分、總結(jié)

1、寫(xiě)在后面

2、完整工程代碼

3、QQ群號(hào)?

---

第一部分、前言

????????為了任務(wù)需求，還要實(shí)現(xiàn)APP能夠畫(huà)簡(jiǎn)易的折線圖，為此，這篇博客會(huì)記錄下我是如何實(shí)現(xiàn)簡(jiǎn)易的波形。

1、效果展示

????????首先，看一下你想要的結(jié)果是不是下面這個(gè)樣子的。

?2、參考博客

????????我這里實(shí)現(xiàn)的只是別人博客一小部分代碼，博客鏈接在下面，這篇博客真的講的太好了。我文章中的代碼大部分都是來(lái)源于這篇博客，所以一定要看。

(2條消息) Android圖表控件MPAndroidChart——曲線圖LineChart（多條曲線）動(dòng)態(tài)添加數(shù)據(jù)_xhu_ww的博客-CSDN博客_android linechart多條曲線addentry

3、實(shí)現(xiàn)方式

????????這里我將在前一篇文章的工程基礎(chǔ)上來(lái)實(shí)現(xiàn)這個(gè)功能，前面這篇博客主要是實(shí)現(xiàn)一個(gè)注冊(cè)和登錄界面，這篇博客加上波形的顯示。【Android Studio學(xué)習(xí)】第一篇、制作一個(gè)擁有登錄和注冊(cè)功能的簡(jiǎn)易APP_大屁桃的博客-CSDN博客

第二部分、詳細(xì)步驟

1、添加波形函數(shù)的依賴

第一步、首先在Gradle Scripts下，打開(kāi)第一個(gè)build.gradle，添加以下代碼

//添加的依賴 allprojects {repositories {jcenter()maven { url "https://jitpack.io" }} }

?第二步、其次再在Gradle Scripts下，打開(kāi)第二個(gè)build.gradle，添加以下代碼

implementation 'com.github.PhilJay:MPAndroidChart:v3.0.2'

?第三步、點(diǎn)擊Sync Now，立即同步所需的依賴，然后等待完成

?2、添加一個(gè)管理類(lèi)

第一步、在com.example.myapplication文件夾下，新建一個(gè)Java Class文件

?命名為L(zhǎng)ineChartFunction

?第二步、在LineChartFunction添加以下代碼（畫(huà)一條曲線的代碼）。注意：如果想畫(huà)多條曲線，請(qǐng)參考上面我提到的博客。

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; //定義一個(gè)chart類(lèi)型的數(shù)據(jù)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() {//網(wǎng)格的背景是灰色還是白色lineChart.setDrawGridBackground(false);//顯示邊界線，邊界線被加粗lineChart.setDrawBorders(false);//折線圖例 標(biāo)簽 設(shè)置Legend legend = lineChart.getLegend();legend.setForm(Legend.LegendForm.LINE);legend.setTextColor(Color.BLACK); //設(shè)置Legend 文本顏色legend.setTextSize(11f);//折線的對(duì)應(yīng)名稱字的大小//顯示位置legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);legend.setDrawInside(false);//X軸設(shè)置顯示位置在底部xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);xAxis.setGranularity(1f);xAxis.setLabelCount(10);//取消右邊y軸的顯示rightAxis.setEnabled(false); //右側(cè)Y軸不顯示//設(shè)置網(wǎng)格顏色leftAxis.setGridColor(Color.WHITE); //網(wǎng)格線顏色leftAxis.setAxisLineColor(Color.BLACK); //Y軸顏色xAxis.setGridColor(Color.WHITE); //網(wǎng)格線顏色xAxis.setAxisLineColor(Color.BLACK); //X軸顏色//保證Y軸從0開(kāi)始，不然會(huì)上移一點(diǎn)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);//設(shè)置除了點(diǎn)之外折線的顏色//設(shè)置曲線值的圓點(diǎn)是實(shí)心還是空心lineDataSet.setDrawCircleHole(false);//false 實(shí)心 true 空心lineDataSet.setCircleColor(color);//設(shè)置折線上點(diǎn)的顏色也為黑色lineDataSet.setHighLightColor(color);//設(shè)置曲線填充lineDataSet.setDrawFilled(true);//就是曲線下面的顏色lineDataSet.setFillColor(color);//填充顏色lineDataSet.setDrawValues(false);//曲線上每個(gè)點(diǎn)的值，這里是取消顯示lineDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);lineDataSet.setValueTextSize(10f);//設(shè)置顯示值的字體大小lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);//線模式為圓滑曲線（默認(rèn)折線）//添加一個(gè)空的 LineDatalineData = new LineData();lineChart.setData(lineData);lineChart.invalidate();}/*** 動(dòng)態(tài)添加數(shù)據(jù)（一條折線圖）** @param number*/public void addEntry(int number) {//最開(kāi)始的時(shí)候才添加 lineDataSet（一個(gè)lineDataSet 代表一條線）if (lineDataSet.getEntryCount() == 0) {lineData.addDataSet(lineDataSet);}lineChart.setData(lineData);Entry entry = new Entry(lineDataSet.getEntryCount(), number);lineData.addEntry(entry, 0);//通知數(shù)據(jù)已經(jīng)改變lineData.notifyDataChanged();lineChart.notifyDataSetChanged();//設(shè)置在曲線圖中顯示的最大數(shù)量lineChart.setVisibleXRangeMaximum(20);//移到某個(gè)位置lineChart.moveViewToX(lineData.getEntryCount() - 5);}/*** 設(shè)置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布局文件中，只有一個(gè)“Hello World”，這里添加畫(huà)曲線的所需的控件

?第二步、將代碼改為以下代碼，注意：將原始的約束布局androidx.constraintlayout.widget.ConstraintLayout改為線性布局LinearLayout。

并且改為線性布局方向?yàn)榇怪盿ndroid: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="數(shù)據(jù)波形圖:"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="隨機(jī)數(shù)據(jù)"android:id="@+id/button_data1"android:layout_gravity="center" /></LinearLayout></LinearLayout>

?第三步、得到的布局結(jié)果

?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 {//定義畫(huà)圖框變量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, "數(shù)據(jù)", Color.GREEN);dynamicLineChartManager1.setYAxis(100, 0, 10);//最大值，最小值，中間刻度值的數(shù)量//按下按鍵實(shí)現(xiàn)的功能button_data1.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {//數(shù)據(jù)傳入端口dynamicLineChartManager1.addEntry((int) (Math.random() * 100));}});} }

添加的代碼

?5、連接手機(jī)進(jìn)行仿真驗(yàn)證

使用方法：按下“隨機(jī)數(shù)據(jù)”按鍵就會(huì)產(chǎn)生一個(gè)隨機(jī)數(shù)，不停的點(diǎn)擊按鍵，進(jìn)而產(chǎn)生的隨機(jī)數(shù)就構(gòu)成了波形的數(shù)據(jù)點(diǎn)。

?注意：后期如果想顯示單片機(jī)或者云端傳過(guò)來(lái)數(shù)據(jù)的波形，只需要將這里的隨機(jī)數(shù)改為APP接收的數(shù)據(jù)即可。

?第三部分、總結(jié)

1、寫(xiě)在后面

????????需要注意的是，博主這里只是去復(fù)現(xiàn)了別人的代碼，如果想實(shí)現(xiàn)更高級(jí)的波形，比如一張圖畫(huà)多曲線，條形圖等，請(qǐng)參考我上面提及到的博客。

2、完整工程代碼

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

3、QQ群號(hào)?

? ? ? ? 有問(wèn)題的小伙伴現(xiàn)在可以進(jìn)群詢問(wèn)啦，當(dāng)然我所有博客中涉及到的參考資料和工程都在群文件里。之前也在博客中放過(guò)群號(hào)，但是那個(gè)時(shí)候沒(méi)有時(shí)間，群里面的小伙伴發(fā)的消息我都沒(méi)時(shí)間回復(fù)，所以就把群號(hào)給屏蔽了，現(xiàn)在讀研了，有時(shí)間了。歡迎大家的加入，群號(hào)：1020775171。群聊目前處于起步階段，哈哈哈哈哈😂😂😂

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。