Android中WebView的使用简介

WevView是一个可以显示网页的控件，它采用WebKit渲染引擎来显示网页。由于在实际开发中并未使用过WebView，所以对WebView并未有经验之谈，还有很多没有整理不打算写了，以后实际开发中在整理吧。本文参考慕课网、Android API。

1、基本用法

首先添加网络访问权限：

<code class="hljs applescript has-numbering"><uses-permissionandroid:<span class="hljs-property">name</span>=<span class="hljs-string">"android.permission.INTERNET"</span>/></code>

布局文件，添加WebView控件：

<code class="hljs xml has-numbering"><span class="hljs-pi"><?xml version="1.0" encoding="utf-8"?></span>
<span class="hljs-tag"><<span class="hljs-title">LinearLayout</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>
    <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
    <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"match_parent"</span>
    <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"vertical"</span> ></span>

    <span class="hljs-tag"><<span class="hljs-title">LinearLayout
</span>        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
        <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"40dp"</span>
        <span class="hljs-attribute">android:gravity</span>=<span class="hljs-value">"center_vertical"</span>
        <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"horizontal"</span> ></span>

        <span class="hljs-tag"><<span class="hljs-title">TextView
</span>            <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/tev_title"</span>
            <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"0dp"</span>
            <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
            <span class="hljs-attribute">android:layout_weight</span>=<span class="hljs-value">"1"</span>
            <span class="hljs-attribute">android:layout_marginLeft</span>=<span class="hljs-value">"30dp"</span>
            <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"title"</span> /></span>

        <span class="hljs-tag"><<span class="hljs-title">ImageView
</span>            <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/img_refresh"</span>
            <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"wrap_content"</span>
            <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
            <span class="hljs-attribute">android:layout_marginRight</span>=<span class="hljs-value">"20dp"</span>
            <span class="hljs-attribute">android:src</span>=<span class="hljs-value">"@drawable/icon_refresh_focus"</span> /></span>
    <span class="hljs-tag"></<span class="hljs-title">LinearLayout</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">ProgressBar
</span>        <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/progressBar"</span>
        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
        <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"10dp"</span>
        <span class="hljs-attribute">style</span>=<span class="hljs-value">"?android:attr/progressBarStyleHorizontal"</span>
        /></span>

    <span class="hljs-tag"><<span class="hljs-title">WebView
</span>        <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/webView"</span>
        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
        <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"0dp"</span>
        <span class="hljs-attribute">android:layout_weight</span>=<span class="hljs-value">"1"</span> /></span>

<span class="hljs-tag"></<span class="hljs-title">LinearLayout</span>>

MainActivity.<a target=_blank href="http://lib.csdn.net/base/javaee" class="replace_word" title="Java EE知识库" target="_blank" style="color:#df3434; font-weight:bold;">Java</a>

</span></code><pre class="prettyprint" name="code"><code class="hljs java has-numbering"><span class="hljs-annotation">@SuppressLint</span>(<span class="hljs-string">"JavascriptInterface"</span>)
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainActivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Activity</span> {</span>

    TextView tev_title;
    ImageView img_refresh;
    ProgressBar progressBar;
    WebView webView;

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreate</span>(Bundle savedInstanceState) {
        <span class="hljs-keyword">super</span>.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        webView = (WebView) findViewById(R.id.webView);
        <span class="hljs-comment">// 默认使用系统浏览器加载网页</span>
        webView.loadUrl(<span class="hljs-string">"h://www.taobao.com/"</span>);
        <span class="hljs-comment">//启用JavaScript</span>
        webView.getSettings().setJavaScriptEnabled(<span class="hljs-keyword">true</span>);
        webView.setWebViewClient(<span class="hljs-keyword">new</span> WebViewClient() {
            <span class="hljs-annotation">@Override</span>
            <span class="hljs-keyword">public</span> <span class="hljs-keyword">boolean</span> <span class="hljs-title">shouldOverrideUrlLoading</span>(WebView view, String url) {
                <span class="hljs-comment">// 使用APP加载网页</span>
                view.loadUrl(url);
                <span class="hljs-keyword">return</span> <span class="hljs-keyword">true</span>;
            }

            <span class="hljs-annotation">@Override</span>
            <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onReceivedError</span>(WebView view, <span class="hljs-keyword">int</span> errorCode,
                                        String description, String failingUrl) {
                <span class="hljs-comment">// 加载本地的错误网页</span>
                <span class="hljs-comment">// 可以改成本地xml</span>
                view.loadUrl(<span class="hljs-string">"file:///android_asset/error.html"</span>);
                <span class="hljs-keyword">super</span>.onReceivedError(view, errorCode, description, failingUrl);
            }

        });

        webView.setWebChromeClient(<span class="hljs-keyword">new</span> WebChromeClient() {
            <span class="hljs-annotation">@Override</span>
            <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onReceivedTitle</span>(WebView view, String title) {
                <span class="hljs-comment">// webview添加title</span>
                tev_title.setText(title);
                <span class="hljs-keyword">super</span>.onReceivedTitle(view, title);
            }

            <span class="hljs-annotation">@Override</span>
            <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onProgressChanged</span>(WebView view, <span class="hljs-keyword">int</span> newProgress) {
                <span class="hljs-comment">//设置进度条</span>
                progressBar.setProgress(newProgress);
                <span class="hljs-keyword">super</span>.onProgressChanged(view, newProgress);
            }

        });

        img_refresh.setOnClickListener(<span class="hljs-keyword">new</span> View.OnClickListener() {
            <span class="hljs-annotation">@Override</span>
            <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onClick</span>(View arg0) {
                <span class="hljs-comment">// 刷新webview</span>
                webView.reload();
            }
        });

        <span class="hljs-comment">// webview 下载文件</span>
        webView.setDownloadListener(<span class="hljs-keyword">new</span> DownloadListener() {
            <span class="hljs-annotation">@Override</span>
            <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onDownloadStart</span>(String url, String arg1, String arg2,
                                        String arg3, <span class="hljs-keyword">long</span> arg4) {

                System.out.println(<span class="hljs-string">"onDownloadStart:"</span> + url);

                <span class="hljs-comment">// 根据url下载文件，非系统浏览器</span>
                url.endsWith(<span class="hljs-string">".apk"</span>);
                <span class="hljs-comment">// 下载逻辑...</span>

                <span class="hljs-comment">// 使用系统浏览器下载文件</span>
                Uri uri = Uri.parse(url);
                Intent intent = <span class="hljs-keyword">new</span> Intent(Intent.ACTION_VIEW, uri);
                startActivity(intent);
            }
        });
    }

    <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">initView</span>() {
        webView = (WebView) findViewById(R.id.webView);
        tev_title = (TextView) findViewById(R.id.tev_title);
        img_refresh = (ImageView) findViewById(R.id.img_refresh);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">boolean</span> <span class="hljs-title">onKeyDown</span>(<span class="hljs-keyword">int</span> keyCode, KeyEvent event) {
        <span class="hljs-comment">// Check if the key event was the Back button and if there's history</span>
        <span class="hljs-keyword">if</span> ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {
            webView.goBack(); <span class="hljs-comment">//goBack()表示返回WebView的上一页面    </span>
            <span class="hljs-keyword">return</span> <span class="hljs-keyword">true</span>;
        }
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">super</span>.onKeyDown(keyCode, event);
    }

}</code>

2、与JavaScript互相调用
与 JavaScript互相调用，需要创建JavaScript代码和客户端代码之间的接口类进行交互操作。

<code class="hljs java has-numbering"><span class="hljs-javadoc">/**
 * 创建您的JavaScript代码和客户端代码之间的接口类
 */</span>
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">JavaScriptInterface</span> {</span>
    Context mContext;

    <span class="hljs-javadoc">/** Instantiate the interface and set the context */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-title">JavaScriptInterface</span>(Context c) {
        mContext = c;
    }

    <span class="hljs-javadoc">/** Show a toast from the web page */</span>
    <span class="hljs-annotation">@JavascriptInterface</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">show</span>(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}</code>

MainActivity.java

<code class="hljs java has-numbering"><span class="hljs-comment">// webview与JavaScript的调用（代码混淆的时候 java类需要keep掉，即不能被混淆， 不然调用失败）</span>
webView = (WebView) findViewById(R.id.webView);
btn_androidToJavaScript= (Button) findViewById(R.id.btn_toJs);
<span class="hljs-comment">//启用JavaScript</span>
webView.getSettings().setJavaScriptEnabled(<span class="hljs-keyword">true</span>);
webView.loadUrl(<span class="hljs-string">"file:///android_asset/index.html"</span>);
<span class="hljs-comment">// 设置编码</span>
webView.getSettings().setDefaultTextEncodingName(<span class="hljs-string">"utf-8"</span>);
<span class="hljs-comment">// 添加一个对象, 让JS可以访问该对象的方法, 该对象中也可以调用JS中的方法</span>
webView.addJavascriptInterface(<span class="hljs-keyword">new</span> JavaScriptInterface(<span class="hljs-keyword">this</span>), <span class="hljs-string">"android"</span>);
btn_androidToJavaScript.setOnClickListener(<span class="hljs-keyword">new</span> View.OnClickListener() {

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onClick</span>(View arg0) {
        <span class="hljs-comment">//调用js的jsShow()2方法</span>
        webView.loadUrl(<span class="hljs-string">"javascript:jsShow2()"</span>);
        }
 });</code>

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">html</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>My JSP 'index.jsp' starting page<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">jsShow</span><span class="hljs-params">()</span>{</span>
    <span class="hljs-comment">//调用android的show方法</span>
    android.show(<span class="hljs-string">"JavaScript to Android!"</span>);
    }
    <span class="hljs-comment">//将由android调用</span>
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">jsShow2</span><span class="hljs-params">()</span>{</span>
    document.getElementById(<span class="hljs-string">"id_a"</span>).innerHTML=<span class="hljs-string">"Android to JavaScript!"</span>;
   }

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>

<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-comment"><!--调用android中的show（）方法 --></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">onclick</span>=<span class="hljs-value">"jsShow()"</span>></span>This is my JSP page! <span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"><<span class="hljs-title">br</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"id_a"</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"><<span class="hljs-title">br</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code>