カテゴリー
Kotlin言語

Material の Alert Dialog

Material に用意されているアラートダイアログ(AlertDialog)を表示する関数を作成してみます


Material Alert Dialog の作成

Material Design Components 版の Alert Dialog の使い方ですね

うん、通常版の Alert Dialog とちょっと違うところがあるの

  • ダイアログは、ユーザが決定を行ったり、追加情報を入れたりすることを促す小さなウィンドウ(画面)です
  • 通常、ダイアログは画面全体を埋めるように表示されることはなく、ユーザが先に進む前に何らかのアクションを行うことを要求します
  • Android はいくつかの異なるタイプのダイアログがあります
  • ここでは、Material に用意されているアラートダイアログの使い方を説明します

Material Alert Dialog の構造

基本的な構造は通常版の Alert Dialog とおなじっぽいです

アラートダイアログ(Alert Dialog)は次の3つの部分からできています

  • タイトル(オプション)
  • メッセージ
  • テキストボタン

Material Alert Dialog を実装する

メソッドをチェインにして実装していくことができるの

  • マテリアルデザインコンポーネントの   MaterialAlertDialog を使います。Material ガイドラインに沿ったアラートダイアログをアプリに追加できます
  • ダイアログの生成や表示は、アクティビティやフラグメントが受け持ちます

Material Alert Dialog を表示する関数を作成する

関数にできちゃうんですね

  • SampleFragment の中で、showMaterialDialog() という private 関数を追加します
  • MaterialAlertDialog を生成するには、MaterialAlertDialogBuilder クラスを使います
  • このクラスを使ってダイアログのパーツをひとつひとつ構築していきます
  • フラグメントの requireContext() メソッドを渡してMaterialAlertDialogBuilder のコンストラクタ呼び出します
  • requireContext() メソッドは null でない Context を返します
private fun showMaterialDialog() {
   MaterialAlertDialogBuilder(requireContext())
}
  • Context には Android システムによって設定されたアクティビティ、フラグメント、アプリケーションに関する様々な情報が含まれています
  • 通常、リソース、データベース、あるいは他のシステムサービスへアクセスするのに使われます
  • ここでは、アラートダイアログを生成するのにフラグメントコンテキストを渡しています

Android Studio の自動インポートは有効にしておくといいかも

Android Studio の自動インポートが有効でない場合は、次のようにして MaterialAlertDialogBuilder をインポートしておきます

import com.google.android.material.dialog.MaterialAlertDialogBuilder

タイトルを追加する

通常の Alert Dialog と同じですね

  • アラートダイアログにタイトルを設定するためのコードを追加します
  • strings.xml に設定した文字列リソースを使います
MaterialAlertDialogBuilder(requireContext())
   .setTitle(getString(R.string.mytitle))

メッセージを追加する

こっちも見覚えあるかも

  • メッセージを設定します
  • 文字列リソース中のプレースホルダには ViewModel のプロパティ sample(viewModel.sample)を代入します
   .setMessage(getString(R.string.mymessage, viewModel.sample))

キャンセルできないように設定する

Android には BACK, HOME, MENU の3つのボタンが必ずあるの

BACK ボタンをタップしたときにアラートダイアログがキャンセルできないようにするには、setCancelable() メソッドに false を渡して利用します

    .setCancelable(false)

ボタンを追加する

これも通常の Alert Dialog と同じっぽい

ラムダ式で、使わないパラメータはアンダースコア(_)にしちゃいましょうね

  • EXIT と PLAY AGAIN の2つのボタンを、setNegativeButton() メソッドと setPositiveButton() メソッドを使って追加します
  • exitGame() と restartGame() を、それぞれラムダ式から呼び出します
    .setNegativeButton(getString(R.string.exit)) { _, _ ->
        exitGame()
    }
    .setPositiveButton(getString(R.string.play_again)) { _, _ ->
        restartGame()
    }
  • これは次の文を簡略化して表記したものです
setNegativeButton(getString(R.string.exit), { _, _ -> exitGame()})
  • setNegativeButton() メソッドは2つのパラメータをとっています
  • ひとつは String型、もう一つは関数 DialogInterface.OnClickListener() で、これはラムダ式で表現されています
  • 渡されている最後の引数が関数であるとき、ラムダ式を括弧の外側に置くことができます
  • これは trailing lambda syntax(後置ラムダ構文)と呼ばれます
  • コードの書き方の2つの方法(ラムダ式を括弧の内側に入れるか、外側にするか)はどちらを使っても構いません
  • setPositiveButton 関数についても同様です

ダイアログを生成する

最後に show() を加えて、アラートダイアログを生成、表示します

      .show()

これで完成ですね、おつかれさまでした

まとめ

作成した showMaterialDialog() メソッドをまとめると次のようになります

private fun showMaterialDialog() {
   MaterialAlertDialogBuilder(requireContext())
       .setTitle(getString(R.string.mytitle))
       .setMessage(getString(R.string.mymessage, viewModel.sample))
       .setCancelable(false)
       .setNegativeButton(getString(R.string.exit)) { _, _ ->
           exitGame()
       }
       .setPositiveButton(getString(R.string.play_again)) { _, _ ->
           restartGame()
       }
       .show()
}