Android開發中ScollView 嵌套 WebView 底部高度無法自適應解決

最近要做一個頁面,需要 ScrollView 嵌套 WebView,怎麼嵌套,怎麼解決焦點和 touch 事件衝突,網上一大堆,這裏就不贅述了,但是發現 WebView 從一個高度很高的網頁加載一個高度很低的網頁的時候,高度無法自適應了,造成底部會有一大片的空白,下面鄭州app開發公司燚軒科技來分享一下我們的解決方案。

JS 注入,獲取頁面內容高度,設置成 WebView 高度

JS 注入,通過前端 JS 調用 native 方法,把高度值傳遞過來,然後通過 layoutparams 去設置 webview 的高度:

mWebView.setWebViewClient(new WebViewClient() {

@Override

public void onPageFinished(WebView view, String url) {

mWebView.loadUrl("javascript:App.resize(document.body.getBoundingClientRect().height)");

super.onPageFinished(view, url);

}

});

mWebView.addJavascriptInterface(this, "App");

@JavascriptInterface

public void resize(final float height) {

getActivity().runOnUiThread(new Runnable() {

@Override

public void run() {

//Toast.makeText(getActivity(), height + "", Toast.LENGTH_LONG).show();

//此處的 layoutParmas 需要根據父控件類型進行區分,這裏爲了簡單就不這麼做了

mWebView.setLayoutParams(new LinearLayout.LayoutParams(getResources().getDisplayMetrics().widthPixels, (int) (height * getResources().getDisplayMetrics().density)));

}

});

}

需要注意的是上面的 resize 方法一定要上面那麼寫,寫成:

mWebView.getLayoutParams().height = (int) (height * getResources().getDisplayMetrics().density);

這樣是無法成功的,看來寬度也是有影響的

感謝 @imesong 同學,這段代碼有亮點可以完善的地方:

mWebVew.setLayoutParam() 時,應該根據 WebView 父控件的類型,創建 LayoutParam,或者直接用 mWebView.getLayoutParams() 獲取 LayoutParams;

調用 JAVA 方法的 JS ,可以在網頁加載完成時自己加載下面這段 JS 代碼(區別在於一個是終端處理,一個是前段處理),比如:

(function(w){

window.App.resize(document.body.getBoundingClientRect().height);

})(window);

加載這段 JS 就可以了,“APP” 和上面一樣是自己註冊是自己註冊的接口名字;

思路是一樣的,處理方式有差異。

試驗不太成功的方式

網上也找到了一些其他的方式,試了一下,不太成功,不知道是不是使用姿勢的問題,感興趣的也可以試試,反饋結果給我。

先加載一個空網頁

在從高網頁加載低網頁的時候,先加載一個空內容,接着立馬做相關的處理操作(比如加載新的網頁,更改字體等),

// load empty data to shrink the WebView instance

mArticleWebView.loadUrl(Constants.ASSETS_EMPTY);

// load real data

mArticleWebView.loadDataWithBaseURL(null,data,"text/html","utf-8",null);

Constants.ASSETS_EMPTY 僅僅只是一個 String 子串,標識該空網頁的位置,所以該變量可以爲 “file:///android_asset/Empty.html”.

試了一下,也是不好用的,不知道是不是我的操作問題.

修改 Setting 屬性

wv.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);

wv.setVerticalScrollBarEnabled(false);

wv.setVerticalScrollbarOverlay(false);

wv.setHorizontalScrollBarEnabled(false);

wv.setHorizontalScrollbarOverlay(false);

通過我們鄭州app開發公司燚軒科技多次的嘗試得出:第三種方式是比較合適的,因此大家可以重點借鑑一下第三種方法來解決問題。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章