Android 上的 Web 浏览器应用

• 下载源代码 - 1.6 KB

引言

有时我们需要在 Android 应用中显示一些在线内容。如果我们可以使用一个控件直接在应用中显示这些在线内容，将会非常有帮助。WebView 控件为我们的 Android 应用提供了此功能。它使我们能够在 Activity 中嵌入一个 Web 浏览器。

使用 WebView 控件，我们可以显示在线内容以及存储在我们项目中的任何 HTML 页面。

背景

在本文中，我使用了一个 EditText 控件来接受网页或本地页面的 URL。添加了一个 WebView 控件来在设备上渲染页面。在输入 URL 后按下“GO”按钮，将导致页面在 WebView 控件上显示。

使用代码

为了使我们的 Activity 能够访问互联网并在 WebView 中加载网页，我们需要在 AndroidManifest.xml 文件中为我们的应用指定 Internet 权限，如下所示

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

以下是 AndroidManifest.xml 文件的代码。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.azim" >
	
	<uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

我使用了以下嵌套的线性布局来显示 TextView、EditText、Button 和 WebView 控件。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">
	<LinearLayout
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:orientation="horizontal">
		<TextView
			android:id="@+id/txtWebUrl"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Enter URL: " />
		<EditText
			android:id="@+id/edtWebUrl"
			android:layout_width="match_parent"
			android:layout_height="wrap_content" />
	</LinearLayout>
	<LinearLayout
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:orientation="vertical">
		<Button
			android:id="@+id/btnGo"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			android:onClick="showPage"
			android:text="Go"/>
	</LinearLayout>
	<LinearLayout
	        android:layout_width="match_parent"
	        android:layout_height="wrap_content"
	        android:orientation="horizontal">
        	<WebView
			android:id="@+id/myWebView"
                	android:layout_width="wrap_content"
                	android:layout_height="wrap_content" />
	</LinearLayout>
</LinearLayout>

上述代码中 Button 视图的 android:onClick 属性指定 showPage() 方法是“GO”按钮点击事件的处理程序。

WebView 控件的 loadUrl() 方法用于加载要显示的网页。WebSettings 类的 setBuiltInZoomControls() 方法可用于显示内置的缩放控件。WebSettings 类的 setJavaScriptEnabled() 方法可用于启用页面上的 JavaScript。以下代码片段用于加载 Google 网站的主页以及显示内置的缩放控件

	   view=(WebView)findViewById(R.id.myWebView);
	   WebSettings settings=view.getSettings();
	   settings.setBuiltInZoomControls(true);
	   settings.setJavaScriptEnabled(true);
	   view.setWebViewClient(new Callback());
	   view.loadUrl("http://www.google.com");

在上述代码中，setWebViewClient() 方法阻止在设备的浏览器中加载 URL。我们需要重写 Activity 的 onKeyDown() 方法，以便能够返回 WebView 历史记录中的上一页。以下是 onKeyDown() 方法的代码。

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

“GO”按钮的以下点击事件处理程序显示在 EditText 控件中由用户输入的 URL 对应的页面。

	public void showPage(View v)
	{
		view.setWebViewClient(new Callback());
		view.loadUrl(text.getText().toString());
	}

最后，我们需要按照以下方式重写 WebViewClient 类的 shouldOverrideUrlLoading() 方法，以防止站点在设备的浏览器中打开。

	class Callback extends WebViewClient
	{

		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url)
		{
			return false;
		}
	}

以下是应用执行的输出。

 

如果我们在项目的 assets 文件夹中有一个名为 Hello.html 的 HTML 文件，可以使用以下 URL 打开它

file:///android_asset/Hello.html

关注点

我希望本文能帮助读者理解 WebView 控件的工作原理。