实战 Walker 之天气预报的实现分析

一、获取天气预报数据 

1、首先搞定天气预报数据来源的问题，提高天气预报服务的有很多网站，这些网站一般都会提供比较详细的 API 接口供应用程序调用，完成调用后再把准备好图片资源和所需要的文字资源导入进去。

二、编写网络数据访问工具类

1、首先需要在 uiti 包下定义一个接口，比如将它命名成 HttpCallbackListener，代码如下： 

public interface HttpCallbackListener {  void onFinish(String response);  void onError(Exception e);  } 

2、然后定义 HttpUtil 类，代码如下：

public class HttpUtil {  public static void sendHttpRequest(final String address, final HttpCallbackListener listener) {  new Thread(new Runnable() {  @Override  public void run() {  HttpURLConnection connection = null;  try {  URL url = new URL(address);  connection = (HttpURLConnection) url.openConnection();  connection.setRequestMethod("GET");  connection.setConnectTimeout(8000);  connection.setReadTimeout(8000);  connection.setDoInput(true);  connection.setDoOutput(true);  InputStream in = connection.getInputStream();  BufferedReader reader =  new BufferedReader(new InputStreamReader(in));  StringBuilder response = new StringBuilder();  String line;  while ((line = reader.readLine()) != null) {  response.append(line);  }  if (listener != null) {  // 回调 onFinish()方法  listener.onFinish(response.toString());  }  } catch (Exception e) {  if (listener != null) {  // 回调 onError()方法  listener.onError(e);  }  } finally {  if (connection != null) {  connection.disconnect();  }  }  }  }).start();  } 

3、测试一下能否正常访问天气预报接口得到返回的数据。 

<pre name="code" class="java">public class WeatherGetTest extends AndroidTestCase{  public void testGetData(){  String weatherUrl="http://v.juhe.cn/weather/index?format=2&cityname= 滨 州&key=ab9d7e2007472d723baf71fcdc4ba094";  HttpUtil.sendHttpRequest(weatherUrl, new HttpCallbackListener() {  @Override  public void onFinish(String response) {  System.out.println(response);  }  @Override  public void onError(Exception e) {   }  });  }  } 

（由于涉及到访问网络，需要在 AndroidManifest.xml 文件中加入访问网络的权限。 
<uses-permission android:name="android.permisson.Internet"/> ）

三、UI 设计
1、新建 WeatherActivity 
2、修改自动生成的 activity_weather.xml 文件，整体布局代码如下： 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:tools="http://schemas.android.com/tools"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:background="@drawable/activity_weather_bg"  tools:context=".WeatherActivity" >  <LinearLayout  android:id="@+id/linearLayout1"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:orientation="horizontal" >  <EditText  android:id="@+id/etCity"  android:layout_width="0dp"  android:layout_height="wrap_content"  android:layout_marginLeft="10dp"  android:layout_marginTop="20dp"  android:layout_weight="1"  android:background="@android:drawable/edit_text"  android:drawableLeft="@drawable/icons_weather_city"  android:drawablePadding="5dp"  android:ems="10"  android:hint="@string/etCity" >  <requestFocus />  </EditText>  <ImageButton  android:id="@+id/btnQuery"  android:layout_width="50dp"  android:layout_height="50dp"  android:layout_marginTop="20dp"  android:background="@null"  android:src="@drawable/icons_weather_query" />  </LinearLayout>  <ListView  android:id="@+id/lvFutureWeather"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:layout_below="@+id/linearLayout1"  android:layout_centerHorizontal="true"  android:layout_marginLeft="10dp"  android:layout_marginRight="10dp"  android:dividerHeight="10dp"  android:layoutAnimation="@anim/weather_list_layout_animation" >  </ListView>  </RelativeLayout>

其中 weather_list_layout_animation.xml 文件是一个设置布局动画的，实现过程如下：  在 res 目录下新建 anim 文件夹，在其下新建 weather_list_layout_animation.xml 文件，如下：

<?xml version="1.0" encoding="utf-8"?> <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"  android:animation="@anim/weather_list_animation"  android:animationOrder="normal" android:delay="2" />

其中 weather_list_animation.xml 文件也是一动画文件，如下： 

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android">  <scale  android:interpolator="@android:anim/accelerate_decelerate_interpolator"  android:fromXScale="0.0"  android:toXScale="1.0"  android:fromYScale="0.0"  android:toYScale="1.0"  android:duration="1000"  /> </set>

3、定义整体布局中 ListView 控件所对应的子布局 activity_weather_listitem.xml 文件，如下

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:padding="10dp"  android:layout_margin="10dp"  android:background="@drawable/list_item_shape" >  <TextView  android:id="@+id/tvDayofWeek"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:layout_alignParentLeft="true"  android:layout_alignParentTop="true"  android:layout_marginLeft="15dp"  android:text="星期日" />  <TextView  android:id="@+id/tvDate"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:layout_alignBaseline="@+id/tvDayofWeek"  android:layout_alignBottom="@+id/tvDayofWeek"  android:layout_alignParentRight="true"  android:text="20160207" />  <TextView  android:id="@+id/tvTemperature"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:layout_alignLeft="@+id/tvDayofWeek"  android:layout_below="@+id/tvDayofWeek"  android:layout_marginTop="15dp"  android:text="temperature" />  <TextView  android:id="@+id/tvWeather"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:layout_alignLeft="@+id/tvTemperature"  android:layout_below="@+id/tvTemperature"  android:layout_marginTop="15dp"  android:text="weather" /> </RelativeLayout> 

其中 list_item_shape.xml 文件定义如下：

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" >  <corners  android:radius="5dp"/>  <solid  android:color="@color/azure"/> </shape> 

布局后的效果图如下所示： 

4、在 model 包下定义 Weather 实体类封装所关心的信息，如下：

/**  * 天气实体类  * @author cabbage  */ public class Weather {  private String dayOfWeek;//星期几  private String date;//日期  private String temperature;//温度  private String weather;//天气  public Weather(){   }  public Weather(String dayOfWeek, String date, String temperature,  String weather) {  super();  this.dayOfWeek = dayOfWeek;  this.date = date;  this.temperature = temperature;  this.weather = weather;  }  public String getDayOfWeek() {  return dayOfWeek;  }  public void setDayOfWeek(String dayOfWeek) {  this.dayOfWeek = dayOfWeek;  }  public String getDate() {  return date;  }  public void setDate(String date) {  this.date = date;  }  public String getTemperature() {  return temperature;  }  public void setTemperature(String temperature) {  this.temperature = temperature;  }  public String getWeather() {  return weather;  }  public void setWeather(String weather) {  this.weather = weather;  }  @Override  public String toString() {  return "Weather [dayOfWeek=" + dayOfWeek + ", date=" + date  + ", temperature=" + temperature + ", weather=" + weather + "]";  }  }

 5、在 adapter 包下定义适配器 WeatherAdapter，代码如下： 

/**  * 天气适配器  * @author cabbage  */ public class WeatherAdapter extends ArrayAdapter<Weather> {  private int resourceId;  public WeatherAdapter(Context context, int textViewResourceId,  List<Weather> objects) {  super(context, textViewResourceId, objects);  resourceId = textViewResourceId;  }  @Override  public View getView(int position, View convertView, ViewGroup viewgroup) {  Weather weather=getItem(position);  ViewHolder viewHolder=null;  if(convertView==null){  viewHolder=new ViewHolder();  convertView=LayoutInflater.from(getContext()).inflate(resourceId, null);  viewHolder.tvDayOfWeek=(TextView) convertView.findViewById(R.id.tvDayofWeek);  viewHolder.tvDate=(TextView) convertView.findViewById(R.id.tvDate);  viewHolder.tvTemperature=(TextView) convertView.findViewById(R.id.tvTemperature);  viewHolder.tvWeather=(TextView) convertView.findViewById(R.id.tvWeather);  convertView.setTag(viewHolder);  }else{  viewHolder=(ViewHolder) convertView.getTag();  }  viewHolder.tvDayOfWeek.setText(weather.getDayOfWeek());  viewHolder.tvDate.setText(weather.getDate());  viewHolder.tvTemperature.setText(weather.getTemperature());  viewHolder.tvWeather.setText(weather.getWeather());  return convertView;  }   private class ViewHolder{  TextView tvDayOfWeek;  TextView tvDate;  TextView tvTemperature;  TextView tvWeather;  } }

6、编写 WeatherActivity 类 

package cn.edu.bztc.walkersimulate; import java.util.ArrayList; import java.util.List;import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.view.View; import android.view.View.OnClickListener; import android.view.animation.LayoutAnimationController; import android.view.animation.ScaleAnimation; import android.widget.EditText; import android.widget.ImageButton; import android.widget.ListView; import android.widget.Toast; import cn.edu.bztc.walkersimulate.adapter.WeatherAdapter; import cn.edu.bztc.walkersimulate.model.Weather; import cn.edu.bztc.walkersimulate.util.HttpCallbackListener; import cn.edu.bztc.walkersimulate.util.HttpUtil; import com.google.gson.JsonArray; import com.google.gson.JsonObject; import com.google.gson.JsonParser;  public class WeahterActivity extends Activity {  private EditText etCity;  private ImageButton btnQuery;  private ListView lvFutureWeather;  public static final int SHOW_RESPONSE = 1;  private List<Weather> data;  private Handler handler = new Handler() {  public void handleMessage(android.os.Message msg) {  switch (msg.what) {  case SHOW_RESPONSE:  String response = (String) msg.obj;  if (response != null) {  parseWithJSON(response);  WeatherAdapter weatherAdapter = new WeatherAdapter(  WeahterActivity.this,  R.layout.activity_weather_listitem, data);  lvFutureWeather.setAdapter(weatherAdapter);  ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1, 0,  1);  scaleAnimation.setDuration(1000);  LayoutAnimationController animationController = new LayoutAnimationController(  scaleAnimation, 0.6f);  lvFutureWeather.setLayoutAnimation(animationController);  }  default:  break;  }  }   private void parseWithJSON(String response) {  data = new ArrayList<Weather>();  JsonParser parser = new JsonParser();// json 解析器  JsonObject obj = (JsonObject) parser.parse(response);  /* 获取返回状态码 */  String resultcode = obj.get("resultcode").getAsString();  /* 如果状态码是 200 说明返回数据成功 */  if (resultcode != null && resultcode.equals("200")) {  JsonObject resultObj = obj.get("result").getAsJsonObject();  JsonArray futureWeatherArray = resultObj.get("future")  .getAsJsonArray();  for (int i = 0; i < futureWeatherArray.size(); i++) {  Weather weather = new Weather();  JsonObject weatherObject = futureWeatherArray.get(i)  .getAsJsonObject();  weather.setDayOfWeek(weatherObject.get("week")  .getAsString());  weather.setDate(weatherObject.get("date").getAsString());  weather.setTemperature(weatherObject.get("temperature")  .getAsString());  weather.setWeather(weatherObject.get("weather")  .getAsString());  data.add(weather);  }  }  }  };   @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_weahter);  initViews();  setListeners();  }   private void initViews() {   etCity = (EditText) findViewById(R.id.etCity);  btnQuery = (ImageButton) findViewById(R.id.btnQuery);  lvFutureWeather = (ListView) findViewById(R.id.lvFutureWeather);  }   private void setListeners() {  btnQuery.setOnClickListener(new OnClickListener() {  @Override  public void onClick(View view) {  String city = etCity.getText().toString();  System.out.println("lvFutureWeather=" + lvFutureWeather);  Toast.makeText(WeahterActivity.this, "success",  Toast.LENGTH_LONG).show();  String weatherUrl = "http://v.juhe.cn/weather/index?format=2&cityname="  + city + "&key=ab9d7e2007472d723baf71fcdc4ba094";  HttpUtil.sendHttpRequest(weatherUrl,  new HttpCallbackListener() {  @Override  public void onFinish(String response) {  Message message = new Message();  message.what = SHOW_RESPONSE;  // 将服务器返回的结果存放到 Message 中  message.obj = response.toString();  handler.sendMessage(message);  }   @Override  public void onError(Exception e) {  System.out.println("访问失败");  }  });  }  });   } } 

四、最终实现效果图