自作レイアウトをDialog表示する方法【Androidアプリ開発】

自作レイアウトをDialog表示する方法を説明しています。

簡単な警告メッセージはもちろん、テキスト等を配置して元の画面に反映することも可能です。

実装に必要なファイル

Dialogの実装にあたり、以下のファイルが必要となります。

  • DialogFragmentクラス
    ダイアログを管理するクラス
  • ダイアログのレイアウトファイル
    ダイアログに表示するレイアウト

実装例

レイアウト

activity_main.xml

メインアクティビティのレイアウトです。

ボタンを押すとダイアログを表示します。

メインレイアウト

dialog.xml

ダイアログのレイアウトです。

OKボタンを押すと、特定の文字列をメインアクティビティへ表示するようにします。

ダイアログレイアウト

実装方法

SampleDialogFragment.kt

DialogFragmentを継承したクラスを作成して、onCreateDialogをoverrideします。

DialogBuilderにダイアログレイアウトのviewをセット→ダイアログを作成”の流れです。また、setPositiveButtonとsetNegativeButtonでボタンの処理を記述することも可能です。

示している例では、OKボタンとCANCELボタンとして、それぞれ以下のような処理を行うようにしています。

  • OKボタン
    メインアクティビティのメソッドを呼び出して、元の画面に”Dialog OKButton!!”と表示する。
  • CANCELボタン
    ダイアログを閉じる。
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
    return activity?.let {
        val builder = AlertDialog.Builder(it)

        //Dialogレイアウトにviewを取得
        val inflater = requireActivity().layoutInflater;
        val root = inflater.inflate(R.layout.dialog, null)

        //DialogBuilderにdialogのviewをセット
        builder.setView(root)
                //OKボタン
                .setPositiveButton("OK",
                        DialogInterface.OnClickListener { dialog, id ->
                            val mainActivity: MainActivity = activity as MainActivity
                            mainActivity.updateFromDialog("Dialog OKButton!!")

                        })
                //cancelボタン
                .setNegativeButton("CANCEL",
                        DialogInterface.OnClickListener { dialog, id ->
                            //dialogを閉じる
                            dialog.cancel()
                        })
        builder.create()
    } ?: throw IllegalStateException("Activity cannot be null")
}

ダイアログを閉じるときは、onCancelもしくは、onDismissが実行されます。これらをoverrideして実装すれば、ダイアログを閉じるときの後処理を行うことが可能です。onCancel、onDismissはどちらもダイアログを閉じることに変わりありませんが、実行されるタイミングが違います

  • onCancel
    cancelが実行されたとき、Backボタンやダイアログの外側を押されたとき
  • onDismiss
    ダイアログが閉じられるとき

よって、両方が実行される場合もあり、そのときは”onCancel→onDismiss”の順に実行されます。ですので、どのようにダイアログを閉じたら、何を行うか、といったことを考慮して実装していく必要があります

また、これらを実装する例は以下の通りです。

override fun onCancel(dialog: DialogInterface) {
super.onCancel(dialog)
val mainActivity: MainActivity = activity as MainActivity
mainActivity.updateFromDialog("Dialog CancelListener!!")
}

override fun onDismiss(dialog: DialogInterface) {
super.onDismiss(dialog)
val mainActivity: MainActivity = activity as MainActivity
mainActivity.updateFromDialog("Dialog DismissListener!!")
}

MainActivity.kt

dialogの表示はDialogFragmentにより行います

使い方は簡単で、DialogFragmentを継承したクラス(SampleDialogFragment)のインスタンスを生成して、showメソッドを呼び出すだけです。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val button: Button = findViewById(R.id.button)

    //dialog管理クラスのインスタンス生成
    val dialogFragment = SampleDialogFragment()
    button.setOnClickListener {
        //ダイアログを表示する
        dialogFragment.show(supportFragmentManager, "dialog")
    }
}

ダイアログから画面を更新する場合は、以下のようにpublicメソッドを作成して、ダイアログ側で呼び出せば可能です。

fun updateFromDialog(str: String) {
val textView: TextView = findViewById(R.id.textView)
textView.text = str
}

実行結果

アプリ起動時
アプリ起動時
ダイアログ表示時
ダイアログ表示時
CANCELボタン押した時

ダイアログが閉じるだけで表示に変わりはありません。

Backボタンやダイアログの外を押したときも同様です。

CANCELボタン押したとき
OKボタン押した時

テキストの表示内容が変わっていることが確認できます。

OKボタン押したとき

まとめ

自作レイアウトをDialog表示する方法を説明しました。

ダイアログのレイアウトファイルを作成すれば、自作したレイアウトでの表示も可能となります。また、ダイアログ側から表示元の画面を更新することも可能です。

気を付けることは、ダイアログを閉じるときの動作です。onCancel、onDismissにより、閉じるときの処理を記述することが可能ですが、実行されるタイミングが違います。

  • onCancel
    cancelが実行されたとき、Backボタンやダイアログの外側を押されたとき
  • onDismiss
    ダイアログが閉じられるとき

よって、両方が実行される場合もあり、そのときは”onCancel→onDismiss”の順に実行されます。ですので、どのようにダイアログを閉じたら、何を行うか、といったことを考慮して実装していく必要があります

参考

ダイアログ|Android Developers

Androidアプリ開発
この記事を書いた人

エンジニアとして仕事をしています。
仕事や趣味を通して、開発やプログラミングについて学んだことを綴っていきます。
 ・実務経験は、WEBシステムのサーバーサイドコーディングがメイン
 ・アプリ開発は趣味程度

akihiro-takedaをフォローする
akihiro-takedaをフォローする
プログラミング・開発の備忘録
タイトルとURLをコピーしました