诉求：在WebView加载的web页面特定位置展示原生控件的内容,并跟随web元素滑动。
实现思路：
- html文档流中插入占位元素初始高度为0.
- 当页面加载完成后获取元素的位置，把原生控件移动到此位置.
- 设置占位元素高度为原生控件的高度.
效果：
黄色背景为TextView，其他为html内容
html中插入占位元素
其中id为的advertisement元素 为需要插入原生控件的的位置.
<div id="section1"></div>
<div id="advertisement"></div>
<div id="section2"></div>
获取元素的位置，移动原生控件.
这里在onPageFinished(WebView view, String url)回调中,获取元素的位置，调用js方法getAdPosition获取位置(js传回的位置单位为dp),然后通过setTranslationY移动原生控件到id为advertisement的html元素位置处.
mWebview.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
L.e("mWebview:",mWebview.getChildCount()+"");
TextView textView=new TextView(getApplication());
textView.setTextColor(Color.GRAY);
textView.setTextSize(20f);
textView.setBackgroundColor(Color.YELLOW);
textView.setText("WebActivity TextView ");
textView.setGravity(Gravity.CENTER);
textView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,DensityUtil.dp2px(AndroidApplication.getContext(),TV_HEIGHT)));
mWebview .evaluateJavascript("javaScript:getAdPosition()",
new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.i("getAdPosition:",value);
textView.setTranslationY(DensityUtil.dp2px(WebActivity.this,Float.parseFloat(value)));
mWebview.addView(textView);
mWebview.loadUrl("javaScript:setAdHeight("+TV_HEIGHT+")");
}
});
}
});
设置占位元素高度
为了避免覆盖html的内容，还需要调用js方法setAdHeight把advertisement这个div设置为和原生控件同样的高度
js中的两个方法
<script type="text/javascript">
function getAdPosition() {
var advertisement = document.getElementById("advertisement");
return advertisement.offsetTop;
}
function setAdHeight(height) {
var advertisement = document.getElementById("advertisement");
advertisement.style.height=height+"px";
}
</script>
