WebView の HTML コンテンツにカスタム CSS を適用するにはどうすればよいですか?

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

外部 HTML コンテンツのレンダリングに依存するアプリケーションを開発する場合、最適なユーザー エクスペリエンスを実現するためにコンテンツのスタイルを設定しますが重要になります。この質問では、WebView 内の HTML コンテンツにカスタム CSS スタイルを適用するためのオプションを検討し、インライン スタイル インジェクションとアセットベースの CSS 参照の両方を調べます。

InlineData Injection vs. Asset CSS File

処理中に HTML に CSS を挿入するか、アセット CSS ファイルを使用するかの決定は、ユーザーの特定の要件によって異なります。 アプリ。 CSS スタイルが比較的単純で、頻繁に変更されない場合は、インライン インジェクションが適切なオプションとなり、外部アセット管理の複雑さが軽減されます。

一方、CSS がより複雑であるか、頻繁な更新が必要な場合は、 、アセット CSS ファイルを参照すると、懸念事項がより明確に分離され、一元的なスタイル管理が可能になります。

アセット CSS の参照ファイル

アプリのアセットから HTML コンテンツに CSS ファイルを追加するには、WebView.loadDataWithBaseURL メソッドを使用できます。

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

ベース URL を「file」に設定することで、 :///android_asset/"、WebView はアプリのアセット内のファイルにアクセスできます

補足

Assets フォルダーから HTML ファイルを読み込む場合は、ベース URL を指定する必要はありません。これにより、WebView の HTML コンテンツにカスタム CSS スタイルを適用するプロセスが簡素化されます。

以上がWebView の HTML コンテンツにカスタム CSS を適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。