概述
Android利用溫度傳感器實現帶動畫效果的電子溫度計。
詳細
一、准備工作
需要准備一部帶有溫度傳感器的安卓手機,或者使用有溫度傳感器的模擬器。
二、程序實現
1、需要截圖程序結構

2、實現思路怎樣
要想實現帶動畫效果的電子溫度計,需要以下幾個知識點:
-
溫度傳感器相關知識。
-
ScaleAnimation動畫相關知識,來進行水印刻度的縮放效果。
-
Android:layout_weight屬性的合理運用,關於android:layout_weight屬性的講解,可以參考:《我的Android進階之旅------>關於android:layout_weight屬性的一個面試題》
首先來看看本實例的具體效果,然后再來具體實現功能。
1、將溫度強制設置為0度時,畫面如下:

2、將溫度強制設置為50度時,畫面如下:

3、將溫度強制設置為-20度時,畫面如下:

4、從傳感器動態得到溫度值,並實時更新畫面,如下所示:


首先來看布局文件的代碼: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() + "");
}
}
三、運行效果
1、運行,右鍵項目:Run as -》Android Application
2、如上圖所示,也就是這樣子:


四、其他補充
暫時沒
