Representación de HTML en un WebView con CSS personalizado

Question 1

Mi aplicación está usando JSoup para descargar el HTML de una página de tablero de mensajes (digamos que en este caso es una página que contiene las publicaciones de un hilo dado). Me gustaría tomar este HTML, eliminar los elementos no deseados y aplicar CSS personalizado para diseñarlo para que sea 'móvil' en un WebView.

¿Debo inyectar los estilos en el HTML a medida que lo proceso (ya que lo procesaré de todos modos) o hay una buena manera de agregar un archivo CSS a los activos de mi aplicación y simplemente hacer referencia a él? Supongo que lo último sería ideal, pero no estoy seguro de cómo hacerlo.

Veo sugerencias en loadDataWithBaseURL de WebView de que puede hacer referencia a activos locales, pero no estoy seguro de cómo utilizarlo.

Question 2

Podría usar WebView.loadDataWithBaseURL

htmlData = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />" + htmlData;
// lets assume we have /assets/style.css file
webView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);

Y solo después de eso, WebView podrá encontrar y usar archivos css desde el directorio de activos.

ps Y, sí, si carga su archivo html desde la carpeta de activos, no necesita especificar una URL base.

Question 3

Supongo que su hoja de estilo "style.css" ya se encuentra en la carpeta assets

cargue la página web con jsoup:

doc = Jsoup.connect("http://....").get();

eliminar enlaces a hojas de estilo externas:

// remove links to external style-sheets
doc.head().getElementsByTag("link").remove();

establecer enlace a la hoja de estilo local:

// set link to local stylesheet
// <link rel="stylesheet" type="text/css" href="style.css" />
doc.head().appendElement("link").attr("rel", "stylesheet").attr("type", "text/css").attr("href", "style.css");

hacer una cadena de jsoup-doc / web-page:
```
String htmldata = doc.outerHtml();
```

mostrar la página web en la vista web:

WebView webview = new WebView(this);
setContentView(webview);
webview.loadDataWithBaseURL("file:///android_asset/.", htmlData, "text/html", "UTF-8", null);

Question 4

aqui esta la solucion

Coloque su html y css en su carpeta / assets /, luego cargue el archivo html así:

    WebView wv = new WebView(this);

    wv.loadUrl("file:///android_asset/yourHtml.html");

luego en su html puede hacer referencia a su css de la manera habitual

<link rel="stylesheet" type="text/css" href="main.css" />

Question 5

Es tan simple como es:

WebView webview = (WebView) findViewById(R.id.webview);
webview.loadUrl("file:///android_asset/some.html");

Y su some.html debe contener algo como:

<link rel="stylesheet" type="text/css" href="style.css" />

Question 6

Si tiene su CSS en el almacenamiento de archivos interno, puede usar

//Get a reference to your webview
WebView web = (WebView)findViewById(R.id.webby);

// Prepare some html, it is formated with css loaded from the file style.css
String webContent = "<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><link rel=\"stylesheet\" href=\"style.css\"></head>"
                      + "<body><div class=\"running\">I am a text rendered with INDIGO</div></body></html>";

//get and format the path pointing to the internal storage
String internalFilePath = "file://" + getFilesDir().getAbsolutePath() + "/";

//load the html with the baseURL, all files relative to the baseURL will be found 
web.loadDataWithBaseURL(internalFilePath, webContent, "text/html", "UTF-8", "");

Question 7

¿Es posible tener todo el contenido renderizado en la página, en un div dado? Luego, puede restablecer el CSS en función de la identificación y trabajar desde allí.

Digamos que da su div id = "ocon"

En su css, tenga una definición como:

#ocon *{background:none;padding:0;etc,etc,}

y puede establecer valores para borrar todos los css de aplicar al contenido. Después de eso, puedes usar

#ocon ul{}

o lo que sea, más abajo en la hoja de estilo, para aplicar nuevos estilos al contenido.

Question 8

Puede usar el enlace Css en línea para establecer el estilo sobre el contenido existente.

Para eso, debe cargar datos en la vista web y habilitar el soporte de JavaScript.

Ver código a continuación:

   WebSettings webSettings=web_desc.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setDefaultTextEncodingName("utf-8");
    webSettings.setTextZoom(55);
    StringBuilder sb = new StringBuilder();
    sb.append("<HTML><HEAD><LINK href=\" http://yourStyleshitDomain.com/css/mbl-view-content.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
    sb.append(currentHomeContent.getDescription());
    sb.append("</body></HTML>");
    currentWebView.loadDataWithBaseURL("file:///android_asset/", sb.toString(), "text/html", "utf-8", null);

Aquí Use StringBuilder para agregar String for Style.

sb.append("<HTML><HEAD><LINK href=\" http://yourStyleshitDomain.com/css/mbl-view-content.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
sb.append(currentHomeContent.getDescription());