カスタムCSSを使用したWebViewでのHTMLのレンダリング

Question 1

私のアプリはJSoupを使用してメッセージボードページのHTMLをダウンロードしています（この場合、特定のスレッドの投稿を含むページであるとしましょう）。このHTMLを取得し、不要なアイテムを取り除き、カスタムCSSを適用して、WebViewで「モバイル」になるようにスタイルを設定したいと思います。

処理中にスタイルをHTMLに挿入する必要がありますか（とにかく処理するため）、CSSファイルをアプリのアセットに追加して単に参照する良い方法がありますか？後者が理想的だと思いますが、どうすればよいかわかりません。

WebViewのloadDataWithBaseURLに、ローカルアセットを参照できるというヒントがありますが、その使用方法がわかりません。

Question 2

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);

その後、WebViewはアセットディレクトリからcssファイルを見つけて使用できるようになります。

psそして、はい、アセットフォルダからhtmlファイルをロードする場合、ベースURLを指定する必要はありません。

Question 3

あなたのスタイルシート「style.css」はすでにassets-folderにあると思います

jsoupを使用してWebページをロードします。
```
doc = Jsoup.connect("http://....").get();
```

外部スタイルシートへのリンクを削除します。

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

ローカルスタイルシートへのリンクを設定します。

// 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");

jsoup-doc / web-pageから文字列を作成します。
```
String htmldata = doc.outerHtml();
```

WebビューでWebページを表示する：

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

Question 4

これが解決策です

htmlとcssを/ assets /フォルダーに置き、次のようにhtmlファイルをロードします。

    WebView wv = new WebView(this);

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

次に、HTMLで通常の方法でCSSを参照できます

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

Question 5

それは次のように簡単です：

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

そして、some.htmlには次のようなものが含まれている必要があります。

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

Question 6

内部ファイルストレージにCSSがある場合は、次を使用できます。

//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

特定のdivで、すべてのコンテンツをページ内にレンダリングすることは可能ですか？次に、IDに基づいてCSSをリセットし、そこから作業することができます。

div id = "ocon"を指定するとします

あなたのcssで、次のような定義を持っています：

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

また、値を設定して、すべてのcssがコンテンツに適用されないようにすることができます。その後、あなたはただ使うことができます

#ocon ul{}

または、スタイルシートのさらに下にあるものを使用して、コンテンツに新しいスタイルを適用します。

Question 8

オンラインCssリンクを使用して、既存のコンテンツにスタイルを設定できます。

そのためには、webviewにデータをロードし、JavaScriptサポートを有効にする必要があります。

以下のコードを参照してください。

   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);

ここでは、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());