动态 UI API
从您的网页应用动态更改原生 UI 元素,例如状态栏或底栏的颜色。
WebViewGold 允许您在 Web 应用中动态自定义 UI 元素。这些元素可以包括状态栏、底部栏(iOS)、导航栏(Android)以及下拉刷新(iOS)。WebViewGold 提供以下命令用于动态自定义这些元素:
- statusbarcolor://
- 用于自动更改状态栏及其他相关 UI 元素颜色的主命令,例如状态栏文字颜色、底部栏颜色(iOS)、导航栏颜色(Android)等。
- statusbartextcolor://
- 允许您手动更改状态栏文字颜色(iOS 和 Android)。
- bottombarcolor://
- 若存在底部栏(iOS)或导航栏(Android)UI 元素,允许您手动更改其颜色。
- hidebars://
- 允许您隐藏状态栏背景,其上的文字仍显示在透明背景之上。
更改状态栏颜色(并自动更改其他 UI 元素颜色):
此功能支持以下格式的颜色输入:
- RGB = {red, green, blue}
使用如下 JavaScript URL 即可更改状态栏颜色:
<script> // Example: red window.location.href = "statusbarcolor://255,0,0"; </script>更改状态栏颜色后,状态栏文字会根据颜色深浅自动切换为合适的颜色(白色或黑色)。
可选的 UI 元素如下拉刷新(iOS)、底部栏(iOS)以及导航栏(Android)的颜色也会随之自动调整。
更改状态栏文字颜色:
如果您希望手动指定状态栏文字颜色,可以使用此选项。
此功能支持以下文本输入选项:
- "white"
- "black"
<script> // Example: white text window.location.href = "statusbartextcolor://white"; // Example: black text window.location.href = "statusbartextcolor://black"; </script>
更改底部栏颜色:
此功能支持以下格式的颜色输入:
- RGB = {red, green, blue}
使用如下 JavaScript URL 即可更改状态栏颜色:
<script> // Example: red window.location.href = "bottombarcolor://255,0,0"; </script>
隐藏状态栏
hidebars 功能可为开启或关闭两种状态。
需要说明的是,状态栏的文字(例如时间和电量百分比)仍会对用户可见, 但其周围的背景会变为透明,且 WebView 会扩展以填充腾出的空间。
使用如下 JavaScript 更改状态栏的可见状态:
<script> // Example: hide the bars from view window.location.href = "hidebars://on"; // Example: redisplay the bars after being hidden window.location.href = "hidebars://off"; </script>