在可收合的 App Bar 中加入 Subtitle

可收合的 App Bar (以前叫 Action Bar 后来又一度改成 Tool Bar) 是 Android 平台上新推出的 Material Design 效果。要在 App 中使用这个效果并不难,只要在最新的 Android Studio 中,于新增 Activity 时选择【File -> New -> Activity -> Scrolling Activity】,并依照 “Configure Activity” 窗口的栏位填好内容,按下【Finish】按钮,就可以有一个运行起来如下图的画面,颇为无脑。

在可收合的 App Bar 中加入 Subtitle_第1张图片

在可收合的 App Bar 中加入 Subtitle_第2张图片

只不过如果要在展开的 App Bar 上加入一个副标题,让画面看起来丰富一点,就有一点烧脑了!调用 setSubtitle 函式在这样的画面配置下并不管用,所以必须要在 Layout 的内容上做一些改变。

首先,要先让 App Bar 展开后的 Title 往上提一点,以便挪出空间可以容纳副标题的文字,这个效果可以用 expandedTitleMarginBottom 的属性来达成, Layout 内容如下:



    


运行后,Activity 的画面就像下图一样:

在可收合的 App Bar 中加入 Subtitle_第3张图片

接下来就是要把副标题加到标题下方,这里使用 TextView 来达成。要注意的是,TextView 的 Layout 内容必须要加在 CollapsingToolbarLayout 之内,并且 layout_gravity 的属性要设为 Bottom。为了要对齐主标题的缩进,paddingStart 属性的内容要设成 32dp。Textview 的内容如下:

    

加好了之后,运行,Activity 就会出现如下图的画面:

在可收合的 App Bar 中加入 Subtitle_第4张图片

不过,这里有一点不太完美的地方,在收合到最上方的动画会出现 Subtitle 的文字与收合后的 Title 重叠。虽然无伤大雅,但还是让人觉得介意。还好要解决并不困难,Android 的 SDK 里就已经有现成的方式来处理,就是将 layout_collapseMode 属性套用在 TextView 上,把内容设定为 parallax 就搞定了。以下是完整的 Layout 内容:



    

    


你可能感兴趣的:(在可收合的 App Bar 中加入 Subtitle)