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

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

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

    为Toolbar增加文字域

    从设计图来看,我们需要居中显示的标题文字:

    文字居中

    然而Toolbar的文字默认是左对齐的,其文字大小也比较别扭。我们只能自己为Toolbar添加新的文本视图作为标题。从效果图看来,标题文字主要用来显示当前地点的位置信息,其中第一行为主标题,显示最基本的位置信息,字体较大,颜色较亮;第二行为副标题,显示当前位置所隶书的各级行政区划和国家,使用较暗的颜色,较小的字体。我们分别用颜色主题中已经定义好的主文字色和次级文字色来设置它们。

    打开res/layout/activity_main.xml文件,在Toolbar单元内部首先新增一个垂直方向的LinearLayout

    两个文本视图上下排列且居中对齐

    参数如图所示。其中:

    • android:orientation:指定LinearLayout内部各元素的排列方向,设为vertical(垂直)
    • android:gravity:该布局本身与上级布局的对齐方式,设为center以居中
    • android:layout_gravity:内部各元素的对齐方式,设置为center以居中

    接下来分别添加主、副标题对应的文本域,并设置各自的id和格式:

    两个文本视图

    其中专门为主标题文本视图(tv_address_1)设置了较大的字体(20sp);两个视图分别预填了样例文字,这些文字将来会在程序运行中被实际的位置信息替换。

    还有点工作要做——Toolbar自带的标题文字需要隐藏起来。回到MainActivity.java,添加下列标红的代码:

    去掉Toolbar自带标题

    运行程序查看效果:

    接下来增加右端的“+”图标按钮。


    本小节涉及修改的文件:

    modified:   app/src/main/java/com/dmtech/iw/MainActivity.java
    modified:   app/src/main/res/layout/activity_main.xml
    

    相关文章

      网友评论

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

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