English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 所在位置
  2. 首页
  3. 经验笔记
  4. 正文

Método de carga de páginas web y datos con componentes nativos WebView en Android

在Api中关于这个类的介绍大致就是这是一个可以显示网页的视图，如：

webView.loadUrl(http://www.baidu.com/);

resultado de visualización:

还可以加载一些html的字符串，如：

String str = "<html><body>You scored <b>192</b> puntos.</body></html>";
webView.loadData(str, "text/html", null);

resultado de visualización:

a través de este componente se puede mostrar una página web en su Activity o saltar al navegador para mostrar la página web. El ejemplo superior muestra cómo saltar al navegador del teléfono para mostrar la interfaz de Baidu. En la introducción de métodos de WebView inferior, usaremos métodos de WebView para restringir que la página web se muestre en el Activity actual.

dejemos que lo demostramos paso a paso el uso de WebView.

I. cargar página web

1.WebView se utiliza para mostrar páginas web, al usarlo debe prestar atención constantemente a que debemos agregar permisos de red

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

2.agregar la etiqueta WebView en el diseño XML y crear una instancia en el Activity

<WebView
android:id="@"+id/main_webview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
webView = (WebView) findViewById(R.id.main_webview);

3.después de eso, podemos cargar una página web a través del método loadUrl de WebView

webView.loadUrl(http://www.baidu.com/);

4.pero con esta carga de página web, la página web saltará al navegador del teléfono, ¿cómo restringir que la página web se muestre en el Activity actual, es necesario configurar su modo de navegador en false
agregar el código siguiente:

webView = (WebView) findViewById(R.id.main_webview);
// establecer el cliente de WebView
webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return false;// Devolver false
}
});
webView.loadUrl("http://www.baidu.com/");

efecto de visualización:

de esta manera, se carga una página web de manera simple.

WebView también proporciona una clase abstracta WebSettings para configurar algunos contenido básico de la página web que se muestra, se instancia a través del método get del objeto WebView

WebSettings webSettings = webView.getSettings();

a través de esta clase se pueden configurar una serie de propiedades de visualización de páginas web de WebView

para verificar si las propiedades se aplican correctamente, cambié la página web que muestra WebView, cambiándola por el sitio web de nuestra empresa, primero veamos el estilo de la página web que se muestra sin configurar una serie de propiedades, podemos ver que la interfaz no se adapta bien a la pantalla del teléfono, lo que resulta en una mala experiencia del usuario

después de eso, configuré una serie de propiedades de visualización de páginas web a través de la clase WebSettings

WebSettings webSettings = webView.getSettings();
// Permitir que WebView pueda ejecutar javaScript
webSettings.setJavaScriptEnabled(true);
// Permitir que JavaScript pueda abrir windows automáticamente
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
// Establecer la caché
webSettings.setAppCacheEnabled(true);
// Establecer el modo de caché, hay cuatro modos en total
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
// 
// webSettings.setAppCachePath("
// Soporta la escalado (ajuste al tamaño de la pantalla actual)
webSettings.setSupportZoom(true);
// Ajustar el tamaño de las imágenes a un tamaño adecuado
webSettings.setUseWideViewPort(true);
// Soporta el reajuste del contenido, hay cuatro métodos en total
// El predeterminado es NARROW_COLUMNS
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
// Establecer los controles de pantalla que pueden ser visualizados
webSettings.setDisplayZoomControls(true);
// Establecer el tamaño del fuente predeterminado
webSettings.setDefaultFontSize(12);

después de configurar, eche un vistazo al efecto de ejecución:

todo el código:

archivo de lista: lo más importante es no olvidar agregar los permisos de red

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.wu.webviewdemo">
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

archivo de diseño

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000"
android:gravity="center"
android:paddingBottom=""10dp"
android:paddingTop=""10dp"
android:text="usar WebView"
android:textAllCaps="false"
android:textColor="#fff" />
<WebView
android:id="@"+id/main_webview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

Activity

package com.wu.webviewdemo;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.main_webview);
// establecer el cliente de WebView
webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return false;// Devolver false
}
});
WebSettings webSettings = webView.getSettings();
// Permitir que WebView pueda ejecutar javaScript
webSettings.setJavaScriptEnabled(true);
// Permitir que JavaScript pueda abrir windows automáticamente
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
// Establecer la caché
webSettings.setAppCacheEnabled(true);
// Establecer el modo de caché, hay cuatro modos en total
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
// 
// webSettings.setAppCachePath("
// Soporta la escalado (ajuste al tamaño de la pantalla actual)
webSettings.setSupportZoom(true);
// Ajustar el tamaño de las imágenes a un tamaño adecuado
webSettings.setUseWideViewPort(true);
// Soporta el reajuste del contenido, hay cuatro métodos en total
// El predeterminado es NARROW_COLUMNS
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
// Establecer los controles de pantalla que pueden ser visualizados
webSettings.setDisplayZoomControls(true);
// Establecer el tamaño del fuente predeterminado
webSettings.setDefaultFontSize(12);
webView.loadUrl("http://www.lanou3g.com/");
}
}

Segundo, cargar una cadena de html

En algunos casos de desarrollo de Android, nos enfrentamos a una situación en la que la visualización de la página de detalles no es solo texto simple, ni es una simple página web, sino que se nos proporciona datos html escritos a través de una interfaz, al enfrentarnos a estos datos, la manera que generalmente utilizamos es cargarlos con WebView, lo que utiliza otro método de WebView

public void loadData(String data, String mimeType, String encoding)

1.Primero, echemos un vistazo al string de html, para aumentar la persuasión y acercarlo a la realidad, no hemos creado una cadena en vano (como el ejemplo inicial) sino que hemos extraído un fragmento de un artículo de la noticia de NetEase (noticias sobre Lao Guo y su aprendiz, a pesar de que me gusta escuchar los crosstalk de Guo Shou, después de todo, beber y alisar el cabello)

private String body = "<p>　　<b>Artículo exclusivo de NetEase Entertainment,9mes7日报道</b>(文/小易)" +
"Esta madrugada, el discípulo He Xiaoxiao de la generación He del maestro Guo Degang publicó un mensaje en su microblog expresando su lealtad a De Yun Society, afirmando que antes se había comprometido a trabajar sin permiso en el exterior, dejando De Yun Society," +
"Debido a la vergüenza de no haber contactado con el maestro Guo Degang y la señora maestra durante dos años, debería haber sido expulsado de la escuela, pero el maestro Guo Degang no me abandonó." +
"Luego, Guo Degang compartió el microblog y escribió: "Poder cambiar después de reconocer el error es lo mejor." Además, los días anteriores, el asunto de Cao Yunjin y He Yunwei luchando contra Guo Degang por detrás de escena," +
"Las diversas disputas entre Guo Degang y sus discípulos que deberían terminar pronto, temo que no puedan tener un final definitivo."/p><p>　　<b>Texto original de la microblog de Han Xiaoxiao:" +
"</b></p><p>　　2006año, ingresé en la escuela He y tomé el nombre He Xiaoxiao.2009año6mes13día, el maestro Guo Degang me recibió como discípulo de la escuela Guo." +
"Durante varios años, comí, viví y aprendí arte en la base De Yun, y el maestro y la señora maestra no tomaron ni un centavo."2010año, el maestro y la señora maestra me dieron un sobre de dinero y un anillo de bodas," +
"y nos proporcionó una casa de boda en la base De Yun."2014año9mes, debido a razones personales, viajé a una ciudad exterior sin permiso para desarrollarme. Más tarde, al regresar a la capital, sentí vergüenza de enfrentar a mi maestro," +
"Dos años sin atreverme a ver a mi maestro. Después de desarrollarme en Shanghai,"2016año6Durante la gira de Shanghai del maestro, finalmente tuve el valor de reconocer mi error al maestro," +
"El maestro mostró su magnanimidad y me perdonó. Después de dos meses de regreso a la capital, visité expresamente mi hogar para ver a la señora maestra y obtener su perdón. Por los errores cometidos por He Xiaoxiao," +
"Bastante para llevar a cabo una "limpieza de la puerta", en el momento de la revisión del árbol genealógico de la familia De Yun, bajo el perdón de mi maestro, recibir "esperando la revisión" es en realidad abrir una puerta de salvación para el discípulo." +
"El discípulo He Xiaodong agradece profundamente las enseñanzas y el afecto de su maestro. A pesar de que He Xiaodong está a miles de millas de distancia de la capital, siempre tendrá un corazón unido a De Yun." +
"No puedo olvidar las enseñanzas cariñosas de mi maestro, trabajar con constancia en las artes y ser una buena persona. ¡Deseo que mi maestro y señora estén siempre saludables! El discípulo He Xiaodong rinde homenaje a distancia!"/p>";

2. Establece la codificación de caracteres predeterminada, que se utiliza comúnmente en Android, UTF-8

WebSettings webSettings = webView.getSettings();
webSettings.setDefaultTextEncodingName("UTF-8");

3. Luego llama al método loadData de WebView

webView.loadData(body, "text/html; charset=UTF-8", null);

El efecto de visualización es el siguiente:

A continuación, se muestra todo el código, el diseño sigue utilizando (Cargar página) y no ha habido cambios significativos en la parte del código, específicamente como se muestra a continuación:

package com.wu.webviewdemo;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
private WebView webView;
private String body = "<p>　　<b>Artículo exclusivo de NetEase Entertainment,9mes7日报道</b>(文/小易)" +
"Esta madrugada, el discípulo He Xiaoxiao de la generación He del maestro Guo Degang publicó un mensaje en su microblog expresando su lealtad a De Yun Society, afirmando que antes se había comprometido a trabajar sin permiso en el exterior, dejando De Yun Society," +
"Debido a la vergüenza de no haber contactado con el maestro Guo Degang y la señora maestra durante dos años, debería haber sido expulsado de la escuela, pero el maestro Guo Degang no me abandonó." +
"Luego, Guo Degang compartió el microblog y escribió: "Poder cambiar después de reconocer el error es lo mejor." Además, los días anteriores, el asunto de Cao Yunjin y He Yunwei luchando contra Guo Degang por detrás de escena," +
"Las diversas disputas entre Guo Degang y sus discípulos que deberían terminar pronto, temo que no puedan tener un final definitivo."/p><p>　　<b>Texto original de la microblog de Han Xiaoxiao:" +
"</b></p><p>　　2006año, ingresé en la escuela He y tomé el nombre He Xiaoxiao.2009año6mes13día, el maestro Guo Degang me recibió como discípulo de la escuela Guo." +
"Durante varios años, comí, viví y aprendí arte en la base De Yun, y el maestro y la señora maestra no tomaron ni un centavo."2010año, el maestro y la señora maestra me dieron un sobre de dinero y un anillo de bodas," +
"y nos proporcionó una casa de boda en la base De Yun."2014año9mes, debido a razones personales, viajé a una ciudad exterior sin permiso para desarrollarme. Más tarde, al regresar a la capital, sentí vergüenza de enfrentar a mi maestro," +
"Dos años sin atreverme a ver a mi maestro. Después de desarrollarme en Shanghai,"2016año6Durante la gira de Shanghai del maestro, finalmente tuve el valor de reconocer mi error al maestro," +
"El maestro mostró su magnanimidad y me perdonó. Después de dos meses de regreso a la capital, visité expresamente mi hogar para ver a la señora maestra y obtener su perdón. Por los errores cometidos por He Xiaoxiao," +
"Bastante para llevar a cabo una "limpieza de la puerta", en el momento de la revisión del árbol genealógico de la familia De Yun, bajo el perdón de mi maestro, recibir "esperando la revisión" es en realidad abrir una puerta de salvación para el discípulo." +
"El discípulo He Xiaodong agradece profundamente las enseñanzas y el afecto de su maestro. A pesar de que He Xiaodong está a miles de millas de distancia de la capital, siempre tendrá un corazón unido a De Yun." +
"No puedo olvidar las enseñanzas cariñosas de mi maestro, trabajar con constancia en las artes y ser una buena persona. ¡Deseo que mi maestro y señora estén siempre saludables! El discípulo He Xiaodong rinde homenaje a distancia!"/p>";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.main_webview);
WebSettings webSettings = webView.getSettings();
webSettings.setDefaultTextEncodingName("UTF-8");
webView.loadData(body, "text/html; charset=UTF-8", null);
}
}

Lo mencionado anteriormente es el método que el editor les ha presentado para cargar páginas web y datos utilizando componentes nativos WebView en Android, espero que les sea útil. Si tienen alguna pregunta, dános un mensaje y el editor les responderá a tiempo. ¡Gracias también por el apoyo a la página web de tutorial de grito!

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha contribuido y subido por los usuarios de Internet de manera autónoma, este sitio web no posee los derechos de propiedad, no se ha editado artificialmente y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @) para denunciar, y proporcione evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.

Tutoriales básicos
Te gustará