Android之極致擬物化空氣品質檢測儀

聲明：轉載此文請註明出處！源創意出自：https://play.google.com/store/apps/details?id=us.bestapp.pm25

本文源碼：http://download.csdn.net/detail/weidi1989/5789763 

(源碼是基於eclipse工程打包，utf-8編碼，如果遇到匯入出錯的童鞋，請自行找度娘或穀哥幫忙，謝謝合作！)

今天，跟大家分享一個重量級的小工具，可以說是極致擬物化。雖然功能很簡單，但是效果很逼真，很酷！大家盡情的踩吧~

下面我們就來看看：

1.顯示北京市當前的AQI，可以通過NEXT鍵切換AQI與PM2.5值。

2.點擊PRINT，就會有印表機一樣的動畫展現一份品質檢測報告，同時有逼真的印表機聲音，我們還可以點擊分享按鈕，分享給我們的朋友。

3.紙張可以通過滑動來撕掉此紙張，同時會有逼真的撕紙聲音。(注意：Android3.0以下機器不支援撕紙動畫)

4.長按PRINT，即可展示反饋介面，請填寫您想說的話，然後通過軟鍵盤的ENTER鍵確認，將會以郵件的形式反饋給我。

 
 

 
 

說明
提供即時查詢全國 76 個城市（共 509 個監測點）的空氣品質監測資料，為健康生活提供指引。支援分享到社交網路。
【操作提示】
* 按 NEXT ：切換顯示【AQI 指數】與【PM2.5 濃度值】
* 按 PRINT ：列印具體空氣品質詳情
* 長按 NEXT ：進入選擇城市模式
* ……
* 更多操作方式，慢慢探索 :
忘記從什麼時候開始，用顏色表示空氣；
不知道什麼時候可以，用甜度描述空氣。
PM2.5 空氣品質監測儀，就是這麼簡單，就是這麼精緻！

好了，下面重點跟大家講講原始碼，其實功能很簡單，就是擬物化的動畫效果花了點小心思，這裡，我引入了nineoldandroids-2.4.0.jar這個第三方庫，因為在Android3.0以下的API中，有些動畫是不支援的。

先看看源碼結構圖：

 
 

本例所有的動畫都封裝在一個類中，我們來看看：

/** * 所以動畫的封裝 用到第三方包nineoldandroids中的 Animator、AnimatorSet、ObjectAnimator *  * @author way *  */public final class PM25Anim {/** * 水平平移動畫 *  * @param view * @param x * @return */public static Animator add(final View view, float x) {ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view,"translationX", new float[] { x, 0.0F });objectAnimator.setDuration(1000L);objectAnimator.addListener(new Animator.AnimatorListener() {public void onAnimationCancel(Animator paramAnonymousAnimator) {}public void onAnimationEnd(Animator animator) {}public void onAnimationRepeat(Animator animator) {}public void onAnimationStart(Animator animator) {view.setVisibility(View.VISIBLE);}});return objectAnimator;}/** * 從原點向下移動動畫 *  * @param view *            需要加入動畫的view * @param y *            需要移動到的軸座標 * @return 動畫對象Animator */public static Animator down(View view, float y) {ObjectAnimator localObjectAnimator = ObjectAnimator.ofFloat(view,"translationY", new float[] { 0.0F, y });localObjectAnimator.setDuration(2000L);return localObjectAnimator;}/** * 從y軸原點向上移動到指定y座標 *  * @param view *            需要加入動畫的view * @param y *            終止y軸座標 * @return 動畫對象Animator */public static Animator up(View view, float y) {ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view,"translationY", new float[] { 0.0F, y });objectAnimator.setDuration(2000L);return objectAnimator;}/** * 向上移動的動畫 *  * @param view *            需要加入動畫的view * @param fromY *            起始y軸座標 * @param toY *            終止y軸座標 * @return 動畫對象Animator */public static Animator up(View view, float fromY, float toY) {ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view,"translationY", new float[] { fromY, toY });objectAnimator.setDuration(2000L);return objectAnimator;}/** * 向上移動並漸層消失 *  * @param view *            需要加入動畫的view * @param y *            向上移動的距離 * @return 動畫對象Animator */public static Animator upAndVanish(View view, float y) {AnimatorSet animatorSet = new AnimatorSet();Animator[] arrayOfAnimator = new Animator[2];float[] floats = new float[2];floats[0] = y;floats[1] = (3.0F * y);arrayOfAnimator[0] = ObjectAnimator.ofFloat(view, "translationY",floats);arrayOfAnimator[1] = ObjectAnimator.ofFloat(view, "alpha", new float[] {1.0F, 0.0F });animatorSet.playTogether(arrayOfAnimator);animatorSet.setDuration(2000L);return animatorSet;}}

然後在我們的PM25Activity中執行個體化這些動畫，包括紙張列印、類比檢測擬的向下移動、以及紙張撕掉的動畫（我這裡只貼齣動畫部分代碼）：

mBodyTranslate = PM25Anim.down(this.mBodyLayout, getResources().getDimension(R.dimen.paper_anim_down));//列印紙張時總體向下移動動畫mPaperUpTitle = PM25Anim.up(this.mPaperLayout, getResources().getDimension(R.dimen.paper_anim_up_one));//最初列印一個標題時紙張移動向上動畫mPaperUpAll = PM25Anim.up(this.mPaperLayout, getResources().getDimension(R.dimen.paper_anim_up_one), getResources().getDimension(R.dimen.paper_anim_up_two));//整張紙列印向上的動畫mFeedbackSended = PM25Anim.upAndVanish(this.mPaperLayout,getResources().getDimension(R.dimen.paper_anim_up_two));//反饋訊息發送時，紙張漸層動畫mBodyReset = PM25Anim.up(this.mBodyLayout,getResources().getDimension(R.dimen.paper_anim_down), 0.0F);//撕掉紙張時，儀器恢複原狀的向上動畫

OK，動畫效果就總結到這裡了，下面我們來分析一下自動定位的原理：目前看到大部分國內軟體定位都是直接使用百度輕量級的包定位，包括我之前的那個簡潔天氣，也是如此，在這裡，我使用的Google定位，換一種方式，換一個心情，多多熟練一下不同的方式。主要方法就是通過手機可用的PROVIDER，包括PASSIVE_PROVIDER、NETWORK_PROVIDER、GPS_PROVIDER三種方式，選擇一個最優的方式定位，擷取當前位置座標點，然後通過HTTP請求，擷取當前的城市名，例如：http://maps.googleapis.com/maps/api/geocode/json?latlng=22.5329294,114.019329&sensor=true，我們可以替換其中的latlng參數為手機擷取的地理座標，就可以獲得城市名，雖然總體比百度jar包麻煩一點，但也算是最原始的一種方式了。通過網頁訪問這個網站，我們發現返回一大堆資料，這就需要我們解析了，這裡我也貼出解析出城市的代碼：

JSONArray jsonArray = new JSONObject(result).getJSONArray("results").getJSONObject(0).getJSONArray("address_components");for (int i = 0; i < jsonArray.length(); ++i) {JSONObject jsonObject = jsonArray.getJSONObject(i);String types = jsonObject.getJSONArray("types").toString();if ((types.contains("locality"))&& (types.contains("political"))&& (!types.contains("sublocality"))) {Log.d(LogTag, jsonObject.toString());city = jsonObject.getString("short_name");Log.d(LogTag, city);}}

另外，其實我們還可以HTTP請求百度伺服器，將地理座標轉換成城市，我這裡就只提一下，解析原理也是類似的，都是json格式的返回資料：http://api.map.baidu.com/geocoder/v2/?ak=1919b4b56ae680106f8d1dfa5f7244d9&location=22.5329294,114.019329&output=json。

OK，本文大概的內容就是這樣了，有需要的童鞋，可以下載源碼參考參考，最後提醒一下，由於時間、人手問題，bug是在所難免的，目前已知bug：

1.頻繁點擊button，包括長按短按，會造成boolean標誌位混亂。

2.撕紙張時，如果紙張角度較大且一直觸屏，會造成紙張迴圈旋轉。

3.偶爾會有動畫卡頓的情況。

4.可能會有螢幕解析度不適配的情況。

5.......