Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to solve the problem of Webview slipping in and out of the screen flicker in Android". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Problem diagram

Xml layout:

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

Solve the problem

Scheme comparison

Consider the point android:hardwareAccelerated= "false" 5.0. the Android system is enabled by default in order to make full use of the features of GPU and make the interface rendering smoother. If you turn it off, the whole page is not smooth, so the loss outweighs the gain-- > give up setBackgroundColor ("# 00000000"); setBackgroundResource (R.drawable.white) Set the background color, but webview itself is a loaded H5 page, using the background color of the H5 page, and as you can see from the gif above, there is no effect-- > abandon = = through the style layout, let webview remain initialized in the first screen = = the scheme tried in this article

Scheme exploration

1.xml layout

Use the FrameLayout overlay to keep the webview initialized in the first screen, and then set the padding of the webview so that the complete H5 content is displayed below the ContentView.

But-- > webview setting padding is not valid at all!

What should I do? In any case, I can't think of why. After all, there are some defects in the implementation of api (https://stackoverflow.com/questions/9170042/how-to-add-padding-around-a-webview).

two。 Solve the problem

The final solution is to control the padding of H5 by injecting js code.

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 ");});}})

Take a look at the result of the conjecture run:

The display of H5 is missing the top, so it seems that padding is ineffective. But why doesn't it work? is there a problem with setting up padding?

After that, I looked at the source code of the embedded web page (the web page is a random url on the network):

Https://36kr.com/

Open the page editing mode to view the style of the body section:

You can see that the js-controlled style to be injected is not set. So you can set the parameters of padding-top through here.

But it is found that the parameter set is invalid, what is the reason? Then turn down:

It turns out that the highest-level style display of padding-top is controlled in body, so the setting in element-style is invalid. So either comment out this paragraph and rewrite it to element-style, or try to set the method of margin-top. The latter approach is adopted here:

As you can see, the height of the set marin-top blank appears at the top of the page.

You only need to convert this part of the operation to the corresponding code:

Put the above

WebView.loadUrl ("_ javascript:document.body.style.paddingTop="+ contentViewHeight +" px "; void 0")

To be replaced by:

WebView.loadUrl ("_ javascript:document.body.style.marginTop=\" + contentViewHeight + "px\"; void 0 ")

3. Running effect

You can see that there is no flicker.

This is the end of the content of "how to solve the problem of Webview slipping in and out of the screen flicker in Android". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.