Android WebView详解与优化

本文是对WebView控件的使用详解,涉及到应用访问互联网的几种方式.如通过意图,通过Asstes目录下的HTML文件,URL地址等等.开文须强调的是,我们通过意图和Asstes目录下的HTML文件访问互联网时,是不需要配置Manifest清单文件的, 而通过WebView和URL访问则需在清单文件中添加如下代码:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.webview">

    <!--允许应用访问互联网-->
    <uses-permission android:name="android.permission.INTERNET"></uses-permission>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

布局文件非常简单,只需拖一个WebView控件即可,如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.webview.MainActivity">


    <WebView
        android:id="@+id/WebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="13dp"
        android:layout_marginStart="13dp"
        android:layout_marginTop="15dp" />

</RelativeLayout>

前面提到通过访问Asstes目录下的HTML文件访问互联, 也就是说Asstes目录下可存放一个标准的HTML文件, 里面的HTML标签有访问互联网的功能,如设置A标签的Href属性. 那么我们可以通过访问HTML文件来达到间接访问互联网的目的,但是对于Android Studio的工程来说,并没有Asstes目录,需我们手动创建, 选中工程下面的main目录 右键 new–>Directory 取名为asstes

a.html是一行标准的HTML代码,我们可以通过它来访问百度(不知道为什么A标签里面显示中文会乱码 , Android Studio 是utf-8格式)

通过java代码实现应用访问互联网,WebView详解如下:

package com.webview;

import android.app.ProgressDialog;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import android.webkit.WebChromeClient;
import android.webkit.WebResourceRequest;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    //声明WebView控件
    private WebView webView;
    //声明对话框控件
    private ProgressDialog progressDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.WebView);

        /* 通过意图访问互联网
        String url = "http://blog.youkuaiyun.com/li1996heng";
        Uri uir = Uri.parse(url);
        Intent intent = new Intent(Intent.ACTION_VIEW, uir);
        startActivity(intent);*/

        //通过asstes目录下的HTML文件访问互联网
        webView.loadUrl("file:///android_asset/a.html");

        //通过URL地址访问互联网(需要在Manifest中做访问互联网的配置)
        webView.loadUrl("http://blog.youkuaiyun.com/li1996heng");

        // 以上所有访问互联网的方式都是通过系统自带浏览器或第三方浏览器


        // 以下代码是设置通过WebView访问互联网
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                view.loadUrl("http://blog.youkuaiyun.com/li1996heng");
                //返回值为TRUE才会通过WebView访问互联网
                return true;
            }
        });

        //启用支持JavaScript脚本
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);

        //启用WebView的缓存机制,提升浏览速度(缺点是缓存文件会占用内存)
        // settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);

        /**
         * 在某些时候,比如网速很差,那么用户通过WebView访问互联网会特别慢
         * 为了增加用户体验度,此时我们可以要告诉用户他的等待还需要多久
         * 可以通过进度条的方式实现这一逻辑
         * setWebChromeClient这个类onProgressChanged()方法用于判断网页的加载进度,
         * 参数newProgress的值在1--100之间  100表示网页加载完毕
         */
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                //如果网页加载完毕,关闭进度条对话框
                if (newProgress == 100) {
                    closeDialog();
                } else {
                    //如果网页正在加载,打开进度条对话框
                    openDialog(newProgress);
                }

            }

            //打开进度条对话框的方法
            private void openDialog(int newProgress) {
                //如果进度条对话框不存在
                if (progressDialog == null) {
                    //实例化一个进度条对话框
                    progressDialog = new ProgressDialog(MainActivity.this);
                    //设置进度条对话框的样式为水平样式
                    progressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
                    //设置标题
                    progressDialog.setTitle("正在加载");
                    //把参数newProgress的值传给进度条对话框
                    progressDialog.setProgress(newProgress);
                    //显示对话框
                    progressDialog.show();
                } else {
                    //如果存在直接把newProgress的值传给对话框
                    progressDialog.setProgress(newProgress);
                }

            }

            //关闭进度条对话框的方法
            private void closeDialog() {
                //当进度条对话框不为空并且正在显示的时候
                if (progressDialog != null && progressDialog.isShowing()) {
                    //关闭对话框并置为空
                    progressDialog.dismiss();
                    progressDialog = null;
                }
            }

        });

    }

    /**
     * 通过WebView访问互联网的时候,返回键并不是返回上次一浏览页面
     * 而是退出程序, 为增加用户体验 须改写返回按键的逻辑
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //如果点击了返回键
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            //如果页面存在可返回的页面
            if (webView.canGoBack()) {
                //返回上一页面
                webView.goBack();
                return true;
            } else {
                //没有就退出程序
                finish();
            }
        }
        return super.onKeyDown(keyCode, event);
    }
}