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

Posted 2021-07-19 康小庄

文章目录

• • 1. 界面布局
  • 2. Activity实现功能
  • 3. 实现图表自动添加数据

写在前面

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

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

楼主最近老师要求做三个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以上是关于通过Handler实现自动添加HelloCharts数据和自动跳转Fragment的主要内容，如果未能解决你的问题，请参考以下文章
 
 ViewPager自动滚动
 Android消息机制和原理
 阐述Handler的实现原理
 [Android] Android 定时任务实现的三种方法(以SeekBar的进度自动实现为例)
 android消息处理机制之2handler与looper，MessageQueue：的关系
 ViewPager和View的事件响应规则