#趣米杯#码农天气--码农自己的天气APP（四）

本文参与趣米杯征文活动，如需转载请注明出处和作者


#趣米杯#码农天气--码农自己的天气APP（一）
#趣米杯#码农天气--码农自己的天气APP（二）
#趣米杯#码农天气--码农自己的天气APP（三）

之前我们已经实现了一个天气app的基本功能，这一篇文章我会介绍几个给app添彩的功能：通知栏，桌面widget，以及最近大家都很关心的PM2.5。
首先简单说一下通知栏的实现，这个功能做起来很简单，只要你把布局文件设计好，然后通过NotificationManager展示一下就可以了，取消的时候也是通过NotificationManager来取消，这一块应该没有什么难度，我把我反解的彩虹天气的通知栏布局文件贴出来，大家借鉴一下：

1. <?xml version="1.0" encoding="UTF-8"?>
   
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:id="@+id/widgetRL"
   
4.     android:layout_width="fill_parent"
   
5.     android:layout_height="fill_parent"
   
6.     android:layout_margin="0.0dip" >
   
7. 
   
8.     <TextView
   
9.         android:id="@+id/cityTV"
   
10.         style="\@style/NotificationTitle"
    
11.         android:layout_width="wrap_content"
    
12.         android:layout_height="wrap_content"
    
13.         android:layout_alignParentLeft="true"
    
14.         android:layout_marginLeft="8.0dip"
    
15.         android:layout_marginTop="2.0dip"
    
16.         android:textSize="16.0dip"
    
17.         android:textStyle="bold" />
    
18. 
    
19.     <TextView
    
20.         android:id="@+id/todayTempNow"
    
21.         style="\@style/NotificationText"
    
22.         android:layout_width="wrap_content"
    
23.         android:layout_height="wrap_content"
    
24.         android:layout_below="@id/cityTV"
    
25.         android:layout_marginLeft="15.0dip"
    
26.         android:layout_marginTop="-4.0dip"
    
27.         android:textSize="22.0dip" />
    
28. 
    
29.     <LinearLayout
    
30.         android:id="@+id/days"
    
31.         android:layout_width="195.0dip"
    
32.         android:layout_height="wrap_content"
    
33.         android:layout_alignParentRight="true"
    
34.         android:layout_centerVertical="true"
    
35.         android:orientation="horizontal" >
    
36. 
    
37.         <LinearLayout
    
38.             android:layout_width="fill_parent"
    
39.             android:layout_height="fill_parent"
    
40.             android:layout_weight="2.0"
    
41.             android:gravity="center_horizontal"
    
42.             android:orientation="vertical" >
    
43. 
    
44.             <TextView
    
45.                 android:id="@+id/tvDay1"
    
46.                 style="\@style/NotificationText"
    
47.                 android:layout_width="fill_parent"
    
48.                 android:layout_height="wrap_content"
    
49.                 android:gravity="center"
    
50.                 android:textSize="10.0dip" />
    
51. 
    
52.             <ImageView
    
53.                 android:id="@+id/imgIcon1"
    
54.                 android:layout_width="32.0dip"
    
55.                 android:layout_height="32.0dip"
    
56.                 android:padding="3.0dip"
    
57.                 android:scaleType="fitXY" />
    
58. 
    
59.             <TextView
    
60.                 android:id="@+id/tvTemp1"
    
61.                 style="\@style/NotificationText"
    
62.                 android:layout_width="wrap_content"
    
63.                 android:layout_height="wrap_content"
    
64.                 android:textSize="10.0dip" />
    
65.         </LinearLayout>
    
66. 
    
67.         <LinearLayout
    
68.             android:layout_width="fill_parent"
    
69.             android:layout_height="fill_parent"
    
70.             android:layout_weight="2.0"
    
71.             android:gravity="center_horizontal"
    
72.             android:orientation="vertical"
    
73.             android:paddingLeft="2.0dip"
    
74.             android:paddingRight="2.0dip" >
    
75. 
    
76.             <TextView
    
77.                 android:id="@+id/tvDay2"
    
78.                 style="\@style/NotificationText"
    
79.                 android:layout_width="fill_parent"
    
80.                 android:layout_height="wrap_content"
    
81.                 android:gravity="center"
    
82.                 android:textSize="10.0dip" />
    
83. 
    
84.             <ImageView
    
85.                 android:id="@+id/imgIcon2"
    
86.                 android:layout_width="32.0dip"
    
87.                 android:layout_height="32.0dip"
    
88.                 android:padding="3.0dip"
    
89.                 android:scaleType="fitXY" />
    
90. 
    
91.             <TextView
    
92.                 android:id="@+id/tvTemp2"
    
93.                 style="\@style/NotificationText"
    
94.                 android:layout_width="wrap_content"
    
95.                 android:layout_height="wrap_content"
    
96.                 android:textSize="10.0dip" />
    
97.         </LinearLayout>
    
98. 
    
99.         <LinearLayout
    
100.             android:layout_width="fill_parent"
     
101.             android:layout_height="fill_parent"
     
102.             android:layout_weight="2.0"
     
103.             android:gravity="center_horizontal"
     
104.             android:orientation="vertical" >
     
105. 
     
106.             <TextView
     
107.                 android:id="@+id/tvDay3"
     
108.                 style="\@style/NotificationText"
     
109.                 android:layout_width="fill_parent"
     
110.                 android:layout_height="wrap_content"
     
111.                 android:gravity="center"
     
112.                 android:textSize="10.0dip" />
     
113. 
     
114.             <ImageView
     
115.                 android:id="@+id/imgIcon3"
     
116.                 android:layout_width="32.0dip"
     
117.                 android:layout_height="32.0dip"
     
118.                 android:padding="3.0dip"
     
119.                 android:scaleType="fitXY" />
     
120. 
     
121.             <TextView
     
122.                 android:id="@+id/tvTemp3"
     
123.                 style="\@style/NotificationText"
     
124.                 android:layout_width="wrap_content"
     
125.                 android:layout_height="wrap_content"
     
126.                 android:textSize="10.0dip" />
     
127.         </LinearLayout>
     
128. 
     
129.         <LinearLayout
     
130.             android:layout_width="fill_parent"
     
131.             android:layout_height="fill_parent"
     
132.             android:layout_weight="2.0"
     
133.             android:gravity="center_horizontal"
     
134.             android:orientation="vertical" >
     
135. 
     
136.             <TextView
     
137.                 android:id="@+id/tvDay4"
     
138.                 style="\@style/NotificationText"
     
139.                 android:layout_width="fill_parent"
     
140.                 android:layout_height="wrap_content"
     
141.                 android:gravity="center"
     
142.                 android:textSize="10.0dip" />
     
143. 
     
144.             <ImageView
     
145.                 android:id="@+id/imgIcon4"
     
146.                 android:layout_width="32.0dip"
     
147.                 android:layout_height="32.0dip"
     
148.                 android:padding="3.0dip"
     
149.                 android:scaleType="fitXY" />
     
150. 
     
151.             <TextView
     
152.                 android:id="@+id/tvTemp4"
     
153.                 style="\@style/NotificationText"
     
154.                 android:layout_width="wrap_content"
     
155.                 android:layout_height="wrap_content"
     
156.                 android:textSize="10.0dip" />
     
157.         </LinearLayout>
     
158.     </LinearLayout>
     
159. 
     
160.     <ImageView
     
161.         android:id="@+id/todayImg"
     
162.         android:layout_width="wrap_content"
     
163.         android:layout_height="46.0dip"
     
164.         android:layout_alignParentTop="true"
     
165.         android:layout_marginLeft="10.0dip"
     
166.         android:layout_marginRight="10.0dip"
     
167.         android:layout_marginTop="4.0dip"
     
168.         android:layout_toLeftOf="@id/days"
     
169.         android:layout_toRightOf="@id/todayTempNow"
     
170.         android:padding="3.0dip"
     
171.         android:src="@drawable/day0" />
     
172. 
     
173.     <TextView
     
174.         android:id="@+id/tvTemp"
     
175.         style="\@style/NotificationText"
     
176.         android:layout_width="wrap_content"
     
177.         android:layout_height="wrap_content"
     
178.         android:layout_below="@id/todayTempNow"
     
179.         android:layout_marginLeft="8.0dip"
     
180.         android:layout_marginTop="-3.0dip"
     
181.         android:textSize="12.0dip" />
     
182. 
     
183.     <TextView
     
184.         android:id="@+id/tvDes"
     
185.         style="\@style/NotificationText"
     
186.         android:layout_width="wrap_content"
     
187.         android:layout_height="wrap_content"
     
188.         android:layout_below="@id/todayTempNow"
     
189.         android:layout_marginLeft="10.0dip"
     
190.         android:layout_marginRight="10.0dip"
     
191.         android:layout_marginTop="-3.0dip"
     
192.         android:layout_toLeftOf="@id/days"
     
193.         android:layout_toRightOf="@id/todayTempNow"
     
194.         android:gravity="center"
     
195.         android:textSize="12.0dip" />
     
196. 
     
197. </RelativeLayout>

复制代码

下面我们介绍一下桌面widget的实现，上面这个是彩虹天气的，下面的那个是码农天气的：

 


大家可以看到我做的这个比彩虹天气的少了一个农历日期的展示，其实这块是我偷懒了，我没有加上，大家如果有兴趣的话，可以自己尝试着加一下。
看完效果，我们看一下桌面Wigdet的原理，其实他就是一个广播接收者BroadcastReceiver，这是android的源码：

1. public class AppWidgetProvider extends BroadcastReceiver {
   
2.     /**
   
3.      * Constructor to initialize AppWidgetProvider.
   
4.      */
   
5.     public AppWidgetProvider() {
   
6.     }
   
7.     // 。。。。其他的代码我就不贴了
   
8. }

复制代码

大家掌握这一点，对于桌面widget的理解就简单多了，他只需要接收指定的广播，就可以做一些预定义好的更新事件了。
彩虹天气有好几种widget的形式，我只是选了其中一种来实现的，大家有兴趣的话可以都试试。
这个是我的widget的布局文件，同样也是反解的彩虹天气的：

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:layout_width="fill_parent"
   
4.     android:layout_height="fill_parent"
   
5.     android:orientation="vertical" >
   
6. 
   
7.     <RelativeLayout
   
8.         android:id="@+id/widgetsRL"
   
9.         android:layout_width="fill_parent"
   
10.         android:layout_height="fill_parent"
    
11.         android:layout_margin="8.0dip" >
    
12. 
    
13.         <ImageView
    
14.             android:id="@+id/bgImg"
    
15.             android:layout_width="fill_parent"
    
16.             android:layout_height="fill_parent"
    
17.             android:scaleType="fitXY"
    
18.             android:src="@drawable/widget_black_bg" />
    
19. 
    
20.         <TextView
    
21.             android:id="@+id/clickTV"
    
22.             android:layout_width="fill_parent"
    
23.             android:layout_height="fill_parent" />
    
24. 
    
25.         <LinearLayout
    
26.             android:id="@+id/topLL"
    
27.             android:layout_width="fill_parent"
    
28.             android:layout_height="wrap_content"
    
29.             android:orientation="horizontal" >
    
30. 
    
31.             <LinearLayout
    
32.                 android:id="@+id/linearLayout1"
    
33.                 android:layout_width="fill_parent"
    
34.                 android:layout_height="fill_parent"
    
35.                 android:layout_weight="3.0"
    
36.                 android:gravity="center"
    
37.                 android:orientation="vertical" >
    
38. 
    
39.                 <TextView
    
40.                     android:id="@+id/tvTime"
    
41.                     android:layout_width="wrap_content"
    
42.                     android:layout_height="wrap_content"
    
43.                     android:layout_marginTop="-2.0dip"
    
44.                     android:textColor="@color/white_color"
    
45.                     android:textSize="48.0dip" />
    
46. 
    
47.                 <TextView
    
48.                     android:id="@+id/tvDay"
    
49.                     android:layout_width="fill_parent"
    
50.                     android:layout_height="wrap_content"
    
51.                     android:layout_marginLeft="10.0dip"
    
52.                     android:textColor="@color/default_text_color"
    
53.                     android:textSize="12.0dip" />
    
54. 
    
55.                 <TextView
    
56.                     android:id="@+id/tvWeek"
    
57.                     android:layout_width="fill_parent"
    
58.                     android:layout_height="wrap_content"
    
59.                     android:layout_marginLeft="10.0dip"
    
60.                     android:textColor="@color/dark_blue_color"
    
61.                     android:textSize="12.0dip"
    
62.                     android:visibility="gone" />
    
63.             </LinearLayout>
    
64. 
    
65.             <RelativeLayout
    
66.                 android:id="@+id/widgetRL"
    
67.                 android:layout_width="fill_parent"
    
68.                 android:layout_height="fill_parent"
    
69.                 android:layout_weight="3.0" >
    
70. 
    
71.                 <TextView
    
72.                     android:id="@+id/cityTV"
    
73.                     android:layout_width="wrap_content"
    
74.                     android:layout_height="wrap_content"
    
75.                     android:layout_alignParentRight="true"
    
76.                     android:layout_alignParentTop="true"
    
77.                     android:layout_marginRight="3.0dip"
    
78.                     android:layout_marginTop="3.0dip"
    
79.                     android:drawableRight="@drawable/ic_next"
    
80.                     android:textColor="@color/white_color"
    
81.                     android:textSize="18.0dip"
    
82.                     android:textStyle="bold" />
    
83. 
    
84.                 <ImageView
    
85.                     android:id="@+id/todayImg"
    
86.                     android:layout_width="54.0dip"
    
87.                     android:layout_height="54.0dip"
    
88.                     android:layout_alignParentTop="true"
    
89.                     android:layout_marginLeft="5.0dip"
    
90.                     android:layout_marginTop="5.0dip"
    
91.                     android:padding="4.0dip"
    
92.                     android:src="@drawable/day0" />
    
93. 
    
94.                 <TextView
    
95.                     android:id="@+id/todayTempNow"
    
96.                     android:layout_width="wrap_content"
    
97.                     android:layout_height="wrap_content"
    
98.                     android:layout_alignParentRight="true"
    
99.                     android:layout_below="@id/cityTV"
    
100.                     android:layout_marginRight="5.0dip"
     
101.                     android:layout_marginTop="-2.0dip"
     
102.                     android:gravity="center"
     
103.                     android:paddingRight="8.0dip"
     
104.                     android:textColor="@color/white_color"
     
105.                     android:textSize="28.0dip" />
     
106. 
     
107.                 <TextView
     
108.                     android:id="@+id/todayTemp"
     
109.                     android:layout_width="wrap_content"
     
110.                     android:layout_height="wrap_content"
     
111.                     android:layout_alignParentRight="true"
     
112.                     android:layout_below="@id/todayImg"
     
113.                     android:layout_marginTop="3.0dip"
     
114.                     android:paddingRight="8.0dip"
     
115.                     android:textColor="@color/default_text_color"
     
116.                     android:textSize="12.0dip" />
     
117. 
     
118.                 <TextView
     
119.                     android:id="@+id/todayDesc"
     
120.                     android:layout_width="wrap_content"
     
121.                     android:layout_height="wrap_content"
     
122.                     android:layout_alignLeft="@id/todayImg"
     
123.                     android:layout_below="@id/todayImg"
     
124.                     android:layout_marginTop="3.0dip"
     
125.                     android:paddingLeft="4.0dip"
     
126.                     android:textColor="@color/default_text_color"
     
127.                     android:textSize="12.0dip" />
     
128. 
     
129.                 <TextView
     
130.                     android:id="@+id/todayWet"
     
131.                     android:layout_width="wrap_content"
     
132.                     android:layout_height="wrap_content"
     
133.                     android:layout_alignLeft="@id/todayImg"
     
134.                     android:layout_below="@id/todayDesc"
     
135.                     android:paddingLeft="4.0dip"
     
136.                     android:textColor="@color/dark_blue_color"
     
137.                     android:textSize="12.0dip"
     
138.                     android:visibility="gone" />
     
139. 
     
140.                 <TextView
     
141.                     android:id="@+id/todayWind"
     
142.                     android:layout_width="wrap_content"
     
143.                     android:layout_height="wrap_content"
     
144.                     android:layout_alignParentRight="true"
     
145.                     android:layout_below="@id/todayTemp"
     
146.                     android:paddingRight="8.0dip"
     
147.                     android:textColor="@color/dark_blue_color"
     
148.                     android:textSize="12.0dip"
     
149.                     android:visibility="gone" />
     
150.             </RelativeLayout>
     
151.         </LinearLayout>
     
152.     </RelativeLayout>
     
153. 
     
154. </LinearLayout>

复制代码

这一讲的最后，我们说一个大家都比较关心的知识点：PM2.5，这个功能彩虹天气以前是有的，不过最近一直都刷不出来数据，估计是他抓的数据源出问题了吧。

大家如果有PM2.5开发需求的，我给大家推荐一个比较好的数据源：PM25.in

大家开发的时候可以使用他提供的测试appKey：
公共测试AppKey:5j1znBVAsnSf5xQyNQyq这个网站的所有的appKey都是有访问次数限制的，所以这个公共的appKey经常获取不到数据，估计是很多人在用，我这里先把我申请的appKey贡献出来，大家都省着点用：
我申请的AppKey: YZGfRKfjgzJE78xFEjxg
我们可以到pm25.in的网站上看一下他提供的接口，每个接口需要上传的请求参数都很详细的列出来了，返回的数据都是Json格式的，这个对我们码农来说用起来就非常方便了，我用了我之前介绍的http://loopj.com/android-async-http/这个开源library项目来实现的这个功能：

1.                 RequestParams params = new RequestParams();
   
2.                 DBHelper dbHelper = new DBHelper(context, "db_weather.db");
   
3.                 params.put("city", dbHelper.getCityNameByCode(cityCode));
   
4.                 params.put("token", "YZGfRKfjgzJE78xFEjxg");
   
5.                 
   
6.                 AsyncHttpClient client = new AsyncHttpClient();
   
7.                 client.get("http://www.pm25.in/api/querys/aqi_details.json", params, new JsonHttpResponseHandler() {
   
8.                         @Override
   
9.                         public void onStart() {
   
10.                                 super.onStart();
    
11.                                 // 开始的回调
    
12.                         }
    
13.                         @Override
    
14.                         public void onSuccess(JSONObject response) {
    
15.                                 // 成功后的回调
    
16.                                 try {
    
17.                                         aqiMsgTV.setText("PM2.5:"+response.getString("pm2_5_24h")); // 这个就是pm2.5的数据
    
18.                                 } catch (Exception e) {
    
19.                                         e.printStackTrace();
    
20.                                 }
    
21.                                 super.onSuccess(response);
    
22.                         }
    
23.                         @Override
    
24.                         public void onFailure(Throwable error) {
    
25.                                 super.onFailure(error);
    
26.                                 // 失败后的回调
    
27.                         }
    
28.                 });

复制代码

这个pm25的接口有个问题：就是每个小时的访问次数次数都有限制，其实这也很好解决的，我们只需要在服务器上做个缓存，再开个定时任务去pm25.in取数据就好了。不过昨天在巴士的版主群里问了一下，发现很多人都没有做过服务端的东西，我怕我写了个服务端的东西大家都看不懂，所以我就把这个PM25的功能做成了本地版的了，不过这样做自己玩玩也还行。



这一篇征文就写到这，下一篇我会介绍一下彩虹天气的菜单功能。

本主题由 System 于 2014-1-14 18:00 解除限时高亮