爱天气App实战开发

模块4:主视图UI布局 - 半透明状态栏和虚拟按键栏

2019-03-13  本文已影响0人  jingz课程

我们通过对系统状态栏和虚拟按键栏主题风格进行定制来实现主视图界面的全屏显示。实际上,我们安卓模拟器的Home屏的风格就是这样的:

Home:全屏风格

只需要定义一种新的主题风格并设置给MainActivity即可实现这种视觉效果。打开res/values/styles.xml,目前内容如下:

styles.xml

现在只有一个全局作用的主题AppTheme。现在在下面添加新的主题AppTheme.MainView,并使之继承AppTheme

新建主题风格AppTheme.MainView

此时,如果不添加更多的设置项,则新的风格与AppTheme将没有任何区别。

将此主题风格关联到MainActivity。打开项目描述文件AndroidManifest.xml,找到其中对MainActivity的声明部分:

MainActivity的声明

目前未曾专门为其设置主题风格,所以它沿用application标签指定的全局主题。我们添加android:theme属性并将其设置为MainView主题:

我们需要增加两项配置来实现我们的设计:


为系统状态栏半透明填充色

打开res/colors.xml文件,增加半透明黑色status_bar_color如下:

在主题风格AppTheme.MainView内部添加android:statusBarColor属性项,并将其值设为刚添加的半透明色:

半透明状态栏

设置状态栏和虚拟按键栏为半透明

这是一个开关项,为MainView主题添加android:windowTranslucentNavigation属性并将之设为true

修改主视图背景色

为了方便查看效果,我们用一个醒目的颜色填充主视图的背景。这里仅仅是为了鉴定前面设定的最终效果,将来会被替换掉。打开主视图布局文件res/layout/activity_main.xml,为布局根元素配置背景色如下:

运行查看效果:

大家可以注意到,主视图背景色被设置成了显眼的黄色并充满了屏幕,系统状态栏和虚拟按键栏呈现出半透明叠加状态。

当然,还有个导航栏仍然保持原来的黑色。我们在下一节用Toolbar组件来替换现在的Actionbar,因此稍后再设置其视觉效果。


以下是本节修改文件清单:

modified:   app/src/main/AndroidManifest.xml
modified:   app/src/main/res/layout/activity_main.xml
modified:   app/src/main/res/values/colors.xml
modified:   app/src/main/res/values/styles.xml
上一篇下一篇

猜你喜欢

热点阅读