Android: WebView
WebView es una vista que muestra páginas web dentro de su aplicación. También puede especificar una cadena HTML y mostrarla dentro de su aplicación usando WebView. WebView convierte su aplicación en una aplicación web.
Para agregar WebView a su aplicación, debe agregar <WebView>elemento a su archivo de diseño xml. Su sintaxis es la siguiente:
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
Para usarlo, debe obtener una referencia de esta vista en el archivo Java. Para obtener una referencia, cree un objeto de la clase WebView. Su sintaxis es -
WebView browser = (WebView) findViewById(R.id.webview);
Para cargar una URL web en WebView, debe llamar a un método loadUrl(String url)de la clase WebView, especificando la URL requerida. Su sintaxis es:
browser.loadUrl("http://www.tutorialspoint.com");
Además de simplemente cargar la URL, puede tener más control sobre su WebView utilizando los métodos definidos en la clase WebView. Se enumeran de la siguiente manera:
No Señor | Método y descripción |
---|---|
1 | canGoBack() Este método especifica que WebView tiene un elemento de historial anterior. |
2 | canGoForward() Este método especifica que WebView tiene un elemento de historial de reenvío. |
3 | clearHistory() Este método borrará el historial de avance y retroceso de WebView. |
4 | destroy() Este método destruye el estado interno de WebView. |
5 | findAllAsync(String find) Este método encuentra todas las instancias de cadena y las resalta. |
6 | getProgress() Este método obtiene el progreso de la página actual. |
7 | getTitle() Este método devuelve el título de la página actual. |
8 | getUrl() Este método devuelve la URL de la página actual. |
Si hace clic en cualquier enlace dentro de la página web de WebView, esa página no se cargará dentro de su WebView. Para hacer eso, necesita extender su clase deWebViewClienty anular su método. Su sintaxis es -
private class MyBrowser extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
}
Ejemplo
A continuación, se muestra un ejemplo que demuestra el uso de WebView Layout. Crea una aplicación web básica que le pedirá que especifique una URL y cargará este sitio web de URL en WebView.
Para experimentar con este ejemplo, debe ejecutarlo en un dispositivo real en el que se esté ejecutando Internet.
Pasos | Descripción |
---|---|
1 | Utilizará Android Studio para crear una aplicación de Android en un paquete com.example.sairamkrishna.myapplication. |
2 | Modifique el archivo src / MainActivity.java para agregar el código WebView. |
3 | Modifique res / layout / activity_main para agregar los componentes XML respectivos |
4 | Modifique AndroidManifest.xml para agregar los permisos necesarios |
5 | Ejecute la aplicación y elija un dispositivo Android en ejecución e instale la aplicación en él y verifique los resultados. |
A continuación se muestra el contenido del archivo de actividad principal modificado src/MainActivity.java.
package com.example.sairamkrishna.myapplication;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
public class MainActivity extends Activity {
Button b1;
EditText ed1;
private WebView wv1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
b1=(Button)findViewById(R.id.button);
ed1=(EditText)findViewById(R.id.editText);
wv1=(WebView)findViewById(R.id.webView);
wv1.setWebViewClient(new MyBrowser());
b1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String url = ed1.getText().toString();
wv1.getSettings().setLoadsImagesAutomatically(true);
wv1.getSettings().setJavaScriptEnabled(true);
wv1.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
wv1.loadUrl(url);
}
});
}
private class MyBrowser extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
}
}
A continuación se muestra el contenido modificado del xml res/layout/activity_main.xml.
En el siguiente código abc indica el logo de tutorialspoint.com
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://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">
<TextView android:text="WebView" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textview"
android:textSize="35dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tutorials point"
android:id="@+id/textView"
android:layout_below="@+id/textview"
android:layout_centerHorizontal="true"
android:textColor="#ff7aff24"
android:textSize="35dp" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/editText"
android:hint="Enter Text"
android:focusable="true"
android:textColorHighlight="#ff7eff15"
android:textColorHint="#ffff25e6"
android:layout_marginTop="46dp"
android:layout_below="@+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="@+id/imageView"
android:layout_alignEnd="@+id/imageView" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView"
android:src="@drawable/abc"
android:layout_below="@+id/textView"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter"
android:id="@+id/button"
android:layout_alignTop="@+id/editText"
android:layout_toRightOf="@+id/imageView"
android:layout_toEndOf="@+id/imageView" />
<WebView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/webView"
android:layout_below="@+id/button"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>
A continuación se muestra el contenido de la res/values/string.xml.
<resources>
<string name="app_name">My Application</string>
</resources>
A continuación se muestra el contenido de AndroidManifest.xml archivo.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.sairamkrishna.myapplication" >
<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>
Intentemos ejecutar su aplicación WebView. Para ejecutar la aplicación desde Android Studio, abra uno de los archivos de actividad de su proyecto y haga clic en el icono Ejecutar de la barra de herramientas. Android Studio se mostrará como se muestra a continuación
Ahora solo especifique una URL en el campo de URL y presione el botón de navegación que aparece para iniciar el sitio web. Pero antes de eso, asegúrese de estar conectado a Internet. Después de presionar el botón, aparecerá la siguiente pantalla:
Nota. Con solo cambiar la URL en el campo de URL, su WebView abrirá el sitio web que desee.
La imagen de arriba muestra la vista web de tutorialspoint.com