Android TV开发---WebView焦点处理

背景

开发的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