当前位置: 首页 > 开发杂谈 >

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

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

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

Chrome NeoBrowser Firefox
https://ithelp.ithome.com.tw/upload/images/20210912/20140260jnXrDuetJy.jpg https://ithelp.ithome.com.tw/upload/images/20210912/201402606rTmWK7imG.jpg https://ithelp.ithome.com.tw/upload/images/20210912/201402604exP0v5hdC.jpg

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

扩充工具列界面

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

https://ithelp.ithome.com.tw/upload/images/20210912/2014026092eVvkmzYa.png

https://ithelp.ithome.com.tw/upload/images/20210912/20140260RCBWYSGtMt.png
在画面初始化时,我们就会先把所有的按钮生成出来;之後再根据使用者的设定,将其重新排列和隐藏不必要的按钮。

对於工具列的操作,因为有点多,所以另外写了一个 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 内,并且依照使用者储存的设定,初始化它的状态。

https://ithelp.ithome.com.tw/upload/images/20210912/20140260xxr02lLTwB.png

然後,为了储存和管理所有的工具列按钮,建立了 ToolbarActionEnum

https://ithelp.ithome.com.tw/upload/images/20210912/201402608bcGR5AIJq.png

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

https://ithelp.ithome.com.tw/upload/images/20210912/20140260aUGTzLgK3G.jpg

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

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

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

画面 1 画面 2
https://ithelp.ithome.com.tw/upload/images/20210912/20140260Fabo52OqNX.jpg https://ithelp.ithome.com.tw/upload/images/20210912/20140260ZNtMXnXGJe.jpg

自订後的范例

https://ithelp.ithome.com.tw/upload/images/20210912/20140260krkAqQntMD.jpg
参考版本:https://github.com/plateaukao/browser/releases/tag/v8.7.3


相关文章:

  • 澳门公司要怎么样才能在大陆经营?
  • Day 28 实作 admin_bp (1)
  • 跨境电商海外仓中转和一件代发有什么区别?
  • 组策略和登录档监控--gpedit.msc及Process Monitor
  • 玩转 Storybook: Day 29 Design System for Developers - Distribute
  • 04 - Uptime - 掌握系统的生命徵象 (2/4) - 使用 Heartbeat 收集系统生命徵象数据
  • DAY 20 制作 Nav Bar - Scrollbar
  • [Day07] - 新拟物风按钮(五) - 参数改变 & 监听变化
  • [Day23]ISO 27001 附录 A.11 实体及环境安全
  • 怎样判断一个产品的市场前景?
  • [Angular] Day21. Common Routing Tasks (一)
  • Bond有哪几个类别?怎么选择?
  • 那些被忽略但很好用的 Web API / Geolocation
  • Day 10 Prototype 制作 - 版面、字体、间距、图示设定小技巧分享
  • Day 13 : 程序除错与异常
  • 狗狗币怎么获得?狗狗币挖矿教程和狗狗币使用方法
  • 国外抗攻击服务器推荐:DDOS高防服务器推荐
  • 支持支付宝的国外VPS主机服务器大全:用支付宝买国外网站空间服务器VPS
  • Linux入门:Linux文件操作教程(目录文件操作和系统资源占用情况操作)
  • 阿里云需要实名认证吗?阿里云个人可以做企业认证吗
  • 301 重定向怎么做?301 重定向教程和方法
  • 智能路由器刷华硕老毛子Padavan固件,实现巨多功能,你懂的!
  • 简单做WordPress网站的方法:最快最便宜的做外贸网站的方法
  • Monzo Bank教程:英国银行卡申请教程【教你国内注册申请欧洲银行卡】
  • Gutenberg 10.6 添加Duotone过滤器、查询模式轮播和最常用标签选择器
  • 阿里云通用型NAS怎么收费的
  • 财富自由怎么实现?如何做到财富自由
  • Python入门教程:Python怎么写
  • 教程/魔改BBR 一键安装脚本 for CentOS/Debian 7+
  • 2020最新Google Voice号码申请方法(非脚本)