🐻❄️
［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)
)
}
)
}
}
}
動作確認
このような実装をしてアプリが起動すると、起動時には初期表示のページのタイトルが表示され、別ページに遷移すると別ページのタイトルが表示されます。
今回作ったアプリのソースコード
今回作ったアプリのソースコードは以下にありますので、興味ある方は見てみてください。
Discussion