美文网首页爱天气App实战开发
模块4:主视图UI布局 - 使用Toolbar (2)

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

作者: jingz课程 | 来源:发表于2019-03-13 10:38 被阅读0次

    替换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
    

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/zcubpqtx.html