电子书阅读器上的浏览器 [Day07] 改善更多的 UI

在 Day02 时有提到，电子纸萤幕设备上的 UI 设计原则是减少画面的重绘。我们可以看到上面图中的弹出表单，除了它在显示时，会将全部画面做黑色遮罩，造成全画面重绘之外，它还很好心地将所有的功能分成了四个区块，包含分页、分享、储存，和点点点。每个区块中各包含五项功能。

好看归好看，但是实用性不是很高。如果你想要选的功能是「点点点」区块中的 Settings 的话，你得要先叫起这份弹出表单（预设会是在分页区块），然後点击「点点点」图案，再点击 Settings 选项。对於偶尔要使用的功能来说，还不会造成太大困扰，但如果常常要用到的功能都得要这麽操作的话，可能很快就会放弃这个 browser APP 了。

所以，这一次我们来解决一下这个问题，把所有的功能全部集中在一起，并且试着移除弹出表单的黑色庶罩。

集中所有按钮

首先，我们先在 build.gradle 中加入 GridLayout 元件：

implementation 'androidx.gridlayout:gridlayout:1.0.0'

然後，把旧的 layout 都先拔除。下图中 41 行的 LinearLayout 包含了分页预览按钮图案及文字，下面还有十几个按钮的 Layout 也都长这样，全都要移除。

接着，在 GridLayout 中指定一下行数及栏数，然後把一个个功能用 ImageView 放进去(如同 35 行到 39 行)。

由於这些 ImageView 的 id 我都重新命名了，在 BrowserActivity 中处理点击的地方也得要稍做修改才行。

移除表单造成的黑色遮罩

这些图案都是显示在弹出的 BottomSheetDialog 中。BottomSheetDialog 在生成的时候，可以指定 Theme 给它。所以我建了一个移除背景的 Theme，然後再在每个生成 BottomSheetDialog 时，代入我自订的 Theme。

<style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="android:backgroundDimAmount">0</item>
    <item name="android:windowAnimationStyle">@null</item>
</style>

然後在有被生成的地方代入它

bottomSheetDialog = new BottomSheetDialog(context, R.style.BottomSheetDialog);

现在，来看看改完後的模样吧！

虽然没有原本分区块时的清楚明白，但是习惯後，这种一次可以点击到任何想用的功能还是比较舒服的。对了，在这个版本中，我还顺手把 BrowserActivity.java 转成 kotlin 格式了，不然一直写 Java 实在是很令人受不了。关於更多的改集，可以参考下面连结中的其他 commit 。

参考原始码版本

明天，我们要开始进入跟 WebView 打交道的功能了！