Android WebView 示例教程

1 年 ago
新, 韵
4 minutes

Android WebView是用于在安卓应用程序中显示HTML的工具。我们可以使用Android WebView将HTML页面加载到安卓应用程序中。

安卓内置浏览器

Android WebView组件是一个完整的浏览器，它是作为一个View子类来实现的，以便将其嵌入到我们的安卓应用程序中。

Android WebView的重要性

对于范围有限的HTML代码，我们可以使用属于HTML实用类的静态方法fromHtml()来解析格式化为HTML的字符串，并在TextView中显示出来。TextView可以呈现简单的格式化，如样式（加粗、斜体等）、字体类型（serif、sans serif等）、颜色、链接等等。然而，当涉及到复杂的格式化和HTML范围较大时，TextView无法很好地处理。例如，通过TextView无法浏览Facebook。在这种情况下，WebView会是更合适的小部件，因为它可以处理更广泛的HTML标签。WebView还可以处理CSS和JavaScript，而Html.fromHtml()只会忽略它们。WebView还可以辅助常见的浏览元喻，例如访问历史记录列表以支持前后导航。然而，WebView也有其自身的缺点，比如它是一种更昂贵的小部件，从内存消耗的角度来看，比TextView更多。这增加的内存消耗是因为WebView使用了WebKit/Blink，这是一个用于驱动Chrome等浏览器中的内容的开源Web渲染引擎。

Android WebView 示例

我们想在布局中显示WebView，因此在XML布局文件中插入了Android WebView组件。以下示例将其插入到activity_main.xml文件中。

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

安卓工作室的WebView代码

在MainActivity中通过activity_main.xml中定义的id，在片段中展示的方式，初始化了WebView组件。

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

以 Android WebView 加载网址

一旦我们获得了WebView的引用，我们可以通过HTTP配置它并加载URL。如下所示，我们使用WebView的loadUrl()方法将URL加载到WebView中。

webView.loadUrl("https://www.scdev.com");

在我们开始玩弄URL之前，有两个关键方面我们应该看一看：

    1. 支持JavaScript：在WebView小部件中，默认情况下会关闭JavaScript。因此，包含JavaScript引用的网页将无法正常工作。要启用JavaScript，需要在WebView实例上调用以下代码段：

 

    1. getSettings().setJavaScriptEnabled(true);

添加权限：为了在WebView中获取和加载URL，我们需要添加权限来从应用程序内部访问互联网，否则无法加载网页。需要在AndroidManifest.xml文件中的应用程序标记之前添加以下代码行：

 

 

 

 

以下是MainActivity类，其中包含了至今所讨论的所有功能。

package com.Olivia.webview;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {

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

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

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        webView.loadUrl("https://www.scdev.com");
    }

}

设置WebView的客户端

当用户在网页中点击链接时，默认行为是打开系统默认的浏览器应用程序。这可能会破坏应用用户的体验。为了保持页面导航在WebView内部和应用程序内部，我们需要创建一个WebViewClient子类，并重写它的shouldOverrideUrlLoading(WebView webView, String url)方法。以下是这样一个WebViewClient子类的示例：

private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView webView, String url) {
        return false;
    }
}

当shouldOverrideUrlLoading()方法返回false时，传递给该方法的URL会在WebView中加载，而不是在浏览器中加载。为了区分在应用程序内部加载的URL和在浏览器中加载的URL，需要在shouldOverrideUrlLoading()方法中添加以下代码。

if(url.indexOf("scdev.com") > -1 ) return false;
        return true;

注意：返回true并不表示URL会在浏览器应用中打开。实际上，URL根本不会被打开。要将URL加载到浏览器中，需要发送一个意图。以下的子类包含了我们添加的所有配置。

package com.Olivia.webview;

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class WebViewClientImpl extends WebViewClient {

    private Activity activity = null;

    public WebViewClientImpl(Activity activity) {
        this.activity = activity;
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView webView, String url) {
        if(url.indexOf("scdev.com") > -1 ) return false;

        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        activity.startActivity(intent);
        return true;
    }

}

在构造函数中，将Activity作为参数传入以在浏览器中触发意图。在MainActivity中实例化这个子类之前，让我们来看另一个重要的特性。

带有返回按钮的导航 WebView

如果我们在已开发的应用程序中点击返回按钮，我们会发现即使我们在WebView中导航了几页，应用程序仍然会返回到主屏幕。要通过按下返回按钮来浏览浏览历史记录，我们需要修改以下代码片段中的返回按钮功能。

@Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && this.webView.canGoBack()) {
            this.webView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

以下是在MainActivity中包含上述功能的代码。重新实现了onKeyDown()方法，该方法首先检查WebView是否可以返回。如果用户已经从WebView加载的第一个页面导航离开，则WebView可以返回。WebView像普通浏览器一样维护浏览历史记录。如果没有历史记录，则会导致默认的后退按钮行为，即退出应用程序。

package com.Olivia.webview;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {

    private WebView webView = null;

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

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

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        WebViewClientImpl webViewClient = new WebViewClientImpl(this);
        webView.setWebViewClient(webViewClient);

        webView.loadUrl("https://www.scdev.com");
    }


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && this.webView.canGoBack()) {
            this.webView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

}
android webview example

WebView中加载内容的替代方案

到目前为止，我们只是使用loadUrl()方法来加载WebView中的内容。在这里，我们将看到loadUrl()方法的其他用法，以及加载内容的其他方式。loadUrl()方法可以与以下内容一起使用：

  • https:// and https://URLs
  • file:// URLs pointing to the local filesystem
  • file:///android_asset/ URLs pointing to one of your applications assets
  • content:// URLs pointing to a ContentProvider that is publishing content available for streaming

我们可以使用loadData()代替loadUrl()方法，通过该方法我们可以显示HTML代码的片段或整个代码。loadData()有两种用法。其中简单的一种允许我们以字符串形式提供内容、MIME类型和编码方式。通常，MIME类型为text/html，而编码方式则是UTF-8，用于普通的HTML，如下所示：

webView.loadData("<html><body>Hello, world!</body></html>",
                  "text/html", "UTF-8");

以下是将上述代码段添加到MainActivity中的结果：

package com.Olivia.webview;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {

    private WebView webView = null;

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

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

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        WebViewClientImpl webViewClient = new WebViewClientImpl(this);
        webView.setWebViewClient(webViewClient);

        //webView.loadUrl("https://www.scdev.com");
        webView.loadData("<html><body>Hello, world!</body></html>", "text/html", "UTF-8");
    }


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && this.webView.canGoBack()) {
            this.webView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

}
android webview
String baseUrl    = "https://www.scdev.com";
String data       = "Relative Link";
String mimeType   = "text/html";
String encoding   = "UTF-8";
String historyUrl = "https://www.scdev.com";

webView.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, historyUrl);

这就结束了Android WebView示例教程。您可以从下面的链接下载最终的Android WebView项目。

请下载Android WebView示例项目。

发表回复 0

Your email address will not be published. Required fields are marked *

✖
广告
将在 10 秒后关闭
bannerAds