用户登录
用户注册

分享至

【android】webview插入原生控件的的屏幕适配

  • 作者: 贝壳116
  • 来源: 51数据库
  • 2021-07-09

最近在做广告sdk,由于我这边是webview的展示网页里插广告,需要把广告插到网页底部的一个固定的分享按钮上面,但由于它是用的rem,高度是会跟随屏幕变化,所以我们只能先去获取固定按钮的height在当前手机上的大小,再设置广告的paddingbottom。思路有了,那我们开始做吧!

WebView页面嵌入原生控件

这篇文章是在webview上嵌入view,设置一个占位元素,获取它离顶部的距离,再把view移动,盖在占位元素上面。

但是这个方法很明显与我们的需求不一样,但等等还是有用处的,我们接下来再说。
我们首先可以在android里调用js方法,来获取网页动态变化的fontsize。我们也可以直接在网页把那段代码扣下来。
Android:你要的WebView与 JS 交互方式 都在这里了 (参考网址)
下面是网页上的js

        /* 设置rem */
        window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() {
            function c() {
                var d = document.documentElement;
                var cw = d.clientWidth || 750;
                d.style.fontSize = 100 * (cw / 750) + 'px';
            }
            c();
            return c;
        })(), false);

下面在android用kotlin写的

  private fun getFontsize(){
        webView.evaluateJavascript(
            "javaScript: function getFontsize() {\n"
                    + "        var d = document.documentElement;\n"
                    + "         var cw = d.clientWidth || 750;\n"
                    + "         var px = 100 * (cw / 750);\n"
                    + "        return px;\n"
                    + "    };getFontsize()",
            object : ValueCallback<String?> {
                override fun onReceiveValue(value: String?) {
                    var value = 1.4f*value!!.toFloat()
                    LogUtil.d("webtest1", UIUtils.dip2px(getActivity(), value!!.toFloat()).toString())
                    mExpressContainer?.setPadding(0,0,0,dip2px(getActivity(), value))              
                   ) }

下面来详细讲一下上面代码的意思

var value = 1.4f*value!!.toFloat()

当我们获取到fontsize后,分享按钮的height为1.4rem,fontsize*height得到分享按钮的高度dp。

mExpressContainer?.setPadding(0,0,0,dip2px(getActivity(), value))

找一个dp2px的工具类,转换为当前屏幕的分辨率的px,设置广告离底部的高度。

大功告成!!(才怪

呵呵,还是有很多小问题,上面那个setPading只能整数,我们的dp有小数,所以我们广告底部可能会出现一个小缝,把dp2px工具类的四舍五入“+0.5F”删了。

还有就是加了广告之后,可能会遮挡掉网页一部分,我们获取广告高度,用上面第一个网址的做法,给网页底部bottom加上广告的高度,防止遮挡广告。

还有一个小小问题就是你横屏的时候屏幕发生了变化,它网页的是动态的,我的android这边的不是,我也不会js不知道怎么办,呵呵。当然也可以检测你屏幕变化的时候,再一次获取fontsize,加载广告。但是横屏屏幕都会被广告全挡住了,做也没意义懒得搞了。

软件
前端设计
程序设计
Java相关