背景

开发的Android TV应用时,有一个做题模块用到了WebView做为题目和选项的展示容器

问题

对于正常的文字内容来说,在相应元素中使用tabindex属性即可实现焦点的简单控制,但是此处展示的题目和选项会涉及到公式,相应位置已用MathJax做了转换,经过转换后用图形化的公式替代了文字符号描述,在焦点控制上就出现了问题,这些公式会获取到焦点,导致遥控器在选项间切换时焦点会跳到公式上,无法正确切换选项

解决过程

刚开始的时候尝试了tabindex以及各种属性试图让内容无法获取焦点,均告失败

尝试手动控制焦点的切换

1. 监听遥控器按键输入

问题:开始是在js中做了监听,发现按键的响应要到WebView上需要多按一次按键才行

解决:改为在activity中监听按键输入

2. 通过id获取到元素,调用focus方法获取焦点

问题:即使手动控制焦点的切换,公式仍旧会获取到焦点

解决:在这一块卡了很久,其实想想是钻了牛角尖了,太过纠结于公式和选项之间焦点的交互,在禁用了WebView获取焦点后,即便公式也是无法再获得焦点了,最终的焦点就能由自己手动控制了,此处焦点禁用使用clearFocus()方法,在监听每次按键时执行

3. 通过WebView和原生代码的交互,对应按键按下时做选项的焦点控制

问题:由于清除了WebView的焦点,在按ok键确定选择时,js的onclick方法失效

解决:监听上下按键时记录下当前焦点所在的选项,在按下ok键时根据记录下的选项做下一步的操作

4. 确定选项后会判断对错并给出解答,焦点移动到WebView上后,长按下键可以滚动WebView查看

问题:查看完以后,选择跳转下一题,题干上方出现一大片空白

解决:尝试了各种scroll滚动,都不太满意,查看解答部分出现的代码,是调用了SlideDown方法,而在新题初始化后调用的是hide方法隐藏了解答部分,导致页面高度突然改变,出现空白,将hide换做SlideUp方法,虽然会有解答部分隐藏的画面,但问题算是解决了,后续可以在控制SlideUp的速度,或者获取到题干距离顶部的距离,调用window的scrollTo方法滚动顶部

总结

差不多就这些,其中还有些关于焦点的小细节不再赘述,最重要的是跳出思维定势,把握主要矛盾,灵活运用各种api

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐