3.1.1 网页控件 WebView 的常用方法大全

前言：

有时候我们可能会碰到一些比较特殊的需求，比如说要求在应用程序里展示一些网页。相信每个人都知道，加载和显示网页通常都是浏览器的任务，但是需求里又明确指出，不允许打开系统浏览器，而我们当然也不可能自己去编写一个浏览器出来，这时应该怎么办呢？
不用担心， Android 早就已经考虑到了这种需求，它提供了一个 WebView 控件来帮助我们做这件事情。

本节例程下载地址：WillFlowWebView

一、什么是WebView？

Android 内置了 webkit 内核的高性能浏览器（从 Android 4.4 以后是 Chromium），而 WebView 则是在这个基础上进行封装后的一个 控件，WebView直译网页视图，我们可以简单的把它看作一个可以嵌套到界面上的一个浏览器控件！借助它我们就可以在自己的应用程序里嵌入一个浏览器，从而非常轻松地展示各种各样的网页。WebView 的用法也是相当简单，下面我们通过一个例子来学习一下。

（1）新建一个项目并修改 activity_main.xml 中的代码，如下所示：

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<WebView
 android:id="@+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

我们在布局文件中使用到了 WebView，我们一会儿就用这个控件来显示网页，这里的写法很简单，给它设置了一个 id（android:id=”@+id/web_view”），并让它充满整个屏幕。

（2）然后修改 MainActivity 中的代码，如下所示：

public class MainActivity extends Activity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.web_view);
// 设置WebView属性,运行执行js脚本
        webView.getSettings().setJavaScriptEnabled(true);

        webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url); // 根据传入的参数再去加载新的网页
return true; // 表示当前WebView可以处理打开新网页的请求，不用借助系统浏览器
            }
        });

        wView.setWebChromeClient(new WebChromeClient() {
// 这里设置获取到的网站title
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
                txt_title.setText(title);
            }
        });

        webView.loadUrl("http://www.jianshu.com/p/2cf0aca9a57d");
    }

// 我们需要重写回退按钮的时间,当用户点击回退按钮时：
// 1.webView.canGoBack()判断网页是否能后退，可以则goback()
// 2.如果不可以连续点击两次退出App,否则弹出提示Toast
@Override
public void onBackPressed() {
if (webView.canGoBack()) {
            webView.goBack();
        } else {
if ((System.currentTimeMillis() - exitTime) > 1000) {
                Toast.makeText(getApplicationContext(), "再按一次退出程序", Toast.LENGTH_SHORT).show();
                exitTime = System.currentTimeMillis();
            } else {
super.onBackPressed();
            }
        }
    }
}

MainActivity 中的代码也很短，首先使用 findViewById() 方法获取到了 WebView 的实例，然后调用 WebView 的 getSettings() 方法可以去设置一些浏览器的属性，这里我们并不去设置过多的属性，只是调用了 setJavaScriptEnabled() 方法来让 WebView 支持 JavaScript 脚本。

接下来是非常重要的一个部分，我们调用了 WebView 的 setWebViewClient() 方法，并传入了 WebViewClient 的匿名类作为参数，然后重写了 shouldOverrideUrlLoading() 方法。这就表明当需要从一个网页跳转到另一个网页时，我们希望目标网页仍然在当前 WebView 中显示，而不是打开系统浏览器。

另外还需要注意，由于本程序使用到了网络功能， 而访问网络是需要声明权限的，因此我们还得修改 AndroidManifest.xml 文件，并加入权限声明，如下所示：

    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.willflow.webviewtest"
android:versionCode="1"
android:versionName="1.0" >
        ……
<uses-permission android:name="android.permission.INTERNET" />
        ……
</manifest>

最后一步就非常简单了，调用 WebView 的 loadUrl() 方法，并将网址传入，即可展示相应网页的内容。不过在开始运行之前，首先需要保证你的手机或模拟器是联网的，如果你使用的是模拟器，只需保证电脑能正常上网即可。然后就可以运行一下程序了，效果如下图所示：

大家可以看到， 我们的这个程序现在已经具备了一个简易浏览器的功能，不仅成功将百度的首页展示了出来，还可以通过点击链接浏览更多的网页。

关于重定向问题：

虽然我们的这个程序已经实现了一个简易浏览器的功能，但是当我们回到一开始加载的页面后按返回键，可能按了多次还是没有退出当前的APP，后来还是我们手动去点 back 键通过调用 finish 方法才能关闭当前的Activity，这是为什么呢？

其实这个问题是由网址的重定向引起的。

我们用手机访问百度的时候实际上走的是这样的流程：尽管我们 load 的是 http://www.jianshu.com/p/2cf0aca9a57d，但是简书做了重定向，这就让我们跳转到了手机版简书网页，即实际的流程是 “http://www.jianshu.com/p/2cf0aca9a57d -> 手机版简书 -> 打开其他的链接！”

我们看到我们上面 shouldOverrideUrlLoading() 方法是这样写的：

public boolean shouldOverrideUrlLoading(WebView view, String url) {
    view.loadUrl(url); 
return true;
}

我们知道用户点击一次回退键 webview 会调用一次 goback 方法，我们把上面三个链接设做 A、B、C 三个站点，在 C 时点回退，C - > B 没问题，接着再点 B -> A，这个时候问题就来了：尽管 B 来到了 A，但是因为重定向又跳转到了 B，如此循环往复… 这就是为什么点击回退键并没有退出 WebView 的原因。

解决方法：

要解决这个问题，我们只需将 shouldOverrideUrlLoading() 里的东西删掉，然后写上 “return false;” 即可！

shouldOverrideUrlLoading()返回值意义：

return true时，你可以自己来处理这个url，webView则不再处理这个url；
return false时，webView来处理这个url。

（3）WebViewClient、WebChromeClient 和 WebSettings 的方法介绍

WebViewClient 和 WebChromeClient 是什么？

在 WebView 的设计中，不是什么事都要 WebView 这个类自己干的，有些杂事是分给其他类的，我们姑且管这叫“协助类”，这样 WebView 就可以专心干好自己的解析、渲染的工作了，我们这里要介绍的“协助类”就是：WebViewClient 和 WebChromeClient。

WebViewClient 和 WebChromeClient 的区别？

我们下面会介绍 WebViewClient 和 WebChromeClient 中常用的几种方法，这会看上去会让我们觉得他们有很多的不同。不过实际使用的时候，如果我们的 WebView 只是用来处理一些 html 的页面内容、处理通知、请求事件等，那我们只用 WebViewClient 就行了，如果需要更丰富的处理效果，比如 JavaScript交互对话框 、网站图标、网站Title、加载进度条等，就要用到WebChromeClient 了。

这里给出一个通过重写 WebChromeClient 的 onProgressChanged 方法来实现打开网页时上面出现一条绿色进度条的例子：

public class CustomWebClient extends WebChromeClient { 
@Override public void onProgressChanged(WebView view, int newProgress) { 
if (newProgress == 100) { 
            mProgressBar.setVisibility(GONE); 
        } else { 
if (mProgressBar.getVisibility() == GONE) { 
                mProgressBar.setVisibility(VISIBLE); 
            } 
            mProgressBar.setProgress(newProgress);
        } 
super.onProgressChanged(view, newProgress); 
    }
}

WebSettings 的作用？

从上文我们得知 WebViewClient 和 WebChromeClient 是 WebView 的协助类，而我们这里说的 WebSettings 则用于管理 WebView 状态配置，比如 setJavaScriptEnabled() 方法用于设置是否允许 JavaScript 脚本执行。当 WebView 第一次被创建时，WebView 包含着一个默认的配置，这些默认的配置将通过 get 方法返回，通过 WebView 中的 getSettings 方法获得一个WebSettings对象。当然如果一个 WebView 被销毁的话，那么在 WebSettings 中所有回调方法将抛出 IllegalStateException 异常。

相关方法介绍：

• WebViewClient 相关方法
  

• WebChromeClient 相关方法
  

• WebSettings 相关方法
  

  三个load方法的区别：

  • loadUrl()：直接显示网页内容(单独显示网络图片)，一般不会出现乱码。
  • loadData(data, “text/html”, “UTF-8”)：用来加载URI格式的数据，不能通过网络来加载内容， 不能加载图片，而且经常会遇到乱码的问题，我们知道 String 类型的数据主要是Unicode 编码的， 而 WebView 一般为了节省资源使用的是 UTF-8 编码，尽管我们按上面写了，但是还需要为 WebView 设置：webview.getSettings().setDefaultTextEncodingName(“UTF -8”);
  • **loadDataWithBaseURL(baseUrl, dataUrl, “text/html”, “utf-8”, null)：**loadData类的一个增强类，可以加载图片，baseUrl 是我们存储的图片路径，而且只需在这里设置 utf-8 就可以解决乱码问题了。
    

  loadDataWithBaseURL()的使用说明：
  

  在使用loadDataWithBaseURL时，需要注意的就是 baseUr：虽然API上写的是要传一个Url，但我在用时，发现传一个Url并不可以，我发现这个就是一个标志位，用来标志当前页面的Key值的，而dataUrl就是一个value值，在加载时它会把baseUrl和dataUrl传到List列表中，当作历史记录来使用，当前进和后退时，它会通过baseUrl来寻找dataUrl的路径来加载历史界面，需要注意的就是dataUrl所指向的必须是一个页面，并且页面存在于Web端、SD卡中或程序中Assets中（这个我们在下篇会进行实现）。
  loadDataWithBaseURL它本身并不会向历史记录中存储数据，要想实现历史记录需要我们自己来实现，我这里有个比较笨的方法来实现：就是在加载页面时我把数据另外的写到一个html页面中，并把它保存到SD中，当点击返回时它会通过historyUrl指向的路径来加载页面，这样就解决了历史记录问题。

二、常见功能实现

（1）WebView滚动事件的监听

我们都知道监听滚动事件一般都是设置 setOnScrollChangedListener，可惜 WebView 并没有给我们提供这样的方法，所以我们可以通过重写 WebView 来实现其滚动事件的监听。大概思路是：覆盖里面的 onScrollChanged() 方法，然后再对外提供一个接口即可。

示例代码 ：

• MyWebViewDemo.java

public class MyWebView extends WebView {

private OnScrollChangedCallback mOnScrollChangedCallback;

public MyWebView(Context context) {
super(context);
    }

public MyWebView(Context context, AttributeSet attrs) {
super(context, attrs);
    }

public MyWebView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
    }

@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (mOnScrollChangedCallback != null) {
            mOnScrollChangedCallback.onScroll(l - oldl, t - oldt);
        }
    }

public OnScrollChangedCallback getOnScrollChangedCallback() {
return mOnScrollChangedCallback;
    }

public void setOnScrollChangedCallback(final OnScrollChangedCallback onScrollChangedCallback) {
        mOnScrollChangedCallback = onScrollChangedCallback;
    }

public static interface OnScrollChangedCallback {
// 这里的dx和dy代表的是x轴和y轴上的偏移量，当然也可以把l, t, oldl, oldt四个参数暴露出来。
public void onScroll(int dx, int dy);
    }

}

• MainActivity.java

public class MainActivity extends AppCompatActivity {

private MyWebView wView;
private Button btn_icon;
private long exitTime = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn_icon = (Button) findViewById(R.id.btn_icon);
        wView = (MyWebView) findViewById(R.id.wView);
        wView.loadUrl("http://www.jianshu.com/p/20800742b9e8");
        wView.setWebViewClient(new WebViewClient() {
// 在webview里打开新链接
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
return true;
            }
        });

// 比如这里做一个简单的判断，当页面发生滚动，显示那个Button
        wView.setOnScrollChangedCallback(new MyWebView.OnScrollChangedCallback() {
@Override
public void onScroll(int dx, int dy) {
if (dy > 0) {
                    btn_icon.setVisibility(View.VISIBLE);
                } else {
                    btn_icon.setVisibility(View.GONE);
                }
            }
        });

        btn_icon.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
                wView.setScrollY(0);
                btn_icon.setVisibility(View.GONE);
            }
        });
    }

@Override
public void onBackPressed() {
if (wView.canGoBack()) {
            wView.goBack();
        } else {
if ((System.currentTimeMillis() - exitTime) > 1000) {
                Toast.makeText(getApplicationContext(), "再按一次退出程序",
                        Toast.LENGTH_SHORT).show();
                exitTime = System.currentTimeMillis();
            } else {
                finish();
            }
        }
    }
}

运行效果如下：

（2）设置缩放、自适应屏幕 和 滚动条

根据我们一般的习惯打开网页对于看不清楚的地方，我们喜欢双指来缩放网页，而WebView 则需要我们自己手动来设置这个是否支持缩放了！

只需要在加入下述代码即可：

WebSettings settings = wView.getSettings();
settings.setUseWideViewPort(true);  // 设定支持viewport
settings.setLoadWithOverviewMode(true);   // 自适应屏幕
settings.setBuiltInZoomControls(true);
settings.setDisplayZoomControls(false);
settings.setSupportZoom(true);  // 设定支持缩放

而滚动条的相关设置方法如下：

setHorizontalScrollBarEnabled(false);  // 水平不显示
setVerticalScrollBarEnabled(false);   // 垂直不显示
setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);    // 滚动条在WebView内侧显示
setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);    // 滚动条在WebView外侧显示

我们可能用到的方法如下：

• 隐藏缩放控件

settings.setDisplayZoomControls(false);

• 设置初始的缩放比例

wView.setInitialScale(25);  // 25%：最小缩放等级

• 字体缩放（1）

settings.setTextZoom(int)；

• 字体缩放（2）

settings.setTextSize(TextSize.LARGER)；

可选字体大小的值：SMALLEST(50%)、SMALLER(75%)、NORMAL(100%)、LARGER(150%)、LARGEST(200%)。

（3）WebView的Cookie数据的设置和获取

Cookie 是一个代表用户唯一标识的字符串，使用的场景一般是：当用户输入账号密码后点击登陆，用户要拿着这个 Cookie 去访问服务器提供的相关服务。我们可以在 onPageFinsihed 的方法中编写 cookie 的获取方法，在 loadUrl() 之前的合适位置设置Cookie。

• 获取WebView的Cookie数据

@Override
public void onPageFinished(WebView view, String url) {             
    CookieManager cookieManager = CookieManager.getInstance();
    String CookieStr = cookieManager.getCookie(url);
    Log.i(TAG, "Cookies = " + CookieStr);
super.onPageFinished(view, url);
}

• 设置WebView的Cookie数据

CookieSyncManager.createInstance(MainActivity.this); 
CookieManager cookieManager = CookieManager.getInstance(); 
cookieManager.setAcceptCookie(true); 
cookieManager.setCookie(url, cookies); // cookies是我们要设置的cookie字符串 
CookieSyncManager.getInstance().sync();

结语：

到此为止，我们学会了使用 WebView 的很多东西，发现 WebView 确实能让我们的APP轻量级很多，但是我们现在还没有学习使用 WebView 更多高级的东西，比如：和JavaScrip交互、文件下载、缓存、处理错误码等。
我们将会在之后的文章中学习以上提到的例子，有志共同进步的同学请头像右侧点击“（+）”保持对我的关注，后续好文第一时间推送给你。

联系方式：

简书：WillFlow
CSDN：WillFlow
微信公众号：WillFlow