电子书阅读器上的浏览器 [Day06] 增加翻页按钮和分页数字资讯在工具列

新增翻页按钮

browser 画面下方的工具列其实还蛮空旷的，应该可以多塞点功能进来。与其用手势滑动来翻页，倒不如在工具列上加两个按钮，一个向上翻页，一个向下翻页。对於寸土寸金的萤幕空间来说，善用画面空间也是很重要的。

为了要加上按钮，必须先新增想要的图案、修改 xml 档案，然後在 BrowserActivity.java 中实作相关的功能。

新增想要的图案

利用 Android Studio 中的 Vector Asset 视窗(可以双击 shift 键，然後输入 vector asset) ，可以快速选取 Material 的 Clip Art，然後将其储存为 vector drawable xml 档。

修改 xml 档案

在 activity_main.xml 中，加入新的 ImageButton (以 page down 按钮为例)：

连结翻页功能

最後，在 BrowserActivity.java 中找到处理 ImageButton 点击事件的区块，把这几个按钮的功能加进去。

加上长按的功能

既然加了按钮，自然希望它能提供更多功能。所以，对於翻页的按键，又额外加了长按的功能，可以快速回到网页的最顶端，或是最底部。这功能对於在浏览 Facebook 网页内容时，特别好用。

修改分页按钮，增加分页数字

原本的分页按钮点击後会显示目前有开启的分页。虽然还算好用，但在浏览时，有时会希望能够直接知道目前开了多少分页，不用再点进去。

这里采用的作法是最简单的方式，把 ImageButton 的图换成一个方框，然後在它上面再叠上一个 TextView 。虽然这作法很丑，但可以很快地达成这个功能。(後来有把这方式改掉，不过这里暂且不提)。一样是先新增图案，然後到 activity_main.xml 中修改：

最後，再到 BrowserActivity.java 中处理一下分页数字的更新逻辑：

Album 在 browser 中的意思就是分页。在 AddAlbum() 和 updateAlbum() 时，更新分页的数字，而分页的数字则是记录在 BrowserContainer 这个资料结构中。

最终，我们来看看完成的样子吧。

原本的工具列	修改後的工具列

参考原始码版本

下一篇，我们再来谈谈怎样改善其他的 UI 元件。