WebView的简单使用
目录
- WebView加载本地html文件
- WebView加载网页并加一个进度条实现进度的显示
WebView加载本地html文件
在main文件夹下建一个assets文件夹,这个文件夹中的内容是不被系统编译的,把要加载的本地的网页文件放到这个文件夹中就可以了。目录结构如下图所示:
这里的test.html是一个简单的html网页,你可以自己写一个,或者去网上下载一个,等下我们就要加载这个网页。
WebViewActivity的Java代码部分:
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
public class WebViewActivity extends AppCompatActivity {
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web_view);
mWebView = findViewById(R.id.wv_webview);
// 加载本地html文件,file:///android_asset是系统获取你的assets文件夹,test.html是这个文件夹中的文件
mWebView.loadUrl("file:///android_asset/test.html");
// 设置WebView支持JavaScript脚本
mWebView.getSettings().setJavaScriptEnabled(true);
}
}
如果你的网页中不需要调用js代码,那么那句设置支持js脚本的话可以不要。
WebViewActivity的xml代码部分:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<WebView
android:id="@+id/wv_webview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</WebView>
</LinearLayout>
这里就一个线性布局加一个WebView组件,很简单。
WebView加载网页:
效果图如下:
仔细看还是可以看到加载的进度条的,下面我们来看看代码是怎么实现的。
java代码部分:
import android.graphics.Bitmap;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
public class WebViewActivity extends AppCompatActivity {
private WebView mWebView;
private ProgressBar mProgressBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web_view);
mProgressBar = findViewById(R.id.pb);
mWebView = findViewById(R.id.wv_webview);
// 设置WebView支持JavaScript脚本
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebViewClient(new MyWebViewClient());
mWebView.setWebChromeClient(new MyWebChromClient());
mWebView.loadUrl("https://m.baidu.com");
}
class MyWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
// 使用WebView加载网页中的内容,而不是使用其它浏览器打开
view.loadUrl(request.getUrl().toString());
return true;
}
// 在网页开始加载的时候做的事情
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
// 在网页结束的时候做的事情
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
// 调用JavaScript代码
// mWebView.loadUrl("javascript:alert('hello')");
}
}
class MyWebChromClient extends WebChromeClient {
//设置WebView显示的进度
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
// 设置进度条的进度
if (newProgress == 100) {
// 当进度条到达100的时候,就关闭进度
mProgressBar.setVisibility(View.GONE);
} else {
//设置进度条显示
mProgressBar.setVisibility(View.VISIBLE);
//设置进度条的进度
mProgressBar.setProgress(newProgress);
}
}
// 将网页的标题设置到标题栏
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
//设置标题栏显示网页标题
setTitle(title);
}
}
//重写onKeyDown方法,解决点击返回键直接退出Activity的问题
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
// 当点击返回键和WebView能够返回时
if (keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
// 返回
mWebView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
}
xml代码部分:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ProgressBar
android:id="@+id/pb"
android:layout_width="match_parent"
android:layout_height="3dp"
style="@android:style/Widget.Material.ProgressBar.Horizontal"
android:max="100"/>
<WebView
android:id="@+id/wv_webview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</WebView>
</LinearLayout>
这里就比加载本地html的代码多了个ProgressBar