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

背景遮罩

我们的App主视图采用实拍照片作为主题背景，这带来一个问题——由于背景照片颜色构成的不确定性，导致无论我们对上层的文字采用何种颜色，都有可能与背景照片颜色接近从而导致难以辨认。对此，UI设计上通常会在文字和图片之间衬托一层半透明遮罩来增强对比。

根据设计方案，我们采用与透明系统状态栏颜色相同的遮罩颜色，一方面使UI统一视觉效果，另一方面正好衬托白色文字：

打开WeatherFragment对应的布局文件fragment_weather.xml，在现有布局基础上添加一个RelativeLayout以表示整个前景布局，使其充满屏幕，覆盖在背景图上，并为其设置id：

该层用来容纳主视图中全部前景内容，本身是透明的。如果需要对整个前景布局进行整体操作，就通过它来进行。接下来增加位于屏幕下方的信息展示区域。我们用一个垂直方向的线性布局来作为这个区域的总体背景。添加如下：

从设计效果图来看，我们需要对它做如下的设定：

• 背景色(background)：将其作为文字与背景图之间的遮罩层，与Toolbar和系统状态栏设置为相同的颜色
• 内边距(padding)：内部文字区域应当与屏幕边缘保持适当的留白，统一通过该层的左、右和底部内边距来设置

修改布局属性设置如下：

观察设计图，在信息区域顶端有一段过渡区域，它实现一个由半透明色到完全无色透明的渐变效果。我们通过一个形状描述文件来实现这个渐变。选择“res/drawable”文件夹，右键单击，选择“New -> Drawable resource file”项，在弹出的对话框中设置如下：

点击“OK”完成创建，文件内容如下：

gradient_bottom.xml

添加一个自下而上由半透明黑色到无色的渐变：

渐变效果

接下来在WeatherFragment的布局中添加这个渐变效果。回到fragment_weather.xml文件，添加一个：

屏幕快照 2019-03-20 16.03.41.png

添加属性设置：

其中要点如下：

• 设置渐变区域高度为16dp
• 设置渐变区域位置为紧邻信息区域上方
• 设置背景为渐变效果drawable/gradient_bottom

切换到设计视图查看即时效果：

目前信息内容区域还没有添加任何文字元素因此显得很狭窄。接下来一一将其添加进来。

---

本小节修改的文件：

new file:   app/src/main/res/drawable/gradient_bottom.xml
modified:   app/src/main/res/layout/fragment_weather.xml