爱天气App实战开发

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

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

为Toolbar增加文字域

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

文字居中

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

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

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

参数如图所示。其中:

接下来分别添加主、副标题对应的文本域,并设置各自的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
上一篇下一篇

猜你喜欢

热点阅读