电子书阅读器上的浏览器 [Day13] 自订工具列

随着开发的功能愈来愈多，工具列的空间已不足以将所有的功能都显示在上面；而且也不是每个功能都是使用者会常用的功能。为了要解决这个问题，我打算改造工具列，让使用者可以自订工具列上的功能和排序方式。如果能在上面放上最常用的功能，使用者就不用频繁地开启层层选单找寻功能按钮。

我们先来看看一般浏览器的工具列都长得怎样

Chrome	NeoBrowser	Firefox

Chrome 包含了几个常用的功能，Onyx 电子书设备内建的 NeoBrowser 跟 Chrome 蛮相似的；Firefox 则是相当简洁，几乎没有任何按钮可用。

扩充工具列界面

原本的工具列只是在一个水平的 LinearLayout 中，放入多个 ImageButton，为了避免使用者塞入太多按钮，造成工具列超过画面宽度，我们先在外面包上一层 HorizontalScrollView，如果真的太多按钮的话，至少还可以左右滑动工具列。

在画面初始化时，我们就会先把所有的按钮生成出来；之後再根据使用者的设定，将其重新排列和隐藏不必要的按钮。

对於工具列的操作，因为有点多，所以另外写了一个 ToolBarViewController 来处理。其中比较重要的函式是 reorderIcons()。

fun reorderIcons() {
    toolbarActionViews.size

    val iconEnums = config.toolbarActions
    // 先移除全部按钮，再依照设定中的资讯来重新塞入按钮
    if (iconEnums.isNotEmpty()) {
        iconBar.removeAllViews()
        iconEnums.forEach { actionEnum ->
            iconBar.addView(toolbarActionViews[actionEnum.ordinal])
        }
        // Settings 这个按钮如果不小心被使用者删除了，这里会强制将它显示出来
        // 因为没有 Settings 按钮，就无法再进到工具列设定的画面。
        if (ToolbarAction.Settings !in iconEnums) {
            iconBar.addView(toolbarActionViews[ToolbarAction.Settings.ordinal])
        }
        // 重新配置工具列的呈现
        iconBar.requestLayout()
       …
    }
}

toolbarActionViews 则是在画面生成的时候，先把里头的每个按钮元件的 reference 都先记录下来。

private val toolbarActionViews: List<View> by lazy {
    val childCount = iconBar.childCount
    val children = mutableListOf<View>()
    for (i in 0 until childCount) {
        children.add(iconBar.getChildAt(i))
    }

    children
}

建立可拖拉排序的选项对话框

这一部分的实作需要一个可以拖拉的 ListView。花了点时间在网路上找到堪用的元件 DragSortListView，将它置於对话框 ToolbarConfigDialog 内，并且依照使用者储存的设定，初始化它的状态。

然後，为了储存和管理所有的工具列按钮，建立了 ToolbarAction 的 Enum：

全部实作完後，只要再在设定画面中，加上一个工具列设定的按钮就行了！

下面是 BrowserActivity 里设定 onClick 的实作，全部的细节都在 ToolbarConfigDialog 中。

R.id.toolbar_setting -> ToolbarConfigDialog(this).show()

下面是完成的工具列设定画面

画面 1	画面 2

自订後的范例

参考版本：https://github.com/plateaukao/browser/releases/tag/v8.7.3