WebView 加载HTML和CSS

个人开发项目中需要使用WebView加载一些网络上的内容，目前还没有深入的学习，这篇博客首先简单的记录一下WebView加载html和CSS的相关方法。

加载html无非有三种情况：一、存放在assets文件夹下的html文件；二、直接加载某个指定的网页。
三、从网络上解析得到的html代码，注意此处是代码，即字符串格式。

前两种情况比较类似:
首先获取WebView的控件：

mWebView = (WebView) findViewById(R.id.webview);

然后调用WebView的loadUrl方法:

mWebView.loadUrl("file:///android_asset/yourHtml.html");
mWebView.loadUrl("www.baidu.com");

第一行代码对应的是加载静态Html文件，无css样式。第二行是直接加载某个网址，直接加载该网页的CSS样式，代码很简单也很好理解。

对于第三种情况，由于所获取到的信息是html的代码，所以不能直接使用loadUrl()方法，此时要使用另外一种方法, 这里直接上源码：

/**
     * Loads the given data into this WebView using a 'data' scheme URL.
     * <p>
     * Note that JavaScript's same origin policy means that script running in a
     * page loaded using this method will be unable to access content loaded
     * using any scheme other than 'data', including 'http(s)'. To avoid this
     * restriction, use {@link
     * #loadDataWithBaseURL(String,String,String,String,String)
     * loadDataWithBaseURL()} with an appropriate base URL.
     * <p>
     * The encoding parameter specifies whether the data is base64 or URL
     * encoded. If the data is base64 encoded, the value of the encoding
     * parameter must be 'base64'. For all other values of the parameter,
     * including null, it is assumed that the data uses ASCII encoding for
     * octets inside the range of safe URL characters and use the standard %xx
     * hex encoding of URLs for octets outside that range. For example, '#',
     * '%', '\', '?' should be replaced by %23, %25, %27, %3f respectively.
     * <p>
     * The 'data' scheme URL formed by this method uses the default US-ASCII
     * charset. If you need need to set a different charset, you should form a
     * 'data' scheme URL which explicitly specifies a charset parameter in the
     * mediatype portion of the URL and call {@link #loadUrl(String)} instead.
     * Note that the charset obtained from the mediatype portion of a data URL
     * always overrides that specified in the HTML or XML document itself.
     *
     * @param data a String of data in the given encoding
     * @param mimeType the MIME type of the data, e.g. 'text/html'
     * @param encoding the encoding of the data
     */
    public void loadData(String data, String mimeType, String encoding) {
        checkThread();
        mProvider.loadData(data, mimeType, encoding);
    }

详细的解释，大家可以参考注释。简单的理解，第一个参数传入我们获得的Html代码，第二个参数是代码类型，通常是‘text/html’，最后一个是代码的编码方式，通常是UTF-8。但是这样加载出来的HTML网页是纯文本的，没有指定任何样式。

接下来详细讲讲针对第一种和第三种情况如何加载CSS样式：
共同点：我们需要新建一个assets文件夹，并且将我们自定义的CSS样式文件放入其中，假设该CSS文件名为style.css。

然后针对第一种情况：在HTML文件的代码开头加上代码:

<link rel="stylesheet" type="text/css" href="style.css" />

做好这些准备工作后，即可直接调用loadUrl()方法了。

针对第三种情况: 需要使用另外一种方法，代码如下：

/**
     * Loads the given data into this WebView, using baseUrl as the base URL for
     * the content. The base URL is used both to resolve relative URLs and when
     * applying JavaScript's same origin policy. The historyUrl is used for the
     * history entry.
     * <p>
     * Note that content specified in this way can access local device files
     * (via 'file' scheme URLs) only if baseUrl specifies a scheme other than
     * 'http', 'https', 'ftp', 'ftps', 'about' or 'javascript'.
     * <p>
     * If the base URL uses the data scheme, this method is equivalent to
     * calling {@link #loadData(String,String,String) loadData()} and the
     * historyUrl is ignored, and the data will be treated as part of a data: URL.
     * If the base URL uses any other scheme, then the data will be loaded into
     * the WebView as a plain string (i.e. not part of a data URL) and any URL-encoded
     * entities in the string will not be decoded.
     *
     * @param baseUrl the URL to use as the page's base URL. If null defaults to
     *                'about:blank'.
     * @param data a String of data in the given encoding
     * @param mimeType the MIMEType of the data, e.g. 'text/html'. If null,
     *                 defaults to 'text/html'.
     * @param encoding the encoding of the data
     * @param historyUrl the URL to use as the history entry. If null defaults
     *                   to 'about:blank'. If non-null, this must be a valid URL.
     */
    public void loadDataWithBaseURL(String baseUrl, String data,
            String mimeType, String encoding, String historyUrl) {
        checkThread();
        mProvider.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, historyUrl);
    }

方法解释看注释即可，这里第一个参数需要传入与HTML相关的路径，由于我们的CSS文件存放在assets文件下，所以第一个参数传入“file:///android_asset/”，第二、三、四三个参数与loadData方法类似，所以第一和第五个参数为空时，两个方法是等价的。第五个参数，我目前也不是很理解，传入空即可。

实例如下:

htmlData = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />" + htmlData;
// lets assume we have /assets/style.css file
webView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);