Android基础——WebView使用（一）

WebView 使用背景

在实际开发中经常会使用WebView加载一些服务器上或本地的web页，现在大大小小的app多多少少都会用到WebView，所以在以后的app 开发中WebView的使用会越来越多，下面就介绍一下在开发中可能会用的WebView功能的实现。

注：WebView 中Java与JS交互在下一篇Android基础——WebView使用（二）Java与JS交互 中进行了介绍。

创建WebView方法

• 在布局文件中加入WebView控件。
• 在Java 中findViewById 获取WebView 实例；
• 调用getSettings()方法获取WebSettings 实例，通过WebSettings 对WebView进行设置（下面会介绍一些WebSettings的API）。
• 设置WebView监听事件，setWebChromeClient ，setWebViewClient 等。
• 调用loadUrl 加载要加载的web页。

API介绍

WebSettings

获取WebSettings
WebSettings webSettings = mWebView.getSettings();

• setJavaScriptEnabled(true); //支持js

• setPluginsEnabled(true); //支持插件

• setUseWideViewPort(false); //将图片调整到适合webview的大小

• setSupportZoom(true); //支持缩放

• setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); //支持内容重新布局

• supportMultipleWindows(); //多窗口

• setCacheMode(WebSettings.LOADCACHEELSE_NETWORK); //关闭webview中缓存

• setAllowFileAccess(true); //设置可以访问文件

• setNeedInitialFocus(true); //当webview调用requestFocus时为webview设置节点

• webview webSettings.setBuiltInZoomControls(true); //设置支持缩放

• setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口

• setLoadWithOverviewMode(true); // 缩放至屏幕的大小

• setLoadsImagesAutomatically(true); //支持自动加载图片

Webview

页面加载

• loadUrl (String url) //加载定制的url，加载页面有两种，一种是加载web服务器上的页面，另一种就是加载本地的页面，本地的页面存放在assets目录中，加载时调用：webView.loadUrl("file:///android_asset/index.html");
• loadUrl (String url, Map<String, String> additionalHttpHeaders) //加载制定url并携带http header数据。
• reload () //重新加载页面 ps：页面所有资源会重新加载
• stopLoading () //停止加载当前页面

前进和后退

• goBack () //前进.ps:小米3的手机上，当通过webview.goBack()回退的时候，并没有触发onReceiveTitle()，这样会导致标题仍然是之前子页面的标题，没有切换回来.
• goForward ()//后退
• goBackOrForward (int steps) //前进或后退。以当前的index为起始点前进或者后退到历史记录中指定的steps， 如果steps为负数则为后退，正数则为前进
• canGoForward () //判断是否可以后退
• canGoBack () //判断是否可以前进

数据清除

• clearCache (boolean includeDiskFiles) //清除网页访问留下的缓存，由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
• clearFormData ()//这个api仅仅清除自动完成填充的表单数据，并不会清除WebView存储到本地的数据。
• clearHistory () //清除当前webview访问的历史记录，只会webview访问历史记录里的所有记录除了当前访问记录.
• clearView () //（注意）在Android 4.3及其以上系统这个api被丢弃了， 并且这个api大多数情况下会有bug，经常不能清除掉之前的渲染数据。官方建议通过loadUrl("about:blank")来实现这个功能，因为需要重新加载一个页面自然时间会受到影响。

WebView的状态

• onResume () //激活WebView为活跃状态，能正常执行网页的响应
• onPause () //当页面被失去焦点被切换到后台不可见状态，需要执行onPause动过， onPause动作通知内核暂停所有的动作，比如DOM的解析、plugin的执行、JavaScript执行。并且可以减少不必要的CPU和网络开销，可以达到省电、省流量、省资源的效果。
• pauseTimers () //当应用程序被切换到后台我们使用了webview， 这个方法不仅仅针对当前的webview而是全局的全应用程序的webview，它会暂停所有webview的layout，parsing，javascripttimer。降低CPU功耗。
• resumeTimers () //恢复pauseTimers时的动作
• destroy () //法必须在webview从view tree中删除之后才能被执行， 这个方法会通知native释放webview占用的所有资源。rootLayout.removeView(webView);webView.destroy();

WebView 事件回调监听

WebView 事件回调,有两个 setWebViewClient(WebViewClient client)和 setWebViewClient (WebViewClient client) 。

• setWebViewClient(WebViewClient client) 
  //主要通知客户端app加载当前网页时的各种时机状态，onPageStart,onPageFinish,onReceiveError等事件。

  常用方法

  1、 onPageStarted(WebView view, String url, Bitmap favicon)

  该方法在加载Web页面开始时调用

  参数说明：
  view: 该view可以获取title ， URL 等,里面方法很多，在开发时候自己看吧。 
  url ： 网络请求的url。
  favicon : 加载网页的logo 图片的bitmap.

  2、 shouldOverrideUrlLoading(WebView view, String url)

  对网页中超链接按钮的响应,在该方法中调用view.loadUrl(url); 即在当前的webview中跳转到新的url。

  参数说明：
  view: 同上
  url ： 网络请求的url。

  3、 onPageFinished(WebView view, String url)

  web 页面加载结束后调用该方法

  参数说明：
  view: 同上
  url ： 网络请求的url。

  实例代码

  mWebView.setWebChromeClient(new WebChromeClient() {
      @Override
      public void onProgressChanged(WebView view, int newProgress) {
          mProgressBar.setProgress(newProgress);
      }
  
      @Override
      public void onReceivedTitle(WebView view, String title) {
  
      }
  });

• setWebChromeClient (WebChromeClient client)
  //主要通知客户端app加载当前网页的 title，Favicon，progress,javascript dialog等事件，通知客户端处理这些相应的事件。

  常用方法

  1、onProgressChanged(WebView view, int newProgress)

  改方法在加载web页的同时被调用，加载完成停止调用，在该方法中一般多是设置web页面加载的进度条，progressBar 的进度。参数newProgress 的范围在 0 到 100。

  2、onReceivedTitle(WebView view, String title)

  重新获取title，参数不再解释，都是一样的。

  注意：在小米3的手机上，当通过webview.goBack()回退的时候，并没有触发onReceiveTitle()，这样会导致标题仍然是之前子页面的标题，没有切换回来.

  实例代码

  mWebView.setWebViewClient(new WebViewClient() {
      @Override
      public void onPageStarted(WebView view, String url, Bitmap favicon) {
          mImageView.setImageBitmap(favicon);
          Log.e("PageStarted", "url--->" + url);
          Log.e("PageStarted", "view--getTitle->" + view.getTitle());
          Log.e("PageStarted", "view--->" + view.getUrl());
      }
  
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, String url) {
          mWebView.loadUrl(url);
          Log.e("OverrideUrlLoad", "url--->" + url);
          Log.e("OverrideUrlLoad", "view--getTitle->" + view.getTitle());
          Log.e("OverrideUrlLoad", "view--->" + view.getUrl());
          return true;
      }
  
      @Override
      public void onPageFinished(WebView view, String url) {
          Log.e("PageFinished", "url--->" + url);
          Log.e("PageFinished", "view--getTitle->" + view.getTitle());
          Log.e("PageFinished", "view--->" + view.getUrl());
      }
  });

• setOnLongClickListener(@Nullable OnLongClickListener l) //长按屏幕事件，return false 时长按时会出现复制功能，return true 时长按时不会出现复制

  实例代码：

  /**  * 长按屏幕事件，return false 时长按时会出现复制功能，return true 时长按时不会出现复制  */ mWebView.setOnLongClickListener(new View.OnLongClickListener() {
      @Override
      public boolean onLongClick(View v) {
          return false;
      }
  });

下面介绍一些功能的设置

• 按返回键时， 不退出程序而是返回上一浏览页面：

  public boolean onKeyDown(int keyCode, KeyEvent event) {
      if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
          mWebView.goBack();
          return true;
      }
      return super.onKeyDown(keyCode, event);
  }

• 打开页面时，自适应屏幕：

  WebSettings webSettings = mWebView.getSettings();
  webSettings.setUseWideViewPort(true);//设置此属性，可任意比例缩放
  webSettings.setLoadWithOverviewMode(true);

• 便页面支持缩放：

  WebSettings webSettings = mWebView.getSettings();
  webSettings.setJavaScriptEnabled(true);
  webSettings.setBuiltInZoomControls(true);
  webSettings.setSupportZoom(true);
  

• 如果webView中需要用户手动输入用户名、密码或其他，则webview必须设置支持获取手势焦点。

  mWebView.requestFocusFromTouch();

Demo代码如下

效果：

布局文件 ：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <Button
            android:text="Back"
            android:id="@+id/back_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageView
            android:src="@mipmap/ic_launcher"
            android:layout_centerHorizontal="true"
            android:id="@+id/icon_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />


        <Button
            android:layout_alignParentRight="true"
            android:text="Next"
            android:id="@+id/next_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </RelativeLayout>

    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:id="@+id/webview_pro_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <WebView
        android:id="@+id/my_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

Java 代码：

public class MyWebViewActivity extends Activity implements View.OnClickListener {

    private ProgressBar mProgressBar;
    private WebView mWebView;
    private ImageView mImageView;
    private Button mBtnBack, mBtnNext;
    private String url;

    private boolean flag_get_deviceid = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_webview);
        Intent intent = getIntent();
        url = intent.getStringExtra("url");
        initView();
    }

    private void initView() {
        mProgressBar = (ProgressBar) findViewById(R.id.webview_pro_bar);
        mProgressBar.setMax(100);
        mBtnBack = (Button) findViewById(R.id.back_btn);
        mBtnNext = (Button) findViewById(R.id.next_btn);
        mBtnBack.setOnClickListener(this);
        mBtnNext.setOnClickListener(this);



        mImageView = (ImageView) findViewById(R.id.icon_img);
        mWebView = (WebView) findViewById(R.id.my_webview);
        mWebView.loadUrl(url);
        //获取手势焦点
        mWebView.requestFocusFromTouch();
        /**  *对webView的设置要先调用getSettings()方法获取WebSettings  */  WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);//设置JavaScript可用，false 不可用
        webSettings.setSupportZoom(true);//是否支持缩放，true 支持，false 不支持

        //设置自适应屏幕
        webSettings.setUseWideViewPort(true);//设置此属性，可任意比例缩放
        webSettings.setLoadWithOverviewMode(true);

        //页面支持缩放
        webSettings.setJavaScriptEnabled(true);
        webSettings.setBuiltInZoomControls(true);
        webSettings.setSupportZoom(true);

        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                mImageView.setImageBitmap(favicon);
                Log.e("PageStarted", "url--->" + url);
                Log.e("PageStarted", "view--getTitle->" + view.getTitle());
                Log.e("PageStarted", "view--->" + view.getUrl());
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                mWebView.loadUrl(url);
                Log.e("OverrideUrlLoad", "url--->" + url);
                Log.e("OverrideUrlLoad", "view--getTitle->" + view.getTitle());
                Log.e("OverrideUrlLoad", "view--->" + view.getUrl());
                return true;
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                Log.e("PageFinished", "url--->" + url);
                Log.e("PageFinished", "view--getTitle->" + view.getTitle());
                Log.e("PageFinished", "view--->" + view.getUrl());
            }
        });

        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                mProgressBar.setProgress(newProgress);
            }

            @Override
            public void onReceivedTitle(WebView view, String title) {

            }
        });

        /**  * 长按屏幕事件，return false 时长按时会出现复制功能，return true 时长按时不会出现复制  */  mWebView.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                return false;
            }
        });

    }

    @Override
    public void onClick(View v) {

        switch (v.getId()) {
            case R.id.back_btn:
                mWebView.goBack();//后退
                break;

            case R.id.next_btn:
                mWebView.goForward();//前进
                break;
        }
    }

    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

Demo 下载地址：http://download.csdn.net/detail/u013501637/9458173