WebView的简单使用

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