［Jetpack Compose］WebViewで開いたページのタイトルを表示する

はじめに

AndroidアプリでWebViewを使ったアプリを実装していると、TopBarにタイトルを表示したい、要望が出てくることがあります。このような要望が出てきたときにJetpack Composeでどのようにすれば実現できるのか調べたので、以下にサンプルを記載します。

仕様

今回作成したサンプルアプリの仕様を以下にまとめます。

• アプリが起動したら特定のページをWebViewに表示する
• WebViewに表示したページのタイトルをTopBarに表示する

準備

Accompanist WebViewのセットアップする

Jetpack ComposeでWebViewを使うときはAccompanistのWebViewを利用するのがベターなようでした。なので今回はAccompanistのWebViewの依存関係をbuild.graldeに追加して使っていきます。

dependencies {
    implementation "com.google.accompanist:accompanist-webview:0.28.0"
    ︙ 省略
}

実装

class MainActivity : ComponentActivity() {
    object Urls {
        val home = "https://m.yahoo.co.jp/"
    }

    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // ① アプリが表示されたら、Yahoo Japanのページを表示するようにしておく
            val webViewState = rememberWebViewState(url = "https://m.yahoo.co.jp/")
            
            // ② 表示されたページのタイトルをAccompanistWebChromeClient.onReceivedTitleで取得して保持する
            var webPageTitle by remember { mutableStateOf("") }
            val chromeClient = object : AccompanistWebChromeClient() {
                override fun onReceivedTitle(view: WebView?, title: String?) {
                    webPageTitle = title ?: ""
                    super.onReceivedTitle(view, title)
                }
            }

            // ③ TopBarとWebViewをScaffoldに配置して、タイトルとページを見られるようにする
            Scaffold(
                topBar = {
                    TopAppBar(
                        title = {
                            Text(
                                text = webPageTitle,
                                maxLines = 1,
                                overflow = TextOverflow.Ellipsis
                            )
                        }
                    )
                },
                content = {
                    WebView(
                        state = webViewState,
                        chromeClient = chromeClient,
                        modifier = Modifier.padding(it)
                    )
                }
            )
        }
    }
}

動作確認

このような実装をしてアプリが起動すると、起動時には初期表示のページのタイトルが表示され、別ページに遷移すると別ページのタイトルが表示されます。

今回作ったアプリのソースコード

今回作ったアプリのソースコードは以下にありますので、興味ある方は見てみてください。

https://github.com/kaleidot725-android/compose-accompanist-webview/tree/main/samples/title