模块4：主视图UI布局 - 天气视图(2)

根元素和背景图

我们首先调整天气页面WeatherFragment的布局根元素，将其从FrameLayout修改为RelativeLayout(相对布局)，并将系统自动生成的TextView删除：

改为RelativeLayout

同时还要删除WeatherFragment.java源代码中对文本视图的引用，否则将出现编译错误：

然后，根据设计效果图，页面中含有一个全屏展示的背景图：

全屏背景图

在布局中添加一个ImageView来表示这个图：

如图，我们为其设置了id，并使其充满全屏，并将图片的缩放类型android:scaleType属性设为 centerInside，意思是将图片的内容完整居中显示，通过按比例缩小或原来的size使得图片长/宽等于或小于View的长/宽。请注意这里设置了缺省的背景图@drawable/bg_sample，目前还没有这个图片，请从课程提供的资源中将图片bg_sample.jpg拷贝到“res/drawable-xxhdpi”文件夹下即可。这个背景图在将来会在实际运行中根据当前天气情况动态的从服务器端加载。

运行代码查看效果：

通过ImageView实现的全屏背景图

接下来我们制作页面中位于前景的信息布局。

---

本小节变更的文件：

new file:   app/src/main/res/drawable-xxhdpi/bg_sample.jpg
modified:   app/src/main/java/com/dmtech/iw/WeatherFragment.java
modified:   app/src/main/res/layout/fragment_weather.xml