Android WebView se utiliza para mostrar HTML en una aplicación de Android. Podemos utilizar Android WebView para cargar una página HTML en una aplicación de Android.
Vista web de Android
El componente Android WebView es un navegador completo implementado como una Viewsubclase para integrarlo en nuestra aplicación Android.
Importancia de Android WebView
Para el código HTML que está limitado en términos de alcance, podemos implementar el método estático fromHtml()que pertenece a la clase HTML Utility para analizar cadenas con formato HTML y mostrarlas en un TextView. TextViewpuede representar formatos simples como estilos (negrita, cursiva, etc.), tipos de letra (serif, sans serif, etc.), colores, enlaces, etc. Sin embargo, cuando se trata de formatos complejos y un alcance mayor en términos de HTML, TextView no lo maneja bien. Por ejemplo, no será posible navegar por Facebook a través de un TextView. En tales casos, WebViewserá el widget más apropiado, ya que puede manejar una gama mucho más amplia de etiquetas HTML. WebView también puede manejar CSS y JavaScript, que Html.fromHtml()simplemente ignoraríamos. WebView también puede ayudar con metáforas de navegación comunes, como la lista de historial de URL visitadas para admitir la navegación hacia atrás y hacia adelante. Aún así, WebView viene con su propio conjunto de desventajas, como que es un widget mucho más caro de usar, en términos de consumo de memoria que un TextView. La razón de este aumento de memoria es porque WebView funciona con WebKit/Blink , que son motores de renderizado web de código abierto para potenciar el contenido en navegadores como Chrome.
Ejemplo de vista web de Android
El componente WebView de Android se inserta en el archivo de diseño XML para el diseño en el que queremos que se muestre el WebView. En este ejemplo, lo insertamos en el activity_main.xmlarchivo como se muestra a continuación:
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"//RelativeLayoutCódigo WebView de Android Studio
El componente WebView se inicializa utilizando MainActivitysu ID definido como activity_main.xmlse muestra en el fragmento a continuación:
WebView webView = (WebView) findViewById(R.id.webview);URL de carga de vista web de Android
Una vez que hemos obtenido una referencia a WebView, podemos configurarlo y cargar las URL mediante HTTP. loadUrl()El método WebView se utiliza para cargar la URL en WebView, como se muestra a continuación:
webView.loadUrl("https://www.journaldev.com");Antes de empezar a jugar con la URL, hay dos aspectos críticos que debemos tener en cuenta:
-
Compatibilidad con JavaScript : JavaScript está desactivado de forma predeterminada en los widgets de WebView. Por lo tanto, las páginas web que contienen referencias a JavaScript no funcionarán correctamente. Para habilitar JavaScript, se debe llamar al siguiente fragmento en la instancia de WebView:
getSettings().setJavaScriptEnabled(true); -
Adición de permisos : para obtener y cargar las URL en WebView, debemos agregar permisos para acceder a Internet desde la aplicación; de lo contrario, no podrá cargar las páginas web. La siguiente línea de código debe agregarse en el
AndroidManifest.xmlarchivo sobre la etiqueta de la aplicación, como se muestra a continuación:?xml version="1.0" encoding="utf-8"?manifest xmlns_android="https://schemas.android.com/apk/res/android" package="com.journaldev.webview" uses-permission android_name="android.permission.INTERNET" / application android_allowBackup="true" android_icon="@mipmap/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
La clase MainActivity a continuación contiene todas las características discutidas hasta ahora.
package com.journaldev.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.journaldev.com"); }}Configuración de WebViewClient
El comportamiento predeterminado cuando un usuario hace clic en un enlace dentro de la página web es abrir la aplicación del navegador predeterminada del sistema. Esto puede afectar la experiencia de usuario de los usuarios de la aplicación. Para mantener la navegación de la página dentro de WebView y, por lo tanto, dentro de la aplicación, necesitamos crear una subclase de WebViewClienty anular su shouldOverrideUrlLoading(WebView webView, String url)método. Así es como se vería una subclase de WebViewClient:
private class MyWebViewClient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView webView, String url) { return false; }}Cuando el shouldOverrideUrlLoading()método devuelve falso, las URL que se pasan como parámetro al método se cargan dentro de WebView en lugar de en el navegador. Para distinguir entre las URL que se cargan dentro de la aplicación y el navegador, se debe agregar el siguiente código en el método shouldOverrideUrlLoading():
if(url.indexOf("journaldev.com") -1 ) return false; return true;Nota : Devolver verdadero no significa que la URL se abra en la aplicación del navegador. De hecho, la URL no se abrirá en absoluto. Para cargar la URL en el navegador, se debe activar una intención . La siguiente subclase contiene todas las configuraciones que hemos agregado.
package com.journaldev.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("journaldev.com") -1 ) return false; Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); activity.startActivity(intent); return true; }}El constructor toma Activity como parámetro para activar una intención en el navegador. Antes de crear una instancia de esta subclase en MainActivity, veamos otra característica importante.
Navegación WebView con botón Atrás
Si pulsamos el botón de retroceso en la aplicación desarrollada hasta ahora vemos que la aplicación vuelve a la pantalla de inicio a pesar de que hemos navegado por algunas páginas dentro del propio WebView. Para poder recorrer el historial de navegación al pulsar el botón de retroceso debemos modificar la función del botón de retroceso como se muestra en el fragmento siguiente:
@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); }El método onKeyDown() ha sido reemplazado por una implementación que primero verifica si WebView puede volver atrás. Si el usuario ha abandonado la primera página cargada dentro de WebView, WebView puede volver atrás. WebView mantiene un historial de navegación como un navegador normal. Si no hay historial, se ejecutará el comportamiento predeterminado del botón Atrás, es decir, se saldrá de la aplicación. A continuación, MainActivityse incluye el código con las funciones anteriores.
package com.journaldev.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.journaldev.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); }}La siguiente imagen muestra la salida producida por nuestro proyecto, puedes ver que WebView está cargado con una URL preasignada.
Alternativas para cargar contenido en WebView
Hasta ahora, solo hemos utilizado el método loadUrl() para cargar el contenido en WebView. Aquí veremos otras formas de cargar contenido después de una breve introducción a los usos de loadUrl(). loadUrl() funciona con:
- URL https:// y https://
- file:// URL que apuntan al sistema de archivos local
- file:///android_asset/ URL que apuntan a uno de los activos de sus aplicaciones
- content:// URL que apuntan a un
ContentProvidersitio que publica contenido disponible para transmisión
En lugar de loadUrl() podemos utilizar loadData() con el que podemos mostrar fragmentos o todo el código HTML en el método. Hay dos versiones de loadData(). La más simple nos permite proporcionar el contenido, el tipo MIME y la codificación, todo como cadenas. Normalmente, el tipo MIME será text/html y la codificación será UTF-8 para HTML normal, como se muestra a continuación:
webView.loadData("htmlbodyHello, world!/body/html", "text/html", "UTF-8");A continuación se muestra el resultado cuando se agrega el fragmento anterior en MainActivity como se muestra a continuación:
package com.journaldev.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.journaldev.com"); webView.loadData("htmlbodyHello, 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); }}También existe un método loadDataWithBaseURL() . Este toma, entre otros parámetros, la URL base que se utilizará al resolver URL relativas en el HTML. Cualquier URL relativa (por ejemplo, img src=”images/sample.png”) se interpretará como relativa a la URL base suministrada a loadDataWithBaseURL(). El parámetro historyUrl es la URL que se escribirá en el historial de navegación interno de WebView para el HTML cargado en WebView. El siguiente fragmento muestra un prototipo:
String baseUrl = "https://www.journaldev.com";String data = "Relative Link";String mimeType = "text/html";String encoding = "UTF-8";String historyUrl = "https://www.journaldev.com";webView.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, historyUrl);Con esto finaliza el tutorial de ejemplo de Android WebView. Puedes descargar el proyecto final de Android WebView desde el siguiente enlace.
Descargar proyecto de ejemplo de Android WebView