上一篇文章,我们学习了如何写出最基本的 Toolbar,这篇进一步来学习一下如何对基本的 Toolbar 进行扩展,可以达到的效果如下:

Toolbar 的组成

首先,我们要知道这么”完整”的 Toolbar,其实是可以分为好几个部分的。
这方面最好的学习资料,还是官方的 Toolbar reference

这里放个说明图示,注意我上面给出实现的效果,
是没有 branded logo imagecustom views 的,堆太多东西实在不美观。

下载所需的图标

知道了有这些组成部分后,我们就可以去下载一些图标,以便放在 Toolbar 上面了。官方的 Material icons 已经提供了很多图标,各个尺寸都有,点击自己想要的图标,选择颜色和格式,下载后复制到 drawable 目录就可以了,很方便。

添加 action menu

然后添加 “action menu”,新建一个 res/menu/menu_main.xml 文件(menu目录是要有的,文件名根据自己需要命名),内容如下:

接着在 Activity 中,覆写 onCreateOptionsMenu() 方法:

运行后,会发现最右边 menu 那竖三点颜色不是白色,在两个 style 文件中添加 style item:
<item name="colorControlNormal">@color/white</item>

效果如下:

设置 title、subtitle 和 Navigation button 的icon

在 Activity 的 onCreate() 方法中,添加代码如下:

注意,因为现在是把 Toolbar 作为 action bar 来用,
所以不是直接 setTitle() 就能改变它的 title 文字的,要先调用 getSupportActionBar() 。

最终效果如下:

趣编程的项目有需要修改默认返回按钮的地方,setNavigationIcon() 方法这时候就有用了。

其它内容

  • 其实还有其它一些可能会用到的改变颜色的 style item,可以参考台湾 mosil 关于 Toolbar 博文 ,《ANDROID – TOOLBAR STEP BY STEP》的第 3 部分”调色”和第 5 部分”总结”,我其实也是参考他的文章学习的。

  • res/menu/menu_main.xml 文件,记得加上 xmlns:app="http://schemas.android.com/apk/res-auto" 这句。
    app:showAsAction 有三个值:never(不显示)、ifRoom(有空间就显示)、always(总是显示)。

  • 底部的 navigationBarColor 只能设定 API 21 以上的版本,
    所以只在 “values-v21/sylte.xml” 文件添加下面这个 style item:
    <item name="android:navigationBarColor">@color/colorPrimaryDark</item>

得到效果 :

  • 至于 branded logo image 和 custom views ,也是简单。
    像我这里,加一句 toolbar.setLogo(R.drawable.your_logo); 就能在 logo 位置加个小 icon 了 。而 custom views,首先在 layout 目录写一个自己想要的 layout 文件,例如 “layout/xxx.xml”,然后在 Activity 的 onCreate() 方法中,添加下面的代码就行了:


OK,这种稍微复杂一点的 Toolbar 呈现方式就到此为止了,其它的一些具体的使用细节有了这些基础,例如修改具体位置颜色、添加点击事件、Toolbar的复用等等,再稍微搜索一下也能找到解决方法,就不多说了。

最后,还是推荐阅读官方的教程 《Adding the App Bar》,如何添加点击事件,添加返回按钮 Up Action,在 Toolbar 提供 Action Views 这些内容都有说。

我自己也需要在接下来的学习中,从实际中发现更多需要记录的知识。

Tagged:

发表评论

电子邮件地址不会被公开。 必填项已用*标注