（三十六）WebView的初步使用

时间：2024-04-05 10:03:24

一、WebView简介

在Android手机中内置了一款高性能webkit内核浏览器，在SDK中封装为一个叫做WebView组件。 WebView是安卓中用来显示html文本内容的的控件。对html5也有很好的支持，ios的控件UIWebView差不多。

二、使用WebView并不需要开通网络权限

网上有文章说webview需要开通internet权限，否则会出Web page not available错误，这是不对的，出现Web page not available并不是因为使用了webview，而是webview访问了网络，如果webview只是加载本地html（比如assets目录中的文件），或者只是加载带有html文本的字符串，即使没有internet权限，也不会报错。

三、加载内容

（1）加载assets目录下的本地网页

一般我们都是把html文件放在assets目录下， WebView调用assets目录下的本地网页和图片等资源非常方便，使用形如：webview.loadUrl("file:///android_asset/html/test1.html");

（2）加载远程网页

使用形如：WebView.loadUrl("http://www.google.com");

（3）使用 LoadData 或者 loadDataWithBaseURL方法加载内容

有时候我们的webview可能只是html片段，而不是一个完整的网页，事实上绝大多数时候都是如此，完整的网页无需做成应用，而直接在浏览器访问。

这种情况我们使用 LoadData 或者 loadDataWithBaseURL方法，后者用的最多：

void loadDataWithBaseURL (String baseUrl, String data, String mimeType, String encoding, String historyUrl)

loadDataWithBaseURL()比loadData()多两个参数，可以指定HTML代码片段中相关资源的相对根路径，也可以指定历史Url，其余三个参数相同。

这里主要注意参数baseUrl，baseUrl指定了你的data参数中数据是以什么地址为基准的，因为data中的数据可能会有超链接或者是image元素，而很多网站的地址都是用的相对路径，如果没有baseUrl，webview将访问不到这些资源。

举个例子：

String body ="示例：这里有个img标签，地址是相对路径<img src='/uploads/allimg/130923/1FP02V7-0.png' />";
mWebView.loadDataWithBaseURL("http://www.jcodecraeer.com", body, "text/html", "utf-8",null);

如果baseUrl没有指定为http://www.jcodecraeer.com，那么这张图片将显示不出来。

上面的例子其实演示了loadDataWithBaseURL的用法，我们直接加载一个字符串里面的html内容，而有些时候这些内容是从assets目录下的本地网页文件中读取，下面我们将html/test1.html中的内容通过LoadData来加载：

String data = "";
try {
    // 读取assets目录下的文件需要用到AssetManager对象的Open方法打开文件
    InputStream is = getAssets().open("html/test2.html");
    // loadData()方法需要的是一个字符串数据所以我们需要把文件转成字符串
    ByteArrayBuffer baf = new ByteArrayBuffer(500);
    int count = 0;
    while ((count = is.read()) != -1) {
        baf.append(count);
    }
    data = EncodingUtils.getString(baf.toByteArray(), "utf-8");
} catch (IOException e) {
    e.printStackTrace();
}
// 下面两种方法都可以加载成功
mWebView.loadData(data, "text/html", "utf-8");
// wv.loadDataWithBaseURL("", data, "text/html", "utf-8", "");

这种通过读取文件再用loadData加载其实和mWebView.loadUrl("file:///android_asset/html/test1.html")是一致的，只不过loadData方式因为没有指定地址的基准url，html/test1.html文件中一些资源文件或者链接地址会失效。

loadDataWithBaseURL和loadData两个方法加载的HTML代码片段的不同点在于，loadData()中的html data中不能包含'#', '%', '\', '?'四中特殊字符，在平时测试时，你的数据时，你的数据里含有这些字符，但不会出问题，当出问题时，你可以替换下。

      %，会报找不到页面错误，页面全是乱码。乱码样式见符件。

      #，会让你的goBack失效，但canGoBAck是可以使用的。于是就会产生返回按钮生效，但不能返回的情况。

四、android 中webView控件 padding不起作用

在一个布局文件中有一个WebView，想使用padding属性让左右向内留出一些空白，但是padding属性不起左右，内容照样贴边显示，反而移动了右边滚动条的位置。android的bug，用一个外围的layout包含webview，可以有所改进，但不能完全解决。其实正确的做法是在webView的加载的css中增加padding,没必要为了padding而更改xml布局文件。

五、android:scrollbarStyle控制滚动条位置

WebView有一个设置滚动条位置的属性：android:scrollbarStyle 可以是insideOverlay可以是outsideOverlay，两个的区别是SCROLLBARS_INSIDE_OVERLAY的样式是滚动条在整个page里

六：例子程序如下所示：

6.1 自定义浏览器的结构如下所示：

（三十六）WebView的初步使用

6.2 MainActivity.java的代码如下所示：

package com.example.customwebview;

import android.app.Activity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends Activity {
    private EditText et_address;
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        et_address = (EditText) findViewById(R.id.et_address);
        webView = (WebView) findViewById(R.id.webView);
        webView.setWebViewClient(new WebViewClient()); // 设置直接使用WebView打开网页内部链接而不再调用手机浏览器
        WebSettings settings = webView.getSettings();
        settings.setSupportZoom(true); // 设置是否支持缩放，默认为支持
        settings.setBuiltInZoomControls(true); // 设置是否显示缩放工具，默认为false
        settings.setJavaScriptEnabled(true); // 如果想让java和js交互或者本身希望js完成一定的功能请为true。false:不支持js
        settings.setDefaultFontSize(18);  //设置默认的字体大小，默认为16，有效值区间在1-72之间。

    }

    /**
     * button的点击事件
     * 
     * @param view
     */
    public void click(View view) {
        String address = et_address.getText().toString().trim();
        if (TextUtils.isEmpty(address)) {
            address = "http://www.51cto.com/";
        }
        webView.loadUrl(address);
    }

    /**
     * 如果用webview点链接看了很多页以后，如果不做任何处理，点击系统“Back”键，整个浏览器会调用finish()而结束自身，
     * 如果希望浏览的网页回退而不是退出浏览器，需要在当前Activity中处理并消费掉该Back事件。
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        // TODO Auto-generated method stub
        if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        menu.addSubMenu(0, 1, 0, "刷新");
        menu.addSubMenu(0, 2, 0, "后退");
        menu.addSubMenu(0, 3, 0, "前进");
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        switch (id) {
        case 1:
            webView.reload();
            break;
        case 2:
            if (webView.canGoBack()) {
                webView.goBack();
            } else {
                Toast.makeText(this, "不能后退", 1).show();
            }
            break;
        case 3:
            if (webView.canGoForward()) {
                webView.goForward();
            } else {
                Toast.makeText(this, "不能前进", 1).show();
            }

            break;
        }
        return super.onOptionsItemSelected(item);
    }
}

6.3 activity_main.xml的代码如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.customwebview.MainActivity" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <EditText
            android:id="@+id/et_address"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="9"
            android:text="http://www.51cto.com/" />

        <Button           
           
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="click"
            android:text="搜索" />
    </LinearLayout>

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

</LinearLayout>

6.4 添加权限

 <uses-permission android:name="android.permission.INTERNET"/>

 

相关文章