通过Handler实现自动添加HelloCharts数据和自动跳转Fragment

于 2021-06-04 17:01:53 发布
阅读量205 收藏 1
点赞数 1
分类专栏： Android笔记 文章标签： android 安卓 java 移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51495235/article/details/117566678
版权

文章目录


写在前面

由于本人初学阶段，写这篇博客是总结所学的知识点，为后面的进阶打好基础

有任何关于代码和表述问题，欢迎评论区指出

楼主最近老师要求做三个Fragment在一个MainActivity中实现自动跳转，每个Fragment中使用流行的图表开源APIHelloCharts，每个HelloCharts都要自动添加数据，并显示当前的温度，湿度或PM值！

三个Fragment分别是

  • 温度曲线图
  • 湿度曲线图
  • PM值曲线图

注意：楼主所用IDE是Eclipse ,API21 ，虚拟机屏幕大小为1280dp*720dp

HelloCharts需要导入jar包，下载途径大家自己可以去找

所用到的颜色都可以在颜色对照表中参考到

话不多说开始上代码

1. 界面布局

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zhuang.hellocharts.MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <FrameLayout
            android:id="@+id/frameLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" >
        </FrameLayout>
    </LinearLayout>

</RelativeLayout>

fragment_humidity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#90d7ec"
    tools:context="com.zhuang.hellocharts.HumidityFragment" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="35dp"
            android:layout_marginTop="10dp"
            android:drawableLeft="@drawable/humidity_off"
            android:text="Humidity实时湿度数据曲线图"
            android:textColor="#ed1941"
            android:textSize="25sp"
            android:textStyle="bold" />
    </LinearLayout>

    <lecho.lib.hellocharts.view.LineChartView
        android:id="@+id/humLineChartView"
        android:layout_width="900dp"
        android:layout_height="500dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:background="#fab27b" />

    <TextView
        android:id="@+id/textViewhum"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/linearLayout1"
        android:layout_marginLeft="272dp"
        android:layout_toRightOf="@+id/linearLayout1"
        android:text="TextView"
        android:textColor="#ed1941"
        android:textSize="16sp"
        android:textStyle="bold" />

</RelativeLayout>

fragment_pm.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffe600"
    tools:context="com.zhuang.hellocharts.PMFragment" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="35dp"
            android:layout_marginTop="10dp"
            android:drawableLeft="@drawable/pm_off"
            android:text="PM2.5实时PM数据曲线图"
            android:textColor="#ed1941"
            android:textSize="20sp"
            android:textStyle="bold" />
    </LinearLayout>

    <lecho.lib.hellocharts.view.LineChartView
        android:id="@+id/pmLineChartView"
        android:layout_width="900dp"
        android:layout_height="500dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:background="#411445" />

    <TextView
        android:id="@+id/textViewpm"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/linearLayout1"
        android:layout_marginLeft="272dp"
        android:layout_toRightOf="@+id/linearLayout1"
        android:text="TextView"
        android:textColor="#ed1941"
        android:textSize="16sp"
        android:textStyle="bold" />

</RelativeLayout>

fragment_temperature.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#444693"
    tools:context="com.zhuang.hellocharts.TemperatureFragment" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="35dp"
            android:layout_marginTop="10dp"
            android:layout_weight="1"
            android:drawableLeft="@drawable/temp_off"
            android:text="Temperature实时温度数据曲线图"
            android:textColor="#ed1941"
            android:textSize="18sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="310dp"
            android:layout_marginTop="10dp"
            android:layout_weight="1"
            android:text="温度"
            android:textColor="#ed1941"
            android:textSize="16sp"
            android:textStyle="bold" />
    </LinearLayout>

    <lecho.lib.hellocharts.view.LineChartView
        android:id="@+id/tempLineChartView"
        android:layout_width="900dp"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:background="#b4532a" />

</RelativeLayout>

2. Activity实现功能

MainActivity

  • 初始化Fragment

  • 这个界面将Fragment添加到FrameLayout中

  • 实现通过Handler和Thread实现界面的自动切换，加几个if判断即可，想要自动，Handler可不能少

  • Handler发消息，根据接收到的消息显示指定的Fragment

package com.zhuang.hellocharts;

import com.czie.assessment.R;

import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;

public class MainActivity extends Activity {

	TextView tempTextView, humTextView, pmTextView;
	int count = 1;
	TemperatureFragment temperatureFragment;
	HumidityFragment humidityFragment;
	PMFragment pmFragment;
	FragmentManager fragmentManager = getFragmentManager();
	Fragment curFragment;

	@Override
	protected void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initFragment();
		showDifferentCharts();
	}
	//将Fragment添加到指定布局
	private void initFragment() {
		// TODO Auto-generated method stub
		temperatureFragment = new TemperatureFragment();
		humidityFragment = new HumidityFragment();
		pmFragment = new PMFragment();

		FragmentTransaction transaction = fragmentManager.beginTransaction();
		transaction.add(R.id.frameLayout, temperatureFragment);
		transaction.add(R.id.frameLayout, humidityFragment);
		transaction.add(R.id.frameLayout, pmFragment);
		showFragment(temperatureFragment);
		transaction.commit();
	}

	public void showFragment(Fragment fragment) {
		if (curFragment == fragment) {
			return;
		}
		FragmentTransaction transaction = fragmentManager.beginTransaction();
		transaction.hide(temperatureFragment);
		transaction.hide(humidityFragment);
		transaction.hide(pmFragment);
		transaction.show(fragment);
		transaction.commit();
		curFragment = fragment;
	}

	Handler handler = new Handler() {
		@Override
		public void handleMessage(Message msg) {
			switch (msg.what) {
			case 1:
				showFragment(temperatureFragment);
				break;
			case 2:
				showFragment(humidityFragment);
				break;
			case 3:
				showFragment(pmFragment);
				break;
			}
		}
	};

	// 来回切换
	public void showDifferentCharts() {
		new Thread() {
			@Override
			public void run() {

				while (true) {
					if (count == 4) {
						count = 0;
					}
					try {
						sleep(5000);
						handler.sendEmptyMessage(count);
					} catch (InterruptedException e) {
						e.printStackTrace();
					}
					count++;
				}
			}
		}.start();
	}

}

3. 实现图表自动添加数据

  • HelloCharts有关方法参考下列代码注释，很详细

  • 首先肯定不用想，肯定用Handler和Thread来实现自动添加数据

  • 用到集合和数组用来存放数据

分析下关键代码 以一个Fragment为例，其余都一样参考即可

  • 该方法就可以是X轴上的数据是以时间通过处理显示，不会重复
public String[] getXData(int historysecond) {
		String historyDates[] = new String[historysecond];
		for (int i = 0; i < historysecond; i++) {
			// 获取时间
			Calendar calendar = Calendar.getInstance();
			// 获取秒数
			int second = calendar.get(calendar.SECOND);
			// 获取分钟
			int mins = calendar.get(calendar.MINUTE);
			historyDates[i] = String.format("%02d", mins) + ":"
					+ String.format("%02d", second);
		}
		return historyDates;
	}
  • 该方法就是可以一直显示当前的温度，和保证集合的个数不会超过7
public void readSensorData() {
		new Thread() {
			public void run() {
				super.run();
				while (true) {

					for (int i = 0; i < valus.length; i++) {
						if (flag != 0) {
							flag = valus[i];
						} else {
							flag = valus[i];
						}
						axisTimeValues = getXData(8);
						sensorPointValuesList.add(valus[i]);

						if (sensorPointValuesList.size() > 7) {
							sensorPointValuesList.remove(0);
						}
						// sensorPointValuesList.add(valus[i]);
						handler.sendEmptyMessage(0);
						try {
							sleep(1000);

						} catch (InterruptedException e) {
							// TODO Auto-generated catch block
							e.printStackTrace();
						}
					}
				}
			};
		}.start();
	}
  • 在Handler里调用该方法，每次显示完数据后，就要清空一次X轴和Y轴的数据，不断往集合里添加数据
public void showCharts() {
		mAxisValues.clear();
		mPointValues.clear();
		getAxisPoints();
		getAxisXLables();
		initLineChart("时间", "湿度");
	}

HumidityFragment

package com.zhuang.hellocharts;

import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;

import com.czie.assessment.R;

import lecho.lib.hellocharts.gesture.ContainerScrollType;
import lecho.lib.hellocharts.gesture.ZoomType;
import lecho.lib.hellocharts.model.Axis;
import lecho.lib.hellocharts.model.AxisValue;
import lecho.lib.hellocharts.model.Line;
import lecho.lib.hellocharts.model.LineChartData;
import lecho.lib.hellocharts.model.PointValue;
import lecho.lib.hellocharts.model.ValueShape;
import lecho.lib.hellocharts.model.Viewport;
import lecho.lib.hellocharts.view.LineChartView;
import android.app.Fragment;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class HumidityFragment extends Fragment {
	private LineChartView lineChart;

	// x轴
	String axisTimeValues[] = new String[7];
	// y轴
	List<Integer> sensorPointValuesList = new ArrayList<Integer>();
	int[] valus = { 10, 15, 25, 20, 5, 15, 0 };
	int flag = 0;
	private TextView textViewhum;
	private List<PointValue> mPointValues = new ArrayList<PointValue>();
	// 存放x坐标轴上的数据的集合
	private List<AxisValue> mAxisValues = new ArrayList<AxisValue>();

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		return inflater.inflate(R.layout.fragment_humidity, container, false);
	}

	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onActivityCreated(savedInstanceState);
		lineChart = (LineChartView) getActivity().findViewById(
				R.id.humLineChartView);
		textViewhum = (TextView) getActivity().findViewById(R.id.textViewhum);
		readSensorData();
	}

	public void readSensorData() {
		new Thread() {
			public void run() {
				super.run();
				while (true) {

					for (int i = 0; i < valus.length; i++) {
						if (flag != 0) {
							flag = valus[i];
						} else {
							flag = valus[i];
						}
						axisTimeValues = getXData(8);
						sensorPointValuesList.add(valus[i]);

						if (sensorPointValuesList.size() > 7) {
							sensorPointValuesList.remove(0);
						}
						// sensorPointValuesList.add(valus[i]);
						handler.sendEmptyMessage(0);
						try {
							sleep(1000);

						} catch (InterruptedException e) {
							// TODO Auto-generated catch block
							e.printStackTrace();
						}
					}
				}
			};
		}.start();
	}

	// x数据的获取
	public String[] getXData(int historysecond) {
		String historyDates[] = new String[historysecond];
		for (int i = 0; i < historysecond; i++) {
			// 获取时间
			Calendar calendar = Calendar.getInstance();
			// 获取秒数
			int second = calendar.get(calendar.SECOND);
			// 获取分钟
			int mins = calendar.get(calendar.MINUTE);
			historyDates[i] = String.format("%02d", mins) + ":"
					+ String.format("%02d", second);
		}
		return historyDates;
	}

	Handler handler = new Handler() {
		public void handleMessage(Message msg) {
			showCharts();
			textViewhum.setText("当前湿度:" + flag + "RH%");

		};
	};

	public void showCharts() {
		mAxisValues.clear();
		mPointValues.clear();
		getAxisPoints();
		getAxisXLables();
		initLineChart("时间", "湿度");
	}

	private void initLineChart(String xName, String yName) {
		// TODO Auto-generated method stub
		Line line = new Line(mPointValues)
				.setColor(Color.parseColor("#ef5b9c")); // 折线的颜色（橙色）
		List<Line> lines = new ArrayList<Line>();
		line.setShape(ValueShape.DIAMOND); // 折线图上每个数据的形状
		line.setCubic(true); // 曲线是否平滑，即是曲线还是折线
		line.setFilled(false); // 是否填充曲线的面积
		line.setHasLabels(true); // 曲线的数据坐标是否加上备注
		line.setHasLines(true); // 是否用线显示
		line.setHasPoints(true); // 是否显示圆点
		lines.add(line);
		LineChartData data = new LineChartData();
		data.setLines(lines);

		// 坐标轴
		Axis axisX = new Axis(); // x轴
		axisX.setName(xName);
		axisX.setHasTiltedLabels(true); // x轴字体是斜还是直
		axisX.setTextColor(Color.WHITE); // 字体颜色
		axisX.setTextSize(10); // 字体大小
		axisX.setMaxLabelChars(10); // 最多几个x轴坐标
		axisX.setValues(mAxisValues); // 填充x轴的坐标名称
		data.setAxisXBottom(axisX); // x轴在底部
		axisX.setHasLines(true); // x轴分割线

		Axis axisY = new Axis(); // y轴
		axisY.setName(yName); // y轴标注
		axisY.setTextSize(10);
		data.setAxisYLeft(axisY); // y轴在左边
		// 设置行为属性，支持缩放、滑动和平移
		lineChart.setInteractive(true);
		lineChart.setZoomType(ZoomType.HORIZONTAL);
		lineChart.setMaxZoom((float) 2); // 最大方法比例
		lineChart.setContainerScrollEnabled(true,
				ContainerScrollType.HORIZONTAL);
		lineChart.setLineChartData(data);
		lineChart.setVisibility(View.VISIBLE);
		Viewport v = new Viewport(lineChart.getMaximumViewport());
		// y轴最高值
		v.top = 100;
		// y轴最低值
		v.bottom = 0;
		lineChart.setMaximumViewport(v);
		v.left = 0;
		v.right = 7;
		lineChart.setCurrentViewport(v);
	}

	private void getAxisXLables() {
		// TODO Auto-generated method stub
		for (int i = 0; i < axisTimeValues.length; i++) {
			mAxisValues.add(new AxisValue(i).setLabel(axisTimeValues[i]));
		}
	}

	private void getAxisPoints() {
		for (int i = 0; i < sensorPointValuesList.size(); i++) {
			mPointValues.add(new PointValue(i, sensorPointValuesList.get(i)));
		}
	}
}

PMFragment

package com.zhuang.hellocharts;

import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;

import com.czie.assessment.R;

import lecho.lib.hellocharts.gesture.ContainerScrollType;
import lecho.lib.hellocharts.gesture.ZoomType;
import lecho.lib.hellocharts.model.Axis;
import lecho.lib.hellocharts.model.AxisValue;
import lecho.lib.hellocharts.model.Line;
import lecho.lib.hellocharts.model.LineChartData;
import lecho.lib.hellocharts.model.PointValue;
import lecho.lib.hellocharts.model.ValueShape;
import lecho.lib.hellocharts.model.Viewport;
import lecho.lib.hellocharts.view.LineChartView;
import android.app.Fragment;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class PMFragment extends Fragment {

	private LineChartView lineChart;

	// x轴
	String axisTimeValues[] = new String[7];
	// y轴
	List<Integer> sensorPointValuesList = new ArrayList<Integer>();
	int[] valus = { 20, 45, 10, 50, 60, 24, 36 };
	int flag = 0;
	private TextView textViewpm;
	private List<PointValue> mPointValues = new ArrayList<PointValue>();
	// 存放x坐标轴上的数据的集合
	private List<AxisValue> mAxisValues = new ArrayList<AxisValue>();

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		return inflater.inflate(R.layout.fragment_pm, container, false);
	}

	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onActivityCreated(savedInstanceState);
		lineChart = (LineChartView) getActivity().findViewById(
				R.id.pmLineChartView);
		textViewpm = (TextView) getActivity().findViewById(R.id.textViewpm);
		readSensorData();
	}

	public void readSensorData() {
		new Thread() {
			public void run() {
				super.run();
				while (true) {

					for (int i = 0; i < valus.length; i++) {
						if (flag != 0) {
							flag = valus[i];
						} else {
							flag = valus[i];
						}
						axisTimeValues = getXData(8);
						sensorPointValuesList.add(valus[i]);

						if (sensorPointValuesList.size() > 7) {
							sensorPointValuesList.remove(0);
						}
						// sensorPointValuesList.add(valus[i]);
						handler.sendEmptyMessage(0);
						try {
							sleep(1000);

						} catch (InterruptedException e) {
							// TODO Auto-generated catch block
							e.printStackTrace();
						}
					}
				}
			};
		}.start();
	}

	// x数据的获取
	public String[] getXData(int historysecond) {
		String historyDates[] = new String[historysecond];
		for (int i = 0; i < historysecond; i++) {
			// 获取时间
			Calendar calendar = Calendar.getInstance();
			// 获取秒数
			int second = calendar.get(calendar.SECOND);
			// 获取分钟
			int mins = calendar.get(calendar.MINUTE);
			historyDates[i] = String.format("%02d", mins) + ":"
					+ String.format("%02d", second);
		}
		return historyDates;
	}

	Handler handler = new Handler() {
		public void handleMessage(Message msg) {
			showCharts();
			textViewpm.setText("当前PM值:" + flag + "ug/m3");

		};
	};

	public void showCharts() {
		mAxisValues.clear();
		mPointValues.clear();
		getAxisPoints();
		getAxisXLables();
		initLineChart("时间", "PM");
	}

	private void initLineChart(String xName, String yName) {
		// TODO Auto-generated method stub
		Line line = new Line(mPointValues)
				.setColor(Color.parseColor("#6d8346")); // 折线的颜色（橙色）
		List<Line> lines = new ArrayList<Line>();
		line.setShape(ValueShape.CIRCLE); // 折线图上每个数据的形状
		line.setCubic(true); // 曲线是否平滑，即是曲线还是折线
		line.setFilled(false); // 是否填充曲线的面积
		line.setHasLabels(true); // 曲线的数据坐标是否加上备注
		line.setHasLines(true); // 是否用线显示
		line.setHasPoints(true); // 是否显示圆点
		lines.add(line);
		LineChartData data = new LineChartData();
		data.setLines(lines);

		// 坐标轴
		Axis axisX = new Axis(); // x轴
		axisX.setName(xName);
		axisX.setHasTiltedLabels(true); // x轴字体是斜还是直
		axisX.setTextColor(Color.WHITE); // 字体颜色
		axisX.setTextSize(10); // 字体大小
		axisX.setMaxLabelChars(10); // 最多几个x轴坐标
		axisX.setValues(mAxisValues); // 填充x轴的坐标名称
		data.setAxisXBottom(axisX); // x轴在底部
		axisX.setHasLines(true); // x轴分割线

		Axis axisY = new Axis(); // y轴
		axisY.setName(yName); // y轴标注
		axisY.setTextSize(10);
		data.setAxisYLeft(axisY); // y轴在左边
		// 设置行为属性，支持缩放、滑动和平移
		lineChart.setInteractive(true);
		lineChart.setZoomType(ZoomType.HORIZONTAL);
		lineChart.setMaxZoom((float) 2); // 最大方法比例
		lineChart.setContainerScrollEnabled(true,
				ContainerScrollType.HORIZONTAL);
		lineChart.setLineChartData(data);
		lineChart.setVisibility(View.VISIBLE);
		Viewport v = new Viewport(lineChart.getMaximumViewport());
		// y轴最高值
		v.top = 100;
		// y轴最低值
		v.bottom = 0;
		lineChart.setMaximumViewport(v);
		v.left = 0;
		v.right = 7;
		lineChart.setCurrentViewport(v);
	}

	private void getAxisXLables() {
		// TODO Auto-generated method stub
		for (int i = 0; i < axisTimeValues.length; i++) {
			mAxisValues.add(new AxisValue(i).setLabel(axisTimeValues[i]));
		}
	}

	private void getAxisPoints() {
		for (int i = 0; i < sensorPointValuesList.size(); i++) {
			mPointValues.add(new PointValue(i, sensorPointValuesList.get(i)));
		}
	}
}

TemperatureFragment

package com.zhuang.hellocharts;

import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;

import com.czie.assessment.R;

import lecho.lib.hellocharts.gesture.ContainerScrollType;
import lecho.lib.hellocharts.gesture.ZoomType;
import lecho.lib.hellocharts.model.Axis;
import lecho.lib.hellocharts.model.AxisValue;
import lecho.lib.hellocharts.model.Line;
import lecho.lib.hellocharts.model.LineChartData;
import lecho.lib.hellocharts.model.PointValue;
import lecho.lib.hellocharts.model.ValueShape;
import lecho.lib.hellocharts.model.Viewport;
import lecho.lib.hellocharts.view.LineChartView;
import android.app.Fragment;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class TemperatureFragment extends Fragment {

	private LineChartView lineChart;

	// x轴
	String axisTimeValues[] = new String[7];
	// y轴
	List<Integer> sensorPointValuesList = new ArrayList<Integer>();
	int[] valus = { 50, 27, 37, 47, 27, 45, 78 };

	private List<PointValue> mPointValues = new ArrayList<PointValue>();
	// 存放x坐标轴上的数据的集合
	private List<AxisValue> mAxisValues = new ArrayList<AxisValue>();
	int flag = 0;
	private TextView textView3;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		return inflater
				.inflate(R.layout.fragment_temperature, container, false);
	}

	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onActivityCreated(savedInstanceState);
		lineChart = (LineChartView) getActivity().findViewById(
				R.id.tempLineChartView);
		textView3 = (TextView) getActivity().findViewById(R.id.textView3);
		readSensorData();
	}

	public void readSensorData() {
		new Thread() {
			public void run() {
				super.run();
				while (true) {

					for (int i = 0; i < valus.length; i++) {
						if (flag != 0) {
							flag = valus[i];
						} else {
							flag = valus[i];
						}
						axisTimeValues = getXData(8);
						sensorPointValuesList.add(valus[i]);

						if (sensorPointValuesList.size() > 7) {
							sensorPointValuesList.remove(0);
						}
						// sensorPointValuesList.add(valus[i]);

						handler.sendEmptyMessage(0);
						try {
							sleep(1000);

						} catch (InterruptedException e) {
							// TODO Auto-generated catch block
							e.printStackTrace();
						}
					}
				}
			};
		}.start();
	}

	// x数据的获取
	public String[] getXData(int historysecond) {
		String historyDates[] = new String[historysecond];
		for (int i = 0; i < historysecond; i++) {
			// 获取时间
			Calendar calendar = Calendar.getInstance();
			// 获取秒数
			int second = calendar.get(calendar.SECOND);
			// 获取分钟
			int mins = calendar.get(calendar.MINUTE);
			historyDates[i] = String.format("%02d", mins) + ":"
					+ String.format("%02d", second);
		}
		return historyDates;
	}

	Handler handler = new Handler() {
		public void handleMessage(Message msg) {
			showCharts();
			textView3.setText("当前温度:" + flag + "℃");

		};
	};

	public void showCharts() {
		mAxisValues.clear();
		mPointValues.clear();
		getAxisPoints();
		getAxisXLables();
		initLineChart("时间", "温度");
	}

	private void initLineChart(String xName, String yName) {
		// TODO Auto-generated method stub
		Line line = new Line(mPointValues)
				.setColor(Color.parseColor("#d71345")); // 折线的颜色（红色）
		List<Line> lines = new ArrayList<Line>();
		line.setShape(ValueShape.SQUARE); // 折线图上每个数据的形状
		line.setCubic(true); // 曲线是否平滑，即是曲线还是折线
		line.setFilled(false); // 是否填充曲线的面积
		line.setHasLabels(true); // 曲线的数据坐标是否加上备注
		line.setHasLines(true); // 是否用线显示
		line.setHasPoints(true); // 是否显示圆点
		lines.add(line);
		LineChartData data = new LineChartData();
		data.setLines(lines);

		// 坐标轴
		Axis axisX = new Axis(); // x轴
		axisX.setName(xName);
		axisX.setHasTiltedLabels(true); // x轴字体是斜还是直
		axisX.setTextColor(Color.WHITE); // 字体颜色
		axisX.setTextSize(10); // 字体大小
		axisX.setMaxLabelChars(10); // 最多几个x轴坐标
		axisX.setValues(mAxisValues); // 填充x轴的坐标名称
		data.setAxisXBottom(axisX); // x轴在底部
		axisX.setHasLines(true); // x轴分割线

		Axis axisY = new Axis(); // y轴
		axisY.setName(yName); // y轴标注
		axisY.setTextSize(10);
		data.setAxisYLeft(axisY); // y轴在左边
		// 设置行为属性，支持缩放、滑动和平移
		lineChart.setInteractive(true);
		lineChart.setZoomType(ZoomType.HORIZONTAL);
		lineChart.setMaxZoom((float) 2); // 最大方法比例
		lineChart.setContainerScrollEnabled(true,
				ContainerScrollType.HORIZONTAL);
		lineChart.setLineChartData(data);
		lineChart.setVisibility(View.VISIBLE);
		Viewport v = new Viewport(lineChart.getMaximumViewport());
		// y轴最高值
		v.top = 100;
		// y轴最低值
		v.bottom = 0;
		lineChart.setMaximumViewport(v);
		v.left = 0;
		v.right = 7;
		lineChart.setCurrentViewport(v);
	}

	private void getAxisXLables() {
		// TODO Auto-generated method stub
		for (int i = 0; i < axisTimeValues.length; i++) {
			mAxisValues.add(new AxisValue(i).setLabel(axisTimeValues[i]));
		}
	}

	private void getAxisPoints() {
		for (int i = 0; i < sensorPointValuesList.size(); i++) {
			mPointValues.add(new PointValue(i, sensorPointValuesList.get(i)));
		}
	}
}

最后通过简单动图来看下效果
2Ja8eS.gif
总结

  • 布局做的有点简单😂,在实现功能的基础上再美化就更好了
  • 还有许多不足的地方仍需努力💪，比如代码优化，对Hellocharts熟练运用

写在最后

  • 有任何错误欢迎评论区指出，及时改正！
康小庄
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Android HelloChart使用总结（折线数据点的点击响应，多条折线绘制方法）
NYH19961125的博客
03-24 2342
在论文设计中，要实现点击数据点后，能够显示相应数据点的信息。涉及到的问题有： 1.如何找到点击的数据点 2.多条折线的绘制。 实现的思路如为：在HelloChart提供了数据点的选取相应监听器，在监听器中进行需要实现功能的编写。 先上代码： lineChart.setOnTouchListener(new View.OnTouchListener() { ...
HellloChart监听滑动到折线图表尽头动态加载数据
06-21
一个动态加载数据的图表，首次进入加载20条，并且视图显示在最右边，然后滑动到最左边的时候会再动态加载20条数据
[Android]HelloCharts实现动态加载数据
游击士协会
07-04 2922
最近项目中用到了折线图,找了几个.最后还是选择了hellocharts.需求要加载八万个点,这么多直接就卡死了,所以做了修改,实现边滑动边加载点. hellocharts里的ChartScroller.class里有用来计算滚动时x轴可见距离的方法,那么可以在这里设置回调函数,将当前屏幕可见的x轴位置获取出来,然后在list中取对应位置的点去加载. 1.在ChartScroller中加入回调函
HelloCharts数据刷新
NYH19961125的博客
04-13 1354
关于HelloCharts的用法参考： https://blog.csdn.net/qq_35563053/article/details/65628813 关于数据刷新的问题，涉及到的关键方法有： getAxisPoints();//获取坐标点 /** * 图表的每个点的显示 */ private void getAxisPoints() { for ...
HelloChart折线图动态刷新--模拟心电图效果源码实例下载
05-03
在前人代码上改编，通过定时器完成HelloChart折线图动态刷新
开源的HelloCharts源码修改实现动态画折线图
11-03
Android中对HelloChart的修改，实现动态绘制折线图
ViewPager+Fragment实现自动循环滚动
03-08
在Android开发中，`ViewPager`是一个非常常用的组件，它允许用户通过左右滑动来浏览多个页面...开发者可以通过研究这个项目，学习如何结合`ViewPager`和`Fragment`来实现自动循环滚动效果，并将其应用到自己的项目中。
android实现App活动定时自动跳转效果
01-04
App的小功能点，很简单几十行代码就可以实现 主页面代码 package com.buildingbuilding; import android.content.Intent; import android.os.Handler; import android.os.Message; import android.support.v7.app....
Android App中用Handler实现ViewPager页面的自动切换
01-04
在很多电商网页及app上都有自动切换的商品的推广快，感觉体验挺不错的，正好今天学习使用ViewPager，因此也实现了一个功能类似的demo。 下面是其中的两个截图： 实现一个自动播放功能的ViewPager，要做的主要有...
ViewPager实现带引导小圆点与自动跳转的引导界面
08-28
实现自动跳转，可以利用Handler和Runnable来延迟执行某个任务，例如在一定时间后跳转到主界面。在引导界面的最后一页，我们设置一个Runnable，让其在特定时间（如3秒）后发送消息给Handler，Handler接收到消息后...
HelloCharts和MPAndroidChart图表
11-16
HelloCharts和MPAndroidChart图表
Android中对HelloCharts的修改，实现动态绘制折线图
一只蜗牛的专栏
11-03 1万+
近期的项目中涉及到了相关图标的绘制，选择了第三方的开源图标库—HelloChart。由于项目需求需要动态绘制折线图，所以对该开源框架的折线图部分进行了相关的修改。实现了以下功能：1.动态绘制折线图 2. 可实现折线图的上的点有多种颜色 3. 静态绘制折线图表时，可以在折线的最后一个点上进行不一样的标注。 先展示一下效果吧： 1.动态绘制折线图： 2.可设置
HelloChart折线图动态刷新--模拟心电图效果
热门推荐
wangwj650的博客
05-03 1万+
通过HelloCharts绘制折线图，利用定时器完成动态刷新，模拟实现心电图效果
HelloChart框架动态加载数据
u014736095的专栏
06-21 2935
一个动态加载数据的图表，首次进入加载20条，并且视图显示在最右边，然后滑动到最左边的时候会再动态加载20条数据
Android中在Fragment使用HelloChart绘制折线图，动态刷新不卡顿
张小头的博客
06-20 1614
前言 今天来给大家介绍HelloChart折线图的简单使用，因为参加中软杯做视图展示的时候刚好要使用折线图，于是在网上通过一些博主的文章学习了一下如何使用HelloChart（可能代码内有一些借鉴了，希望不要介意，主要是学习如何简单使用）。 但是我们都知道凡是看起来简单，使用的时候就会遇到一些奇奇怪怪的问题，这些对我这个经验不足的小菜鸡实在是太常见了。我在项目中使用折线图的目地是显示从外部通过...
android自定义折线图y轴在右边,使用hellocharts绘制折线图 并自定义Y轴
weixin_35291771的博客
05-25 502
android:id="@+id/linechart"android:layout_width="match_parent"android:layout_height="200dp"android:layout_marginLeft="5dp"android:layout_marginRight="10dp"android:paddingTop="10dp" />主要代码：private L...
Android——hellocharts实现折线图显示（静态、动态数据更新）
零碎@流年絮语 的博客
06-02 3110
Android——折线图显示 利用 hellocharts-library-1.5.8 jar包实现折线图 hellocharts-library-1.5.8.jar网盘链接 链接：https://pan.baidu.com/s/1sKVNOxQ9U4rR81v1U1OazQ 提取码：i2nn 复制这段内容后打开百度网盘手机App，操作更方便哦 使用的对象如下 横轴数据 和 纵轴数据 （转换为LineChartView可以录入的集合对象） 单条线的对象 ——> 线的集合 数据对象 折线控件 使
Android Handler机制详解：核心类与实现原理
Android的Handler机制是Android应用中核心的消息处理框架，用于在不同的线程间同步和传递数据。本文将深入解析这一机制的工作原理，主要涉及以下几个关键组件： 1. **ActivityThread**：它是Android应用程序的主...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值