132 lines
5.9 KiB
Plaintext
132 lines
5.9 KiB
Plaintext
page.title=Web View
|
|
parent.title=Hello, Views
|
|
parent.link=index.html
|
|
@jd:body
|
|
|
|
<p>{@link android.webkit.WebView} allows you to create your own window for viewing web pages (or even
|
|
develop a complete browser). In this tutorial, you'll create a simple {@link android.app.Activity}
|
|
that can view and navigate web pages.</p>
|
|
|
|
<ol>
|
|
<li>Create a new project named <em>HelloWebView</em>.</li>
|
|
<li>Open the <code>res/layout/main.xml</code> file and insert the following:
|
|
<pre>
|
|
<?xml version="1.0" encoding="utf-8"?>
|
|
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
|
|
android:id="@+id/webview"
|
|
android:layout_width="fill_parent"
|
|
android:layout_height="fill_parent"
|
|
/>
|
|
</pre>
|
|
</li>
|
|
|
|
<li>Now open the <code>HelloWebView.java</code> file.
|
|
At the top of the class, declare a {@link android.webkit.WebView} object:
|
|
<pre>WebView mWebView;</pre>
|
|
<p>Then use the following code for the {@link android.app.Activity#onCreate(Bundle) onCreate()}
|
|
method:</p>
|
|
<pre>
|
|
public void onCreate(Bundle savedInstanceState) {
|
|
super.onCreate(savedInstanceState);
|
|
setContentView(R.layout.main);
|
|
|
|
mWebView = (WebView) findViewById(R.id.webview);
|
|
mWebView.getSettings().setJavaScriptEnabled(true);
|
|
mWebView.loadUrl("http://www.google.com");
|
|
}
|
|
</pre>
|
|
<p>This initializes the member {@link android.webkit.WebView} with the one from the
|
|
{@link android.app.Activity} layout; requests a {@link android.webkit.WebSettings} object with
|
|
{@link android.webkit.WebView#getSettings()}; and enables JavaScript for the {@link
|
|
android.webkit.WebView} with {@link android.webkit.WebSettings#setJavaScriptEnabled(boolean)}.
|
|
Finally, an initial web page is loaded with {@link
|
|
android.webkit.WebView#loadUrl(String)}.</p>
|
|
</li>
|
|
|
|
<li>Because this application needs access to the Internet, you need to add the appropriate
|
|
permissions to the Android manifest file. Open the <code>AndroidManifest.xml</code> file
|
|
and add the following as a child of the <code><manifest></code> element:
|
|
|
|
<pre><uses-permission android:name="android.permission.INTERNET" /></pre></li>
|
|
|
|
<li>While you're in the manifest, give some more space for web pages by removing the title
|
|
bar, with the "NoTitleBar" theme:
|
|
<pre>
|
|
<activity android:name=".HelloGoogleMaps" android:label="@string/app_name"
|
|
<strong>android:theme="@android:style/Theme.NoTitleBar"</strong>>
|
|
</pre>
|
|
</li>
|
|
|
|
<li>Now run the application.
|
|
<p>You now have a simplest web page viewer.
|
|
It's not quite a browser yet because as soon as you click a link, the default Android Browser
|
|
handles the Intent to view a web page, because this {@link android.app.Activity} isn't
|
|
technically enabled to do so. Instead of adding an intent filter to view web pages, you can
|
|
override the {@link android.webkit.WebViewClient} class and enable this {@link
|
|
android.app.Activity} to handle its own URL requests.</p>
|
|
</li>
|
|
|
|
<li>In the <code>HelloAndroid</code> Activity, add this nested class:
|
|
<pre>
|
|
private class HelloWebViewClient extends WebViewClient {
|
|
@Override
|
|
public boolean shouldOverrideUrlLoading(WebView view, String url) {
|
|
view.loadUrl(url);
|
|
return true;
|
|
}
|
|
}
|
|
</pre>
|
|
</li>
|
|
<li>Then towards the end of the {@link android.app.Activity#onCreate(Bundle)} method, set an
|
|
instance of the <code>HelloWebViewClient</code> as the {@link android.webkit.WebViewClient}:
|
|
<pre>mWebView.setWebViewClient(new HelloWebViewClient());</pre>
|
|
|
|
<p>This line can go anywhere following the initialization of the {@link
|
|
android.webkit.WebView} object.</p>
|
|
<p>This creates a {@link android.webkit.WebViewClient} that will load any URL selected from this
|
|
{@link android.webkit.WebView} into the same {@link android.webkit.WebView}. The
|
|
{@link android.webkit.WebViewClient#shouldOverrideUrlLoading(WebView,String)} method is passed
|
|
the current {@link android.webkit.WebView} and the URL requested, so all it needs to do is load
|
|
the URL in the given view. Returning <code>true</code> says that the method has handled the URL
|
|
and the event should not propagate (in which case, an Intent would be created that's handled by
|
|
the Browser application).</p>
|
|
<p>If you run the application again, new pages will now load in this Activity.
|
|
However, you can't navigate back to previous pages. To do this, you need to handle the BACK
|
|
button on the device, so that it will return to the previous page, rather than exit the
|
|
application.</p>
|
|
</li>
|
|
|
|
<li>To handle the BACK button key press, add the following method inside the
|
|
<code>HelloWebView</code> Activity:
|
|
<pre>
|
|
@Override
|
|
public boolean onKeyDown(int keyCode, KeyEvent event) {
|
|
if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
|
|
mWebView.goBack();
|
|
return true;
|
|
}
|
|
return super.onKeyDown(keyCode, event);
|
|
}
|
|
</pre>
|
|
<p>This {@link android.app.Activity#onKeyDown(int,KeyEvent)} callback method will be called
|
|
anytime a button is pressed while in the Activity. The condition inside uses the {@link
|
|
android.view.KeyEvent} to check whether the key pressed is the BACK button and whether the
|
|
{@link android.webkit.WebView} is actually capable of navigating back (if it has a history). If
|
|
both are true, then the {@link android.webkit.WebView#goBack()} method is called,
|
|
which will navigate back one step in the {@link android.webkit.WebView}
|
|
history.Returning <code>true</code> indicates that the event has been handled. If this condition
|
|
is not met, then the event is sent back to the system.</p>
|
|
</li>
|
|
<li>Run the application again. You'll now be able to follow links and navigate back through the
|
|
page history.</li>
|
|
</ol>
|
|
<p>When you open the application, it should look like this:</p>
|
|
<img src="images/hello-webview.png" width="150px" />
|
|
|
|
<h3>Resource</h3>
|
|
<ul>
|
|
<li>{@link android.webkit.WebView}</li>
|
|
<li>{@link android.webkit.WebViewClient}</li>
|
|
<li>{@link android.view.KeyEvent}</li>
|
|
</ul>
|