开发者社区> 字节卷动> 正文

我的Android进阶之旅------>Android利用温度传感器实现带动画效果的电子温度计

简介:      要想实现带动画效果的电子温度计,需要以下几个知识点: 1、温度传感器相关知识。 2、ScaleAnimation动画相关知识,来进行水印刻度的缩放效果。 3、android:layout_weight属性的合理运用,关于android:layout_we...
+关注继续查看

     要想实现带动画效果的电子温度计,需要以下几个知识点:

1、温度传感器相关知识。

2、ScaleAnimation动画相关知识,来进行水印刻度的缩放效果。

3、android:layout_weight属性的合理运用,关于android:layout_weight属性的讲解,可以参考:《我的Android进阶之旅------>关于android:layout_weight属性的一个面试题》

地址为:http://blog.csdn.net/ouyang_peng/article/details/13236519



     首先来看看本实例的具体效果,然后再来具体实现功能。

1、将温度强制设置为0度时,画面如下:

 

 

2、将温度强制设置为50度时,画面如下:

 

 

3、将温度强制设置为-20度时,画面如下:

 

 

4、从传感器动态得到温度值,并实时更新画面,如下所示:

 

                                                                                          

本文《我的Android进阶之旅------>Android利用温度传感器实现有动画效果的电子温度计

(地址:http://blog.csdn.net/ouyang_peng/article/details/48790289)

 

 

首先来看布局文件的代码:layout_thermometer.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Parent"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/background_thermometer"
    android:clipChildren="false"
    android:clipToPadding="false"
    android:gravity="bottom|center"
    android:keepScreenOn="true"
    android:orientation="vertical" >

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="bottom|center" >

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

            <!-- 顶部图片 -->
            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/background_top" />

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="100.0"
                android:orientation="horizontal" >

                <!-- 横向空白占1份 -->
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:gravity="bottom|center" >
                </LinearLayout>
                
                <!-- 横向占4份 -->
                <LinearLayout
                    android:id="@+id/meter"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:layout_weight="4"
                    android:animationCache="true"
                    android:background="@drawable/thermometer_dial"
                    android:clipChildren="false"
                    android:clipToPadding="false"
                    android:persistentDrawingCache="all" >

                    <!-- 横向占189份,刻度表左边刻度摄氏温度所占比例 -->
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="fill_parent"
                        android:layout_weight="189"
                        android:visibility="invisible" />
                    
                    <!-- 横向占69份,刻度表水银柱子所在区域所占比例 -->
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="fill_parent"
                        android:layout_weight="69"
                        android:orientation="vertical" >

                        <!-- 竖向占131.0份,刻度表50°以上的部分 -->
                        <LinearLayout
                            android:layout_width="fill_parent"
                            android:layout_height="0dp"
                            android:layout_weight="131.0" />
                        
                        <!--
                              	竖向占773.0份,水银针正好等于刻度表从-20°到50° 
 							   	因为柱子和圆球直接有点断层,把773变成774
 							   	默认不显示柱子,当有传感器数据时,才显示出来 
                        -->
                        <LinearLayout
                            android:id="@+id/alcohol"
                            android:layout_width="fill_parent"
                            android:layout_height="0dp"
                            android:layout_weight="774.0"
                            android:background="@drawable/alcohol"
                            android:orientation="horizontal"
                            android:visibility="invisible" />
                        
                        <!--
                             	竖向占104.0份 ,刻度表-20°以上的部分 
								因为柱子和圆球直接有点断层,把104变成103
                        -->
                        <LinearLayout
                            android:layout_width="fill_parent"
                            android:layout_height="0dp"
                            android:layout_weight="103.0" />
                    </LinearLayout>
                    
                    <!-- 横向占189份,刻度表右边刻度华氏温度所占比例 -->
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="fill_parent"
                        android:layout_weight="187"
                        android:visibility="invisible" />
                </LinearLayout>
                
                <!-- 横向占4份 -->
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="150dp"
                    android:layout_weight="4"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:paddingLeft="30dp" >

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

                        <!-- 摄氏温度 -->
                        <TextView
                            android:id="@+id/thermo_c"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="#e9bc57"
                            android:textSize="38sp" />
                        <!-- 摄氏温度图标 -->
                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:paddingLeft="2dp"
                            android:src="@drawable/thermo_c" />
                    </LinearLayout>
                    
                    <!-- 分割线 -->
                    <ImageView
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:src="@drawable/divider" />

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

                        <!-- 华氏温度 -->
                        <TextView
                            android:id="@+id/thermo_f"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="#dadada"
                            android:textSize="18sp" />
                        <!-- 华氏温度图标 -->
                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:paddingLeft="2dp"
                            android:src="@drawable/thermo_f" />
                    </LinearLayout>
                </LinearLayout>

                <!-- 横向空白占1份 -->
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:gravity="bottom|center" >
                </LinearLayout>
            </LinearLayout>
            
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center_vertical"
                android:orientation="vertical" >

                <!-- 作者信息-->
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="#ffff00"
                    android:textSize="18sp"
                    android:text="@string/author"
                    android:layout_gravity="center"/>
                <!-- 博客地址 -->
                 <TextView
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:autoLink="web"
                     android:text="@string/blog_address"
                     android:textColor="#ffff00"
                     android:textSize="18sp" />
            </LinearLayout>
            
            <!-- 尾部图片 -->
            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/background_bottom" />
        </LinearLayout>
    </FrameLayout>

</LinearLayout>


接着看Activity的代码:ThermometerActivity.java

package com.oyp.thermometer;

import android.app.Activity;
import android.content.Context;
import android.hardware.Sensor;
import android.hardware.SensorEvent;
import android.hardware.SensorEventListener;
import android.hardware.SensorManager;
import android.os.Bundle;
import android.view.animation.ScaleAnimation;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * @author 欧阳鹏
 * @date 2015年9月14日 <br>
 *       <a href="http://blog.csdn.net/ouyang_peng">欧阳鹏CSDN博客地址</a></n>
 */
public class ThermometerActivity extends Activity implements SensorEventListener {
	private LinearLayout alcohol;
	private LinearLayout meter;
	private SensorManager mSensorManager;
	private Sensor temperatureSensor;
	private TextView thermo_c;
	private TextView thermo_f;

	public float staratemp;
	public float temp;
	private float temperatureC;

	/**
	 * 获取华氏温度
	 * 
	 * @author ouyang
	 * @date 2015年9月14日
	 * @return
	 */
	public float getTemperatureF() {
		float temperatureF = (temperatureC * 9 / 5) + 32;
		return getFloatOne(temperatureF);
	}

	/**
	 * 保留一位小数点
	 * 
	 * @author ouyang
	 * @date 2015年9月14日
	 * @param tempFloat
	 * @return
	 */
	public float getFloatOne(float tempFloat) {
		return (float) (Math.round(tempFloat * 10)) / 10;
	}

	/**
	 * 获取摄氏温度
	 * 
	 * @author ouyang
	 * @date 2015年9月14日
	 * @return
	 */
	public float getTemperatureC() {
		return getFloatOne(temperatureC);
	}

	public void setTemperatureC(float temperatureC) {
		this.temperatureC = temperatureC;
	}

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.layout_thermometer);
		meter = ((LinearLayout) findViewById(R.id.meter));
		alcohol = ((LinearLayout) findViewById(R.id.alcohol));
		thermo_c = (TextView) findViewById(R.id.thermo_c);
		thermo_f = (TextView) findViewById(R.id.thermo_f);
	}

	@Override
	protected void onResume() {
		super.onResume();
		mSensorManager = (SensorManager) getSystemService(Context.SENSOR_SERVICE);
		temperatureSensor = mSensorManager.getDefaultSensor(Sensor.TYPE_AMBIENT_TEMPERATURE);
		mSensorManager.registerListener(this, temperatureSensor, SensorManager.SENSOR_DELAY_NORMAL);
	}

	@Override
	public final void onSensorChanged(SensorEvent event) {
		float temperatureValue = event.values[0]; // 得到温度
		setTemperatureC(temperatureValue);// 设置温度
		mUpdateUi();// 更新UI
	}

	@Override
	public void onAccuracyChanged(Sensor sensor, int accuracy) {

	}

	/**
	 * 更新刻度上水银柱的长度
	 * 
	 * @author ouyang
	 * @date 2015年9月14日
	 */
	private void mUpdateUi() {
		ScaleAnimation localScaleAnimation1 = new ScaleAnimation(1.0F, 1.0F, this.staratemp, this.temp, 1, 0.5F, 1,
				1.0F);
		localScaleAnimation1.setDuration(2000L);
		localScaleAnimation1.setFillEnabled(true);
		localScaleAnimation1.setFillAfter(true);
		this.alcohol.startAnimation(localScaleAnimation1);
		this.staratemp = this.temp;

		ScaleAnimation localScaleAnimation2 = new ScaleAnimation(1.0F, 1.0F, 1.0F, 1.0F, 1, 0.5F, 1, 0.5F);
		localScaleAnimation2.setDuration(10L);
		localScaleAnimation2.setFillEnabled(true);
		localScaleAnimation2.setFillAfter(true);
		this.meter.startAnimation(localScaleAnimation2);

		// 把刻度表看出总共700份,如何计算缩放比例。从-20°到50°。
		// 例如,现在温度是30°的话,应该占(30+20)*10=500份 其中20是0到-20°所占有的份
		this.temp = (float) ((20.0F + getTemperatureC()) * 10) / (70.0F * 10);

		thermo_c.setText(getTemperatureC() + "");
		thermo_f.setText(getTemperatureF() + "");
	}
}


 

 具体代码可以在下面地址中免费下载:

 

 http://download.csdn.net/detail/qq446282412/9145961




        ====================================================================================

  作者:欧阳鹏  欢迎转载,与人分享是进步的源泉!

  转载请保留原文地址http://blog.csdn.net/ouyang_peng

====================================================================================



 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案
Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案
298 0
Android自定义View,制作饼状图带动画效果
一个简单的自定义view饼状图,加入了动画效果
34 0
android平滑动画效果--搜索框
android平滑动画效果--搜索框
100 0
Android RecyclerVIew 列表实现 编辑、单选、全选、删除、动画效果(附源码)
Android RecyclerVIew 列表实现 编辑、单选、全选、删除、动画效果(附源码)
203 0
Android控件显示、隐藏时,增加动画效果
Android控件显示、隐藏时,增加动画效果
227 0
『Android开源控件』通过Lottie实现复杂动画效果
好久没有更新Android系列的文章了,其实是好久没学了。从今天起重操旧业,好好把这个系列学下去。 之前在做课设的时候一直有一个执念就是怎么做动画,但是苦于懒惰和时间有限,急急忙忙做了个半成品就交差了,根本顾不上去研究怎么做动画,今天它就来了。 ‎Lottie是一个适用于Android和iOS的移动库,它解析使用‎‎Bodymovin‎‎导出为json的‎‎Adobe After Effects‎‎动画,并在移动设备上以本机方式渲染它们!‎将设计好的动画导出成 JSON 格式,就可以直接运用在 iOS、Android、Web 和 React Native之上,无需其他额外操作
94 0
android Jetpack Navigation组件——堆栈操作和动画效果
android Jetpack Navigation组件——堆栈操作和动画效果
327 0
Lottie 站在巨人的肩膀上实现 Android 酷炫动画效果
      说到动画效果,一般都会感到很高端,感觉很酷炫;而小菜技术有限,稍复杂的动画效果也需要很多时间处理,但是遇到时间紧任务重的情况该怎么办呢?那就尝试一下 Lottie 吧,酷炫的动画集成却相当简单,还支持跨平台。
2394 0
Android各种动画效果ScaleAnimation,AlphaAnimation,TranslateAnimation,RotateAnimation(文章结尾有代码)
 终于建了一个自己个人小站:https://huangtianyu.gitee.io,以后优先更新小站博客,欢迎进站,O(∩_∩)O~~      在各种应用中,通常会使用到多种动画效果,在Android中常见的动画有四种:Scale,Alpha,Translate,Rotate。
1791 0
+关注
字节卷动
You will never know how excellent you are unless you impel yourself once.
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Android组件化实现
立即下载
蚂蚁聚宝Android秒级编译—— Freeline
立即下载
Android开发之多进程架构
立即下载