爱天气App实战开发

模块4:主视图UI布局 - 使用Toolbar (2)

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

替换Actionbar

替换分两步——第一步自然是去掉系统自带的Actionbar。


去掉系统Actionbar

所需要的修改极其简单,仅需要对应用的主题风格稍作修改。打开res/values/styles.xml文件。回顾一下——我们在这里面定义了两个主题:

而目前自带的Actionbar实际上都继承自系统主题Theme.AppCompat。因此,我们简单的用另外一种不带Actionbar的系统主题Theme.AppCompat.NoActionBar替换之即可:

去掉Actionbar

运行查看效果——和谐多了:

接下来添加Toolbar组件。


添加并设置Toolbar

在添加Toolbar之前为主视图动一个大手术。将现有的ConstrainLayout替换成RelativeLayout。打开activity_main.xml修改之:

Android Studio提供了强大的代码编辑功能

接下来把残留的那个TextView去掉,同时添加Toolbar标签:

注意宽度和高度的设置:

同时还要设置另外几项属性:

下一步是编写代码,用这个Toolbar正式取代ActionBar。打开源文件MainActivity.java代码。找到onCreate()方法,在其末尾添加代码:

将Toolbar设为新的ActionBar

运行程序查看效果:

Toolbar与状态栏叠加

我们发现Toolbar居然钻到了系统状态栏下面,产生了奇怪的效果。这是因为我们没有设定Toolbar必须跟系统状态栏下缘对齐。重新打开activity_main.xml,为Toolbar包裹一层RelativeLayout,并增加一个属性android:fitsSystemWindows,从字面就能理解,这个属性将决定视图是否对齐到系统状态栏。将其设置为true

再次运行查看效果,终于得到了与状态栏无缝对接的Toolbar:

接下来为Toolbar增加内容。

本小节涉及到对以下文件的修改:

modified:   app/src/main/java/com/dmtech/iw/MainActivity.java
modified:   app/src/main/res/layout/activity_main.xml
modified:   app/src/main/res/values/styles.xml
上一篇下一篇

猜你喜欢

热点阅读