【Android Studio学习】第二篇、APP实现画简易的波形图
目錄
第一部分、前言
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)題。
- 上一篇: 「大数据」告诉你,互联网行业哪个职位比较
- 下一篇: 2019Android面试总结(附相关架