爱天气App实战开发

模块6:绑定天气数据(1)

2019-04-17  本文已影响0人  jingz课程

模块5中我们在主页面MainActivity中创建了获取天气数据的的异步任务。执行之后拿到了5个规定的城市的天气数据并在日志中进行了显示。但是,天气数据实际上是内嵌到ViewPager中的每一个Fragment中的,即Fragment和某城市的天气数据一一对应。因此,我们进行以下改造,使WeatherFragment类能够支持天气数据的传递和更新:


修改WeatherFragment.newInstance()方法

目前的这个用来创建Fragment对象的工厂方法是为测试而设计的。它接受一个int型参数,并设置给属性mPosition以表示当前Fragment对象在ViewPager中的位置:

现在进行改造,去掉属性mPosition,增加天气对象属性成员mWeather

然后将newInstance()方法的参数亦定义为天气类型,并修改方法的内部代码,将传入的天气对象指定给mWeather属性,并刷新UI各元素的数据。由于涉及多步操作,我们定义私有方法updateWeather()来完成之:


增加各UI元素对应之属性对象

在绑定天气数据到UI视图之前,我们需要照例从布局中获得相关的各UI组件对象,其中包括:

定义各自的成员对象:

并在onCreateView()方法中获取布局中的对应实例:


导入天气状况图标

图标资源直接提供给大家:

天气图标

图标都是透明背景的png格式图片文件。其中各个图标的命名方式都是“ic_w” + 天气状况代码 + “.png”的模式。这个天气状况代码包含在我们获取到的天气数据之中。我们可以根据这种固定模式来拼接我们需要的图标资源名称。

res文件夹下创建名为“raw”的文件夹,意味着此文件夹下的图片遵循原有格式和尺寸。将所有图标文件拷贝到此:


监视Activity状态

Activity作为应用程序的一个组件,需要先由系统创建实例,然后才能执行围绕它的相关处理。如果不创建即调用,则应用程序将会崩溃。因此,我们需要准确获知其是否确实已经创建。
在Fragment内部,当其所属的Activity创建完成时,其生命周期方法onActivityCreated()将被调用。可以这样理解:系统通过这个方法来通知我们Activity已经创建完成。我们只需要定义一个boolean类型的成员来表示这个状态,然后在onActivityCreated()方法中将其值置为true即可。而在编写相关代码时预先检查这个状态即可。

先定义状态成员变量isActivityCreated

加入生命周期方法onActivityCreated(),并在这里将isActivityCreated()设置为true


向用户界面填充数据

定义私有函数fillData()来专门执行向UI填充数据的操作:

fillData()方法编写代码。

1. 获取上下文对象

2. 设置几个气温值

3. 天气图标和文字描述以及数据更新时间

还剩下天气背景大图,由于相对复杂,我们用单独的章节来进行讲解。

现在fillData()方法完成,有两个地方需要调用它。一个是onActivityCreated()方法:

然后是updateWeather()方法,添加代码如下:


与MainActivity对接

1. 删除测试代码

此时切换到MainActivity类,由于WeatherFragment已经经过改造,原来调用处已经提示语法错误:

工厂方法定义已发生变化

由于当初添加这个fillTestInstances()方法的目的是用来测试,此时已经无用,所以直接将其删除。同时,对此方法的调用也一并去掉。可以跟随语法错误的提示追踪相关的代码位置。如果考虑以后尚有可能用到,亦可保留相关代码而将其注释掉:

2. 修改异步任务RequestWeatherTask

回顾一下,在MainActivity类中,我们通过列表数据结构来存储ViewPager中需要展示的Fragment:

    private List<WeatherFragment> mFragments = new ArrayList<>();

然后我们通过异步任务RequestWeatherTask从网络上取得了几个城市的天气信息并返回。

自然而然的,接下来就应当根据返回来的一组天气对象来生成新的Fragment并加入到列表结构中。我们通过修改RequestWeatherTask类的onPostExecute()方法来实现。
目前此方法仅仅记录了日志:

首先将Fragment列表清空:

然后在循环中,依次生成新的Fragment并加入列表中:

最后,非常重要的一步——通知ViewPager更新数据:

运行程序查看效果:

可以看到,不同页面展示了不同天气数据。但是还剩下几个问题:

接下来的章节我们逐一将其实现。

上一篇下一篇

猜你喜欢

热点阅读