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

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

  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開發公司燚軒科技整理髮布,原創不易,如需轉載請註明出處。

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