973      阿里云  技术社区[云栖]

安卓作品：河北空气质量客户端

原文：https://blog.csdn.net/icyfox_bupt/article/details/18953581comments

本文将与你一起从零开始，做一个河北省空气质量自动发布系统的客户端，文章面向零基础的、只看过一点安卓教程的同学，对于比较基础的内容，也会用红字的链接标出，大家可以点开看详细的介绍。

        其实做这个，完全是因为老爸的原因，河北的空气质量太差了，所以他决定天天根据空气质量来决定散步不散步。总是上这个网站过于复杂，于是我就有了做一个客户端的想法。下面分几步介绍关于信息获取，异步获取网络数据，数据分析，界面设计和程序逻辑等内容，下面介绍一个完整的程序是如何做出来的。

        首先需要找到程序的数据源，找到从网上获得数据接口的网址。

        其次，要把数据从网上的格式，转换成我们可以使用的格式。

        接下来进行布局的设计，最后把数据填充到布局里，整个程序就完成了。

        下面是这个系统的网站，和我做的客户端：

1、数据获取

2、异步信息获取

2.1 新建一个Android项目

2.2 异步获取网络数据

[java] view plaincopy

1. public static String HttpGet(String url) throws ClientProtocolException, IOException {  
2.     //新建一个默认的连接  
3.     DefaultHttpClient client = new DefaultHttpClient();  
4.     //新建一个Get方法  
5.     HttpGet get = new HttpGet(url);  
6.     //得到网络的回应  
7.     HttpResponse response = client.execute(get);  
8.     //获得的网页源代码（xml）  
9.     String content = null;  
10.   
11.     //如果服务器响应的是OK的话！  
12.     if (response.getStatusLine().getStatusCode() == 200) {  
13.         //以下是把网络数据分段读取下来的过程  
14.         InputStream in = response.getEntity().getContent();  
15.         byte[] data = new byte[1024];  
16.         int length = 0;  
17.         ByteArrayOutputStream bout = new ByteArrayOutputStream();  
18.         while ((length = in.read(data)) != -1) {  
19.             bout.write(data, 0, length);  
20.         }  
21.         //最后把字节流转为字符串 转换的编码为utf-8.  
22.         content = new String(bout.toByteArray(), "utf-8");  
23.     }  
24.     //返回得到的字符串 也就是网页源代码  
25.     return content;  
26. }  

        在上面的Chrome信息窗口中看到，返回值是utf-8编码的，所以在这里我们使用了utf-8编码，如果这里我们使用"gbk"或者"gb-2312"就会出现乱码，每个网站的编码都不相同，具体情况要具体分析。        

[java] view plaincopy

1. class GetSource extends AsyncTask<String, Void, String>{  
2.       
3.     //此函数用来处理后台的事物  
4.     @Override  
5.     protected String doInBackground(String... params) {  
6.         try {  
7.             //这里调用了我们刚才写的下载函数  
8.             return Util.HttpGet("https://121.28.49.85:8080/datas/hour/130000.xml");  
9.         } catch (IOException e) {}  
10.         return null;  
11.     }  
12.       
13.     //后台事物完成后，此函数用来更改界面的内容  
14.     @Override  
15.     protected void onPostExecute(String result) {  
16.         //让Log输出运行时的记录  
17.         Log.i("test",result);  
18.     }  
19.       
20. }  

        最后在OnCreate函数的最后一行加上下面一句，再添加网络权限，然后我们来看看效果吧！

[java] view plaincopy

1. new GetSource().execute();  

3、界面设计

[html] view plaincopy

1. <RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"  
2.     xmlns:tools="https://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context=".MainActivity" >  
6.   
7.         <LinearLayout  
8.             android:id="@+id/ll"  
9.             android:layout_width="match_parent"  
10.             android:layout_height="wrap_content"  
11.             android:visibility="gone"  
12.             android:orientation="vertical" >  
13.   
14.             <TextView  
15.                 android:id="@+id/tv_time"  
16.                 android:layout_width="fill_parent"  
17.                 android:layout_height="wrap_content"  
18.                 android:layout_margin="5dp"  
19.                 android:background="#7a7"  
20.                 android:padding="5dp"  
21.                 android:textColor="#eee"  
22.                 android:textSize="20sp"  
23.                 android:textStyle="bold" />  
24.   
25.             <GridView  
26.                 android:id="@+id/gv"  
27.                 android:layout_width="match_parent"  
28.                 android:layout_height="fill_parent"  
29.                 android:layout_margin="5dp"  
30.                 android:horizontalSpacing="3dp"  
31.                 android:verticalSpacing="3dp"  
32.                 android:numColumns="3" >  
33.             </GridView>  
34.         </LinearLayout>  
35.   
36.         <ProgressBar  
37.             android:id="@+id/pb1"  
38.             android:layout_width="wrap_content"  
39.             android:layout_height="wrap_content"  
40.             android:layout_centerHorizontal="true"  
41.             android:visibility="visible"  
42.             android:layout_centerVertical="true" />  
43.   
44. </RelativeLayout>  

        GridView 是一种网格样式布局，在上面的代码里我设置的每行格子个数为3个，还设置了格子之间的间距。每个格子中的布局需要另一个文件来控制：

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"  
3.     android:id="@+id/bg"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="wrap_content"  
6.     android:padding="8dp"  
7.     android:orientation="vertical" >  
8.   
9.     <TextView  
10.         android:id="@+id/tv_city"  
11.         android:layout_width="wrap_content"  
12.         android:layout_height="wrap_content"  
13.         android:text="石家庄"  
14.         android:textColor="#4bd"  
15.         android:textSize="20sp"  
16.         android:textStyle="bold" />  
17.   
18.     <TextView  
19.         android:id="@+id/tv_aqi"  
20.         android:layout_width="wrap_content"  
21.         android:layout_height="wrap_content"  
22.         android:text="223"  
23.         android:textColor="#4bd"  
24.         android:textSize="18sp"  
25.         android:textStyle="bold" />  
26.   
27. </LinearLayout>  

4、数据分析

4.1 解析XML数据

[java] view plaincopy

1. @Override  
2. protected void onPostExecute(String result) {  
3.     //建立一个解析器  
4.     DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();  
5.     DocumentBuilder builder;  
6.     try {  
7.         builder = factory.newDocumentBuilder();  
8.         InputStream is = new ByteArrayInputStream(result.getBytes());  
9.         Document document = builder.parse(is);  
10.         Element element = document.getDocumentElement();  
11.         //获得所有的Citys节点数据  
12.         NodeList cityList = element.getElementsByTagName("Citys");  
13.           
14.         //获得mapstitle数据，并分解为两部分  
15.         NodeList title = element.getElementsByTagName("MapsTitle");  
16.         String text1 = title.item(0).getTextContent();  
17.         String t[] = text1.split("\\(");  
18.         text1 = t[0];  
19.         t = t[1].split(",");  
20.         tv_time.setText(text1+ "\n" +t[0]);  
21.           
22.         Element citys = (Element)cityList.item(0);  
23.         NodeList city = citys.getChildNodes();  
24.           
25.         for (int i=0;i < city.getLength();i++){  
26.             //此时的city节点的item上，有的是一个城市的所有数据  
27.             Node node = city.item(i);  
28.             if (node.getNodeName().equalsIgnoreCase("city")) { //这是一个有效的节点  
29.                 CityData cd = new CityData(node);  
30.                 nodeList.add(node);  
31.                 cdList.add(cd);  
32.             }  
33.         }  
34.     } catch (Exception e) {}  

        这样每个城市的数据就成为了一个Node，解析XML的过程比较复杂，需要不断地去尝试。

4.2 应用数据到布局

[java] view plaincopy

1. public class CityData implements Serializable{  
2.       
3.     /** 
4.      * 继承Serializable是为了在两个不同的界面中进行值的传递 
5.      */  
6.     private static final long serialVersionUID = -8473485404751986234L;  
7.     //城市类包含了一个城市的数据  
8.     public String name,dataTime,aqi,level,maxPoll,color,intro,tips;  
9.     public List<Pointer> pointerList;  
10.   
11.     public CityData(Node cityNode) {  
12.         super();  
13.         //按标签挨个取出相应标签的内容  
14.         this.name = getByTag(cityNode, "name");  
15.         this.dataTime = getByTag(cityNode, "datatime");  
16.         this.aqi = getByTag(cityNode, "aqi");  
17.         this.level = getByTag(cityNode, "level");  
18.         this.maxPoll = getByTag(cityNode, "maxpoll");  
19.         String tmp = getByTag(cityNode, "color");  
20.         this.color = tmp.replace("0x", "#");  
21.         this.intro = getByTag(cityNode, "intro");  
22.         this.tips = getByTag(cityNode, "tips");  
23.           
24.         Element city = (Element)cityNode;  
25.         NodeList pointers = city.getElementsByTagName("Pointer");  
26.           
27.         //向city的pointer列表中添加监测点  
28.         pointerList = new ArrayList<Pointer>();  
29.         for (int i=0;i<pointers.getLength();i++){  
30.             Node pNode = pointers.item(i);  
31.             pointerList.add(new Pointer(pNode));  
32.         }  
33.     }  
34.   
35.     //从XML的node中取出相应标签中内容的function  
36.     private String getByTag(Node node,String tag) {  
37.         for (int i=0;i<node.getChildNodes().getLength();i++){  
38.             if (tag.equalsIgnoreCase(node.getChildNodes().item(i).getNodeName()))  
39.                 return node.getChildNodes().item(i).getTextContent();  
40.         }  
41.         return null;  
42.     }  
43. }  

        负责把数据填充到布局的Adapter：

[java] view plaincopy

1. class gvAdapter extends BaseAdapter{  
2.   
3.     //Adapter的数据源，根据这个数据来填充网格列表  
4.     List<CityData> cdList;  
5.       
6.     public gvAdapter(List<CityData> cdList) {  
7.         super();  
8.         this.cdList = cdList;  
9.     }  
10.   
11.     //根据数据的多少返回相应的数值  
12.     @Override  
13.     public int getCount() {  
14.         return cdList.size();  
15.     }  
16.   
17.     @Override  
18.     public Object getItem(int position) {  
19.         return null;  
20.     }  
21.   
22.     @Override  
23.     public long getItemId(int position) {  
24.         return 0;  
25.     }  
26.   
27.     @Override  
28.     public View getView(int position, View convertView, ViewGroup parent) {  
29.         //解析之前写好的每个网格的布局  
30.         convertView = MainActivity.this.getLayoutInflater().inflate(R.layout.gv, null);  
31.         //找到布局中的元素，和布局的背景  
32.         TextView tv_city = (TextView)convertView.findViewById(R.id.tv_city);  
33.         TextView tv_aqi = (TextView)convertView.findViewById(R.id.tv_aqi);  
34.         View bg = convertView.findViewById(R.id.bg);  
35.         //根据数据填充每个格子的内容和背景色  
36.         tv_city.setText(cdList.get(position).name);  
37.         tv_aqi.setText(cdList.get(position).aqi);  
38.         bg.setBackgroundColor(Color.parseColor(cdList.get(position).color));  
39.         return convertView;  
40.     }  
41.       
42. }  

        最后在XML解析完成以后，添加一句：gv.setAdapter(new gvAdapter(cdList)); 即把数据填充到了网格中。

5、其它程序逻辑

[java] view plaincopy

1. gv.setOnItemClickListener(new OnItemClickListener() {  
2.   
3.     @Override  
4.     public void onItemClick(AdapterView<?> parent, View view,int position, long id) {                                     
5.                 //从当前的界面跳转到城市详细信息界面  
6.     <span style="white-space:pre">  </span>Intent it = new Intent(MainActivity.this, CityActivity.class);  
7.                 //对象本身无法使用Intent传递，但是我们继承了Serializable，使传递成为了可能  
8.         it.putExtra("node", cdList.get(position));  
9.         startActivity(it);  
10.     }  
11.             });  

        1、在城市详细信息界面，点击每个监测点，显示该监测点的详细数据。这里需要用到对话框AlertDialog来显示详细数据。

[html] view plaincopy

1. <resources>  
2.     <string name="app_name">河北空气质量</string>  
3.     <string name="title_activity_city">城市数据</string>  
4. </resources>  

        这样，程序的名字就变成了“河北空气质量”，在进入到详细信息界面的时候，标题栏也变成了“城市数据”

最后更新：2017-04-03 12:55:03

  上一篇： android多屏幕分辨率适配

  下一篇： 基于XMPP协议的Android即时通信系