This article provides a solution to the problem of Webview flickering when sliding from the visible area of the screen to the inside (and vice versa).

The problem here

XML layout: 

<? The XML version = "1.0" encoding = "utf-8"? > <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:fillViewport="true" android:overScrollMode="never" android:scrollbars="none"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <View android:id="@+id/contentView" android:layout_width="match_parent" android:layout_height="600dp" android:background="@color/colorPrimary" /> <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/contract_font"></WebView> </LinearLayout> </android.support.v4.widget.NestedScrollView>Copy the code

As you can see, NestedScrollView has a nested WebView, and when the WebView is not initially in a screen, there is a brief white block when sliding in and out of the screen.

To solve the problem

Scheme comparison

plan Considering the point
android:hardwareAccelerated=”false” 5.0 Android system in order to make full use of GPU features, make the interface rendering smoother and enabled by default, if turned off, then the whole webpage is not smooth, is not worth the loss — >To give up
SetBackgroundColor (Color. ParseColor (” # 00000000 “)); setBackgroundResource(R.drawable.white); Set the background, but the webView itself is loaded H5 page, using the background of the H5 page, and from the GIF above you can see that there is no effect — >To give up
The webView is initialized to remain in the first screen by styling the layout == This paper tries the scheme

Plan to explore

1. The XML layout

<? The XML version = "1.0" encoding = "utf-8"? > <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:fillViewport="true" android:overScrollMode="never" android:scrollbars="none"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/contract_font"></WebView> <View android:id="@+id/contentView" android:layout_width="match_parent" android:layout_height="600dp" android:background="@color/colorPrimary" /> </FrameLayout> </android.support.v4.widget.NestedScrollView>Copy the code

The webView is initialized by FrameLayout overlay, and the Padding of the WebView is set so that the full H5 content is displayed below the ContentView. But — > WebView setting padding doesn’t work at all!!

What to do? No matter how and why to be so, after all, the implementation of API itself is some defects (https://stackoverflow.com/questions/9170042/how-to-add-padding-around-a-webview)

2. Solve problems

The final solution is to inject JS code to control the PADDING of H5.

webView.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { contentView.post(new Runnable() { @Override public void run() { contentViewHeight = px2dp(getApplicationContext(), contentView.getMeasuredHeight()); if (contentViewHeight > 0) { webView.loadUrl("javascript:document.body.style.marginTop=\"" + contentViewHeight + "px\"; void 0"); }}}); }});Copy the code

Take a look at the results of the conjecture run:

Open web Edit mode and look at the body section:

Just need to this part of the operation can be converted to the corresponding code: will the webView above. LoadUrl (” javascript: document. Body. Style. The paddingTop = “” + contentViewHeight +” px “; void 0”); Replace with:

webView.loadUrl("javascript:document.body.style.marginTop=\"" + contentViewHeight + "px\"; void 0");
Copy the code

3. Operation effect

conclusion

The implementation of the whole scheme is actually two: 1. Layout, so that the webView in a screen initial; 2. Set the margin-top or padding-top of the H5 webpage;