模块4:主视图UI布局 - 使用Toolbar (2)
2019-03-13 本文已影响0人
jingz课程
替换Actionbar
替换分两步——第一步自然是去掉系统自带的Actionbar。
去掉系统Actionbar
所需要的修改极其简单,仅需要对应用的主题风格稍作修改。打开res/values/styles.xml
文件。回顾一下——我们在这里面定义了两个主题:
-
AppTheme:全局主题,继承自系统主题
Theme.AppCompat
。 - AppTheme.MainView:MainActivity的全屏幕主题,继承自前者。
而目前自带的Actionbar实际上都继承自系统主题Theme.AppCompat
。因此,我们简单的用另外一种不带Actionbar的系统主题Theme.AppCompat.NoActionBar
替换之即可:
运行查看效果——和谐多了:
接下来添加Toolbar组件。
添加并设置Toolbar
在添加Toolbar之前为主视图动一个大手术。将现有的ConstrainLayout
替换成RelativeLayout
。打开activity_main.xml
修改之:
接下来把残留的那个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与状态栏叠加我们发现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