Android上实现一个简单的天气预报APP(六) 更新界面数据

学习参考资源：https://www.gitbook.com/book/zhangqx/mini-weather/details

前面我们已经设置好了基本的界面，获取了网络上的天气数据并解析出来了，接下来，我们要将界面上胡乱写的天气数据更新为实时获取的真实的天气数据。

1）初始化界面

1.定义组件对应的变量

2.编写initView()方法

前面我们已经在main.xml中定义了布局，这里我们可以直接通过findViewById的方法将变量与组件绑定好，并设置初值。

initView()函数如下：

void initView(){//titlecityNameT = (TextView)findViewById(R.id.title_city_name);//today weathercityT = (TextView)findViewById(R.id.todayinfo1_cityName);timeT = (TextView)findViewById(R.id.todayinfo1_updateTime);humidityT = (TextView)findViewById(R.id.todayinfo1_humidity);weekT = (TextView)findViewById(R.id.todayinfo2_week);pmDataT = (TextView)findViewById(R.id.todayinfo1_pm25);pmQualityT = (TextView)findViewById(R.id.todayinfo1_pm25status);temperatureT = (TextView)findViewById(R.id.todayinfo2_temperature);climateT = (TextView)findViewById(R.id.todayinfo2_weatherState);windT = (TextView)findViewById(R.id.todayinfo2_wind);weatherStateImg = (ImageView)findViewById(R.id.todayinfo2_weatherStatusImg);pmStateImg = (ImageView)findViewById(R.id.todayinfo1_pm25img);cityNameT.setText("N/A");cityT.setText("N/A");timeT.setText("N/A");humidityT.setText("N/A");weekT.setText("N/A");pmDataT.setText("N/A");pmQualityT.setText("N/A");temperatureT.setText("N/A");climateT.setText("N/A");windT.setText("N/A");}

在onCreate中调用initView()

附：

布局文件main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent"><RelativeLayoutandroid:id="@+id/title_relative"android:layout_width="match_parent"android:layout_height="45.0dp"android:background="#000000"><ImageViewandroid:id="@+id/title_city_manager"android:layout_height="45.0dp"android:layout_width="45.0dp"android:src="@drawable/title_city_manager"></ImageView><TextViewandroid:id="@+id/title_city_name"android:layout_height="45.0dp"android:layout_width="match_parent"android:layout_toRightOf="@id/title_city_manager"android:gravity="center_vertical"android:text="天气预报"android:textSize="25.0sp"android:textColor="#FFFFFF"></TextView><ImageViewandroid:id="@+id/title_city_locate"android:layout_height="45.0dp"android:layout_width="45.0dp"android:layout_toLeftOf="@+id/title_city_update"android:src="@drawable/title_city_locate"></ImageView><ImageViewandroid:id="@+id/title_city_update"android:layout_height="45.0dp"android:layout_width="45.0dp"android:layout_toLeftOf="@+id/title_city_share"android:src="@drawable/title_city_update"></ImageView><ImageViewandroid:id="@+id/title_city_share"android:layout_height="45.0dp"android:layout_width="45.0dp"android:layout_alignParentRight="true"android:src="@drawable/title_city_share"></ImageView></RelativeLayout><RelativeLayoutandroid:id="@+id/today_relative"android:layout_height="wrap_content"android:layout_width="match_parent"android:layout_below="@id/title_relative"android:background="@drawable/main_background"><RelativeLayoutandroid:id="@+id/todayinfo1_relative"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"><LinearLayoutandroid:id="@+id/todayinfo1_linear1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid:id="@+id/todayinfo1_cityName"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="北京"android:textColor="#FFFFFF"android:textSize="47.0sp"/><TextViewandroid:id="@+id/todayinfo1_updateTime"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="发布时间18:25"android:textColor="#FFFFFF"android:textSize="20.0sp"/><TextViewandroid:id="@+id/todayinfo1_humidity"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="湿度:57％"android:textColor="#FFFFFF"android:textSize="20.0sp"/></LinearLayout><LinearLayoutandroid:id="@+id/todayinfo1_linear2"android:layout_height="wrap_content"android:layout_width="wrap_content"android:orientation="vertical"android:layout_toLeftOf="@+id/todayinfo1_linear3"><ImageViewandroid:id="@+id/todayinfo1_pm25img"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/pm25_0_50"></ImageView></LinearLayout><LinearLayoutandroid:id="@+id/todayinfo1_linear3"android:layout_height="wrap_content"android:layout_width="wrap_content"android:orientation="vertical"android:layout_alignParentRight="true"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="PM2.5"android:textColor="#FFFFFF"android:textSize="27.0sp"/><TextViewandroid:id="@+id/todayinfo1_pm25"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="220"android:textColor="#FFFFFF"android:textSize="20.0sp"/><TextViewandroid:id="@+id/todayinfo1_pm25status"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="重度污染"android:textColor="#FFFFFF"android:textSize="20.0sp"/></LinearLayout></RelativeLayout><RelativeLayoutandroid:id="@+id/todayinfo2_relative"android:layout_height="wrap_content"android:layout_width="match_parent"android:layout_below="@id/todayinfo1_relative"><LinearLayoutandroid:id="@+id/todayinfo2_linear1"android:layout_height="wrap_content"android:layout_width="wrap_content"android:orientation="vertical"><ImageViewandroid:id="@+id/todayinfo2_weatherStatusImg"android:layout_width="155dp"android:layout_height="128dp"android:src="@drawable/weather_qing"/></LinearLayout><LinearLayoutandroid:id="@+id/todayinfo2_linear2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"android:layout_toRightOf="@id/todayinfo2_linear1"><TextViewandroid:id="@+id/todayinfo2_week"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="今天 星期三"android:textColor="#FFFFFF"android:textSize="27.0sp"></TextView><TextViewandroid:id="@+id/todayinfo2_temperature"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="2摄氏度～7摄氏度"android:textColor="#FFFFFF"android:textSize="20.0sp"></TextView><TextViewandroid:id="@+id/todayinfo2_weatherState"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="晴"android:textColor="#FFFFFF"android:textSize="20.0sp"></TextView><TextViewandroid:id="@+id/todayinfo2_wind"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="微风"android:textColor="#FFFFFF"android:textSize="20.0sp"></TextView></LinearLayout></RelativeLayout></RelativeLayout>
</RelativeLayout>

运行一下！

2）更新数据

1.建立一个类，用于存储待更新变量以及它们的setter and getter。

新建一个名为TodayWeather的java类

定义变量

右键－generate－setter and getter

编写toString()

TodayWeather类完成，接下来我们要开始赋值。

2.将我们解析的天气数据，赋值给这些我们TodayWeather中定义的变量

修改parseXML(String xmlData)函数：将返回值类型改为TodayWeather，函数中定义一个TodayWeather变量，并边解析边赋值

private TodayWeather parseXML(String xmlData){TodayWeather todayWeather = null;int fengliCount = 0;int fengxiangCount = 0;int dateCount = 0;int highCount = 0;int lowCount = 0;int typeCount = 0;try {XmlPullParserFactory factory = XmlPullParserFactory.newInstance();XmlPullParser xmlPullParser = factory.newPullParser();xmlPullParser.setInput(new StringReader(xmlData));int eventType = xmlPullParser.getEventType();Log.d("MWeater","start parse xml");while(eventType!=xmlPullParser.END_DOCUMENT){switch (eventType){//文档开始位置case XmlPullParser.START_DOCUMENT:Log.d("parse","start doc");break;//标签元素开始位置case XmlPullParser.START_TAG:if(xmlPullParser.getName().equals("resp")){todayWeather = new TodayWeather();}if(todayWeather!=null) {if (xmlPullParser.getName().equals("city")) {eventType = xmlPullParser.next();Log.d("city", xmlPullParser.getText());todayWeather.setCity(xmlPullParser.getText());} else if (xmlPullParser.getName().equals("updatetime")) {eventType = xmlPullParser.next();Log.d("updatetime", xmlPullParser.getText());todayWeather.setUpdatetime(xmlPullParser.getText());} else if (xmlPullParser.getName().equals("wendu")) {eventType = xmlPullParser.next();Log.d("wendu", xmlPullParser.getText());todayWeather.setWendu(xmlPullParser.getText());} else if (xmlPullParser.getName().equals("fengli") && fengliCount == 0) {eventType = xmlPullParser.next();Log.d("fengli", xmlPullParser.getText());todayWeather.setFengli(xmlPullParser.getText());fengliCount++;} else if (xmlPullParser.getName().equals("shidu")) {eventType = xmlPullParser.next();Log.d("shidu", xmlPullParser.getText());todayWeather.setShidu(xmlPullParser.getText());} else if (xmlPullParser.getName().equals("fengxiang") && fengxiangCount == 0) {eventType = xmlPullParser.next();Log.d("fengxiang", xmlPullParser.getText());todayWeather.setFengxiang(xmlPullParser.getText());fengxiangCount++;} else if (xmlPullParser.getName().equals("pm25")) {eventType = xmlPullParser.next();Log.d("pm25", xmlPullParser.getText());todayWeather.setPm25(xmlPullParser.getText());} else if (xmlPullParser.getName().equals("quality")) {eventType = xmlPullParser.next();Log.d("quelity", xmlPullParser.getText());todayWeather.setQuality(xmlPullParser.getText());} else if (xmlPullParser.getName().equals("date") && dateCount == 0) {eventType = xmlPullParser.next();Log.d("date", xmlPullParser.getText());todayWeather.setDate(xmlPullParser.getText());dateCount++;} else if (xmlPullParser.getName().equals("high") && highCount == 0) {eventType = xmlPullParser.next();Log.d("high", xmlPullParser.getText());todayWeather.setHigh(xmlPullParser.getText());highCount++;} else if (xmlPullParser.getName().equals("low") && lowCount == 0) {eventType = xmlPullParser.next();Log.d("low", xmlPullParser.getText());todayWeather.setLow(xmlPullParser.getText());lowCount++;} else if (xmlPullParser.getName().equals("type") && typeCount == 0) {eventType = xmlPullParser.next();Log.d("type", xmlPullParser.getText());todayWeather.setType(xmlPullParser.getText());typeCount++;}}break;case XmlPullParser.END_TAG:break;}eventType=xmlPullParser.next();}}catch (Exception e){e.printStackTrace();}return todayWeather;}

编写函数updateTodayWeather(TodayWeather)更新组件

void updateTodayWeather(TodayWeather todayWeather){cityNameT.setText(todayWeather.getCity()+"天气");cityT.setText(todayWeather.getCity());timeT.setText(todayWeather.getUpdatetime());humidityT.setText("湿度:"+todayWeather.getShidu());pmDataT.setText(todayWeather.getPm25());pmQualityT.setText(todayWeather.getQuality());weekT.setText(todayWeather.getDate());temperatureT.setText(todayWeather.getHigh()+"~"+todayWeather.getLow());climateT.setText(todayWeather.getType());windT.setText("风力:"+todayWeather.getFengli());Toast.makeText(MainActivity.this,"更新成功",Toast.LENGTH_SHORT).show();}

最后用handler启动更新

运行一下！

点击更新图标

3）根据天气状态更改图片

我们将pm25值的档次分为50以下、50-100、100-150、150-200、200-250、250-300、300以上，随着pm25值不同更改pm25State图片。

天气状态图片也随着实时天气状态更改。

1.加载图片资源

2.定义ImageView变量，并绑定组件，设置更新动作

在MainActivity的updateTodayWeather(TodayWeather)函数中，新增代码：

updateTodayWeather

void updateTodayWeather(TodayWeather todayWeather){cityNameT.setText(todayWeather.getCity()+"天气");cityT.setText(todayWeather.getCity());timeT.setText(todayWeather.getUpdatetime());humidityT.setText("湿度:"+todayWeather.getShidu());pmDataT.setText(todayWeather.getPm25());pmQualityT.setText(todayWeather.getQuality());weekT.setText(todayWeather.getDate());temperatureT.setText(todayWeather.getHigh()+"~"+todayWeather.getLow());climateT.setText(todayWeather.getType());windT.setText("风力:"+todayWeather.getFengli());if(todayWeather.getPm25()!=null) {int pm25 = Integer.parseInt(todayWeather.getPm25());if (pm25 <= 50) {PM25Img.setImageResource(R.drawable.biz_plugin_weather_0_50);} else if (pm25 >= 51 && pm25 <= 100) {PM25Img.setImageResource(R.drawable.biz_plugin_weather_51_100);} else if (pm25 >= 101 && pm25 <= 150) {PM25Img.setImageResource(R.drawable.biz_plugin_weather_101_150);} else if (pm25 >= 151 && pm25 <= 200) {PM25Img.setImageResource(R.drawable.biz_plugin_weather_151_200);} else if (pm25 >= 201 && pm25 <= 300) {PM25Img.setImageResource(R.drawable.biz_plugin_weather_201_300);}}if(todayWeather.getType()!=null) {Log.d("type", todayWeather.getType());switch (todayWeather.getType()) {case "晴":weatherImg.setImageResource(R.drawable.biz_plugin_weather_qing);break;case "阴":weatherImg.setImageResource(R.drawable.biz_plugin_weather_yin);break;case "雾":weatherImg.setImageResource(R.drawable.biz_plugin_weather_wu);break;case "多云":weatherImg.setImageResource(R.drawable.biz_plugin_weather_duoyun);break;case "小雨":weatherImg.setImageResource(R.drawable.biz_plugin_weather_xiaoyu);break;case "中雨":weatherImg.setImageResource(R.drawable.biz_plugin_weather_zhongyu);break;case "大雨":weatherImg.setImageResource(R.drawable.biz_plugin_weather_dayu);break;case "阵雨":weatherImg.setImageResource(R.drawable.biz_plugin_weather_zhenyu);break;case "雷阵雨":weatherImg.setImageResource(R.drawable.biz_plugin_weather_leizhenyu);break;case "雷阵雨加暴":weatherImg.setImageResource(R.drawable.biz_plugin_weather_leizhenyubingbao);break;case "暴雨":weatherImg.setImageResource(R.drawable.biz_plugin_weather_baoyu);break;case "大暴雨":weatherImg.setImageResource(R.drawable.biz_plugin_weather_dabaoyu);break;case "特大暴雨":weatherImg.setImageResource(R.drawable.biz_plugin_weather_tedabaoyu);break;case "阵雪":weatherImg.setImageResource(R.drawable.biz_plugin_weather_zhenxue);break;case "暴雪":weatherImg.setImageResource(R.drawable.biz_plugin_weather_baoxue);break;case "大雪":weatherImg.setImageResource(R.drawable.biz_plugin_weather_daxue);break;case "小雪":weatherImg.setImageResource(R.drawable.biz_plugin_weather_xiaoxue);break;case "雨夹雪":weatherImg.setImageResource(R.drawable.biz_plugin_weather_yujiaxue);break;case "中雪":weatherImg.setImageResource(R.drawable.biz_plugin_weather_zhongxue);break;case "沙尘暴":weatherImg.setImageResource(R.drawable.biz_plugin_weather_shachenbao);break;default:break;}}Toast.makeText(MainActivity.this,"更新成功",Toast.LENGTH_SHORT).show();}

运行一下！