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

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

WebView页面嵌入原生控件

这篇文章是在webview上嵌入我们需要插入的view，在网页上设置一个占位元素，获取它离顶部的距离，设置占位元素的高度和需要插入的view一样的高度，再设置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。(关于rem,dp,px请自己找资料看)

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

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

大功告成！！（才怪

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

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

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