Android >> Ejemplo de WebView en Android ( Parte 3)

ejemplo-webview-parte3

En la primera parte de este tutorial vimos como crear una vista WebView donde cargar una página Web. En la segunda parte vimos como habilitar JavaScript en una vista WebView y a crear interfaces entre el código de nuestra aplicación Android y el código JavaScript. En la tercera parte de este tutorial vamos a ver como navegar en la vista WebView.

  • Navegando en el historial de la página Web

Si abrimos una página Web en una vista WebView y hacemos clic sobre alguno de sus enlaces, éste se abrirá en el navegador Web de nuestro dispositivo en vez de abrir la página en el WebView. Este comportamiento puede sobrescribirse, permitiendo al usuario moverse hacia adelante y atrás a través del historial almacenado en el WebView.

Para sobrescribir dicho comportamiento debemos de definir un WebViewClient que usaremos en la vista WebView a través del método setWebViewClient(). De esta manera se cargará en nuestro WebView cualquier enlace que que aparezca en la página cargada en él.:

MainActivity

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

public class MainActivity extends Activity {

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

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

		// Enable JavaScript WebSettings webSettings =
		WebSettings webSettings = myWebView.getSettings();
		webSettings.setJavaScriptEnabled(true);

		// Provide a WebViewClient for your WebView
		myWebView.setWebViewClient(new WebViewClient());

		myWebView.loadUrl("https://amatellanes.wordpress.com/");
	}

}

Podemos sobrescribir otros comportamientos de la vista WebView creando nuestro propio WebViewClient. Si visitamos la documentación sobre el WebViewClient veremos la cantidad de métodos que podemos sobrescribir.

A continuación vamos a definir un WebViewClient que realizará las siguientes funciones:

  • Cargar siempre en nuestro WebView los enlaces de la página cargada (si seleccionamos un enlace que nos lleve fuera de la página cargada, se abrirá en el navegador Web de nuestro dispositivo, de tal manera que solo se muestre en nuestra aplicación las páginas Web que deseemos).
  • Mostrar un mensaje cuando empiece y termine la carga de la página.
  • Calcular el tiempo de carga de la página.

MainActivity.java

package com.example.pruebas;

import static android.widget.Toast.LENGTH_SHORT;
import static java.lang.System.currentTimeMillis;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Locale;

import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.net.Uri;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends Activity {

	...

	private class MyWebViewClient extends WebViewClient {

		private long loadTime; // Web page loading time

		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {

			if (Uri.parse(url).getHost().equals("amatellanes.wordpress.com")) {
				// This is my web site, so do not override; let my WebView load
				// the page
				return false;
			}

			// Otherwise, the link is not for a page on my site, so launch
			// another Activity that handles URLs
			Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
			startActivity(intent);
			return true;
		}

		@Override
		public void onPageStarted(WebView view, String url, Bitmap favicon) {
			super.onPageStarted(view, url, favicon);

			// Save start time
			this.loadTime = currentTimeMillis();

			// Show a toast
			Toast.makeText(getApplicationContext(),
					"A page has started loading...", LENGTH_SHORT).show();
		}

		@Override
		public void onPageFinished(WebView view, String url) {
			super.onPageFinished(view, url);

			// Calculate load time
			this.loadTime = currentTimeMillis() - this.loadTime;

			// Convert milliseconds to date format
			String time = new SimpleDateFormat("mm:ss:SSS", Locale.getDefault())
					.format(new Date(this.loadTime));

			// Show a toast
			Toast.makeText(getApplicationContext(),
					"Page has finished loading in " + time, LENGTH_SHORT)
					.show();

		}
	}
}

A continuación vamos a comentar cada uno de los métodos que acabamos de usar:

  • El método shouldOverrideUrlLoading() comprobará en primer lugar si el host de la URL pertenece al dominio que definamos. Si no es así se abrirá la URL en el navegador Web del dispositivo, en caso de que pertenezca, se abrirá en el WebView.
  • El método onPageStarted() es ejecutado cuando empieza la carga de la página Web.
  • El método onPageFinished() se ejecuta cuando la página está completamente cargada.

Una vez definido nuestro WebViewClient creamos una instancia suya que asignamos a nuestro WebView:

MainActivity.java

// Provide a WebViewClient for your WebView
myWebView.setWebViewClient(new MyWebViewClient());

myWebView.loadUrl("https://amatellanes.wordpress.com/");

Conforme vamos usando la vista WebView vamos sobrescribiendo la URL cargada y automáticamente se van guardan las URLs visitadas en un historial. Pdemos navegar hacia adelante y atrás en el historial usando los métodos goBack() y goForward(), que normalmente usaremos con los métodos canGoBack() y canGoForward(), que nos dicen si podemos ir hacia atrás o adelante respectivamente.

Para terminar, vamos a sobrescribir el método onBackPressed() de nuestra actividad principal para que al pulsar el botón Atrás de nuestro dispositivo volvamos a la página anterior en el WebView:

MainActivity.java

import static android.widget.Toast.LENGTH_SHORT;
import static java.lang.System.currentTimeMillis;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Locale;

import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends Activity {

	private WebView myWebView;

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

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

		// Enable JavaScript WebSettings webSettings =
		WebSettings webSettings = myWebView.getSettings();
		webSettings.setJavaScriptEnabled(true);

		// Provide a WebViewClient for your WebView
		myWebView.setWebViewClient(new MyWebViewClient());

		myWebView.loadUrl("https://amatellanes.wordpress.com/");

	}

	@Override
	public void onBackPressed() {

		// Check if there's history
		if (this.myWebView.canGoBack())
			this.myWebView.goBack();
		else
			super.onBackPressed();

	}

	private class MyWebViewClient extends WebViewClient {

		private long loadTime; // Web page loading time

		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {

			if (Uri.parse(url).getHost().equals("amatellanes.wordpress.com")) {
				// This is my web site, so do not override; let my WebView load
				// the page
				return false;
			}

			// Otherwise, the link is not for a page on my site, so launch
			// another Activity that handles URLs
			Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
			startActivity(intent);
			return true;
		}

		@Override
		public void onPageStarted(WebView view, String url, Bitmap favicon) {
			super.onPageStarted(view, url, favicon);

			// Save start time
			this.loadTime = currentTimeMillis();

			// Show a toast
			Toast.makeText(getApplicationContext(),
					"A page has started loading...", LENGTH_SHORT).show();
		}

		@Override
		public void onPageFinished(WebView view, String url) {
			super.onPageFinished(view, url);

			// Calculate load time
			this.loadTime = currentTimeMillis() - this.loadTime;

			// Convert milliseconds to date format
			String time = new SimpleDateFormat("mm:ss:SSS", Locale.getDefault())
					.format(new Date(this.loadTime));

			// Show a toast
			Toast.makeText(getApplicationContext(),
					"Page has finished loading in " + time, LENGTH_SHORT)
					.show();

		}
	}

}

Más información | Ejemplo de WebView en Android (Parte 1), Ejemplo de WebView en Android (Parte 2) y Android Developers

Descargar código | Github

Etiquetado , , , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: