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

替换Actionbar

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

---

去掉系统Actionbar

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

• AppTheme：全局主题，继承自系统主题Theme.AppCompat。
• AppTheme.MainView：MainActivity的全屏幕主题，继承自前者。

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

去掉Actionbar

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

接下来添加Toolbar组件。

---

添加并设置Toolbar

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

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

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

注意宽度和高度的设置：

• android:layout_width：充满全屏
• android:layout_height：自适应内部内容

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

• android:id：Toolbar的id，将其简单设为“toolbar”
• android:background：Toolbar的背景色，将其设置为与状态栏相同的颜色
• android:minHeight：Toolbar最小高度，意思是即使Toolbar内部不包含任何子元素，高度仍然不能小于这个值。将其设置为系统Actionbar的宽度以保持统一风格

下一步是编写代码，用这个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