加载中…
个人资料
晨钟暮鼓_烟雨姑苏
晨钟暮鼓_烟雨姑苏
  • 博客等级:
  • 博客积分:0
  • 博客访问:34,176
  • 关注人气:5
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

Hybrid App全屏导致的键盘遮挡问题

(2017-08-29 18:52:49)
标签:

it

    咱们接着上篇说。
    为了让设计图可以完美符合,为了更好的使用rem,我们决定在安卓设备中把上标的状态栏隐藏掉。网上大概有几种方案,基本都是通过修改Android清单文件,或者在Activity里面增加一些设定来实现的。
    不知道是因为什么原因,我在清单文件里加的内容会在每次Cordova build的时候被覆盖掉,所以我选择在Activity中修改状态栏。通过Cordova的命令创建Android环境,可以在platforms目录下的源码中找到唯一的一个Activity:
Hybrid <wbr>App全屏导致的键盘遮挡问题
    想要隐藏也非常简单,只需要在loadUrl之前写一句话:
Hybrid <wbr>App全屏导致的键盘遮挡问题
    然后就可以看到状态栏此时已经变成透明的,不会再占用一排区域导致设计图比例崩掉了,虽然透明也挺丑吧这时候就需要让设计来避开啦。需要说明的是,今天我说的Hybrid App其实只有WebView部分,不涉及原生View,这也是接下来要说的问题的前提条件,也就是WebView全屏(我们刚把最后的状态栏也干掉了呢)。
    然后就引出今天要记录的主要问题了,如果不出意外的话,此时App中的input触发键盘弹起,已经不会顶起整个页面了呢。换句话说,曾经的键盘弹出机制已经失效了,键盘依然会出现,但也会遮挡住页面相应的区域,而且还无法滑动,如果你的input恰好在页面的下半部分,那键盘就会直接遮住输入框,输入的是什么都看不到╮(╯▽╰)╭
    这个问题还挺恶心的,前端我没找到什么太好的解决方案,因为这是一个原生的BUG,所以只能用原生来想办法咯(当然你也可以让设计不要把input画在页面下半部分哈哈哈)。
    先参考一篇文章,对这个问题说的非常清楚 Android 爬坑之旅:软键盘挡住输入框问题的终极解决方案 文章里给我们提供了一个专门用来智能分析并自动改变高度的Class,我们来把它放在我们的源码中:
Hybrid <wbr>App全屏导致的键盘遮挡问题
    记得把该引的包引进去:
Hybrid <wbr>App全屏导致的键盘遮挡问题
    调用要放在已经加载WebView之后:
Hybrid <wbr>App全屏导致的键盘遮挡问题
    此时就又可以愉快的运行我们的Android项目啦,cordova run android一跑,我惊奇的发现,我三星的pad一切正常,基本符合我的预期,而小米的pad却出现了打开键盘后状态栏部分一直闪烁,键盘下去也不能恢复等问题,闪的还挺耀眼,根本忍不住不去看。。。而且透明的状态栏虽然不会再影响计算,但依然很难看。
    我就不截图了,把设备搞回去还得改代码啊build啊来一套,你们知道有这个情况就行。
    这是怎么回事咧,我没找到现成的说法,只能跟着上面那个解决BUG的类研究了半天,发现小米的状态栏虽然透明了,但在类中计算和获取值的时候(不是JS计算,是Java中),依然会把状态栏算上,就算重设高度,也不能把值改回来。也就是说,上面那个全屏方案不彻底,导致了这种看着全屏算着不全屏的混沌全屏流的出现。
    多尝试几种方案后发现了一种效果还不错,具体参考这篇文章 Android 显示隐藏状态栏。把文章中的方法放在咱们的Activity中,并同上面那种全屏方案同时使用(我没有尝试单独用,你们可以试试),代码是这个样子的:
Hybrid <wbr>App全屏导致的键盘遮挡问题
    记得是在loadUrl之前调用设置全屏,在loadUrl之后调用那个Bug解决方案。然后run到我的两个设备上,发现这次不再是透明了状态栏,而是彻底消失了,屏幕区域就是设计图区域,完美显示,而且BUG计算代码也没有再出问题。
    不过还是有一些遗留问题的,首先就是,input在获取焦点的时候并不会触发页面上滑,只有在输入第一个字符的时候才能触发。其次,input如果所在的区域overflow-y : hidden;的话,可能会导致键盘弹出后,上面的页面区域不能手动去滑动,只能恰好显示那个输入中的input,去掉overflow就可以了。最后,我设备有限没有太多适配,大家可以尝试一下其他的设备,看还有没有问题,毕竟这种歪路子坑还是挺多的呢。





0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有