项目使用混合开发,Webview+H5很简单大家都可以搜到相关内容。今天重点讲下一个小问题。我们h5页面是远程的。通过url的方式嵌入到Webview中。这时候有个问题,我启动的时候会有一段空白。
这个
这个白色的等待时间,不固定,可能1-2s,可能3-5s。我一直以为是设置的问题,查了很多资料,还换了腾讯的x5内核,结果并不能有什么用。
最终,我看到一篇文章说,这个没有办法,Webview就像是一个浏览器,你加载就是会有这种问题,你只能去优化它,而不能真的解决这个空白。
解决方案:提供一个loading效果。如图:
这个loading是使用了Android自己的控件 ProgressBar,代码如下:
<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"android:layerType="hardware"><com.tencent.smtt.sdk.WebViewandroid:id="@+id/web_view"android:layout_width="match_parent"android:layout_height="match_parent"tools:layout_editor_absoluteX="8dp"tools:layout_editor_absoluteY="8dp"tools:ignore="MissingConstraints"/><FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent" ><ProgressBarandroid:id="@+id/pbLarge"style="?android:attr/progressBarStyleLarge"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:indeterminateDrawable="@drawable/loading_anim" /></FrameLayout></android.support.constraint.ConstraintLayout>
这是布局。
样式:
注意,添加样式文件
<?xml version="1.0" encoding="utf-8"?><rotate xmlns:android="/apk/res/android" android:pivotX="50%"android:pivotY="50%"android:fromDegrees="0"android:toDegrees="1440"android:drawable="@mipmap/loading"></rotate>
Webview要设置WebChromeClient
webView.setWebChromeClient(webChromeClient);
private WebChromeClient webChromeClient = new WebChromeClient(){@Overridepublic void onProgressChanged(WebView view, int newProgress) {pb_webview.setProgress(newProgress);if(newProgress==100){pb_webview.setVisibility(View.GONE);}else{pb_webview.setVisibility(View.VISIBLE);pb_webview.setProgress(newProgress);}}};
这代码的意思是,webChromeClient 会捕捉当前进度。是不是到了100,到了一百,就表示加载完成。去掉loading效果。
否则就一直加载。
至此,效果已经好了。有好的解决方案可以留言,或者私聊我。
如果觉得《Android webview打开网页空白优化》对你有帮助,请点赞、收藏,并留下你的观点哦!