はじめに
Androidアプリの画面は、主にXMLやJetpack Composeによって構築されますが、HTMLファイルを画面として表示させることも可能です。
そのため、HTML画面の表示とボタンタップ処理の制御方法を、本記事に備忘として記載してみました。
やりたいこと
実装する処理の順序は以下です。
1. HTML画面のボタンタップでURLスキームが発火される
2. 発火されたスキームをアプリで検知してダイアログを表示する
使用するHTMLファイルはアプリ内に配置します。
以降、ローカルHTMLと記載します。
URLスキームとは
URLの先頭の箇所。（http://xxxxxx.comでいうとhttpの部分）
別アプリに値を渡し、渡した値を元に別アプリ上で処理を実施することが可能。
ここからは処理順にコードと説明を記載していきます。
実装
1. HTML画面のボタンタップでURLスキームが発火される
まずは画面として使用するHTMLとCSSのファイルをそれぞれ用意します。
<html>
<link rel="stylesheet" href="sample_css.css">
<body>
<h1 class=sampleTitle>HTML画面</h1>
<br/>
<a class=sampleButton type="button" href="event://start_scheme/">Start Scheme</a>
</body>
</html>
.sampleTitle{
margin: auto;
text-align:center;
}
.sampleButton {
display: block;
margin: auto;
text-align: center;
width: 100px;
border: 0;
border-radius: 5px;
background: #4676D7;
color: #fff;
padding: 10px 20px;
font-size: 16px;
text-decoration: none;
}
HTMLに<a>タグがありますが、こちらがダイアログ表示させるボタンとなります。このhrefに今回使用するURLスキームを記載します。（event://~）
ボタンタップすると、このURLスキームが発火され、アプリ上で検知されます。
<a class=sampleButton type="button" href="event://start_scheme/">Start Scheme</a>
作成したHTML・CSSファイルは、app/src/main直下にassetsフォルダを作成し、その配下に設置します。
2. 発火されたスキームをアプリで検知してダイアログを表示する
作成したHTML画面をアプリで表示させるための処理を、XMLおよびActivityに追記していきます。
<WebView
android:id="@+id/webViewTest"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// activity_main.xmlのWebViewに記載したidを指定
val webView: WebView = findViewById(R.id.webViewTest)
// WebViewClientを設定
val customWebViewClient = SampleWebViewClient(this)
webView.webViewClient = customWebViewClient
// assets配下に設置したHTMLの読み込み
webView.loadUrl("file:///android_asset/sample_html_view.html")
}
}
loadUrlでHTMLを読み込み表示させます。android_assetとパスに記載することで、作成したassetsフォルダ配下のファイルが読み込まれます。
webView.loadUrl("file:///android_asset/sample_html_view.html")
次にMainActivityで設定するWebViewClientクラスを作成します。
class SampleWebViewClient(private val activity: Activity) : WebViewClient() {
override fun shouldOverrideUrlLoading(view: WebView, request: WebResourceRequest): Boolean {
val url = request.url.toString()
// URLスキームを検知して、ダイアログ表示を実施
if (url == "event://start_scheme/") {
Log.d("MyApp", "スキーム発火");
showDialog(activity)
return true
}
return false
}
// ダイアログ表示処理
private fun showDialog(context: Context) {
AlertDialog.Builder(context)
.setTitle("スキーム発火テスト")
.setMessage("スキーム発火されました。")
.setPositiveButton("OK") { dialog, _ ->
dialog.dismiss()
}
.show()
}
}
WebViewのURLスキーム発火時のダイアログ表示処理をshouldOverrideUrlLoadingの↓で制御します。
// URLスキームを検知して、ダイアログ表示を実施
if (url == "event://start_scheme/") {
Log.d("MyApp", "スキーム発火");
showDialog(activity)
return true
}
注意
shouldOverrideUrlLoadingでは、そのままだとURL読み込みが継続して読み込み失敗画面が表示されるため、trueをreturnして防止させる必要があります。
動作確認
以下、アプリの動作確認の画面です。
通常時
ボタンタップ時
所感
応用すれば、ローカルHTMLからのイベントで、カメラ起動などの端末機能を制御できそう。
いずれ、その辺りも確かめてみたいですね🤔
参考
今回参考にした記事は以下。
Android FragmentにローカルHTMLファイルからWebViewを表示（Kotlin）
Android WebViewのリンクのクリックをアプリケーション側で検出する
Android FragmentにローカルHTMLファイルからWebViewを表示（Kotlin）
勝手ながら参考にさせていただきました。
ありがとうございました🙇♂️