🌟

JetpackComposeでWebViewを使う方法

1 min read

ComposeでのWebView

早速ですがComposeではWebView自体はサポートされていません(え???)

ですがComposeには従来のView機能をサポートする仕組みがあります。

https://developer.android.com/jetpack/compose/interop/interop-apis?hl=ja#views-in-compose

こちらのAndroidViewですね。

WebView Widget

val url = "https://hogehoge.com"

@Composable
fun WebViewWidget(
    url: String
) {
    AndroidView(
        factory = {
            WebView(it)
        },
	update = { webView ->
            webView.webViewClient = WebViewClient()
            webView.loadUrl(url)
        }
    )
}

WebViewをComposeで使用するための簡単なwidget

簡単に説明すると、

factoryで生成したWebViewをupdateで描画するというような感じ。

なのでもうちょっとカスタムしたい場合などはupdate部に色々書く。

update = { webView ->
            webView.apply {
                scrollBarStyle = WebView.SCROLLBARS_OUTSIDE_OVERLAY
                isScrollbarFadingEnabled = false
                webViewClient = WebViewClient()
            }
            webView.loadUrl(url)
        }

というような感じにすると、

スクロールバーを常に表示したWebViewにできる。

参考記事

https://developer.android.com/jetpack/compose/interop/interop-apis?hl=ja#views-in-compose

https://kaleidot.net/jetpack-compose-の-androidview-で-webview-を利用する-b3cdb3efa69e

https://qiita.com/yasukotelin/items/f14def46e25e8c3f9888

Discussion

ログインするとコメントできます