Androidでカスタムダイアログの実装【Kotlin】
はいどうも、てちこまです。お得意のさぼり癖で全く更新しない日々が続きましたが復帰です。
最近は引っ越しの準備とか卒制で忙しいんですが卒制のほうが終わりそうなのでそちらを何回かに分けて記事にしていこうと思います。
卒業制作ではダイアログを多用したのですがその中でオリジナルデザインと機能を持ったダイアログを実装したい場面がありました。
ということで今回はカスタムデザインのダイアログの実装をご紹介いたします。
動作デモ
1.デザインの準備
まずは兎にも角にもデザインです。今回はCardViewを使用して作成しました。
複雑な要素の配置はConstraintLayoutを利用するとすぐに用意できます。どんどん利用していきましょう。
2.カスタムDialogFragmentの用意
次にDialogFragment()を継承したカスタムダイアログフラグメントを作成します。
CustomDialogFragment ※一部抜粋
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
class CustomDialogFragment : DialogFragment() { override fun onCreateDialog(savedInstanceState: Bundle?): Dialog { val dialog: Dialog dialog = Dialog(context!!) val dw = dialog.window dw?.let { it.requestFeature(Window.FEATURE_NO_TITLE) it.setFlags( WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN ) it.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT)); } dialog.setContentView(R.layout.alarm_dialog) dialog.findViewById<TextView>(R.id.time_textView).text = "" dialog.findViewById<TextView>(R.id.url).setOnClickListener { //クリック時実行したい処理を記述 //動作デモではここでChromeCustomTabを開いています。 } return dialog } } |
ポイントは以下の3点です。
-
dw?.let{...}
ここの設定でWindowサイズ、タイトル、ダイアログ背景色等の設定を行います。FLAG_FULLSCREENと指定しているのは背景部分も含めての範囲のことです。ダイアログ本体部分のサイズ指定ではありません。一般的な利用ですとそのままで大丈夫です。 -
dialog.setContentView(R.layout.[上で作成したレイアウト])
オリジナルレイアウトを設定します。 -
findViewById<>()
各要素の操作が出来ます。
3.ダイアログを表示する
最後に各ActivityやFragment上にDialogを表示しましょう。
Activityで表示する場合
|
1 2 3 4 |
...任意のタイミング val dialog = CustomDialogFragment() dialog.show(getFragmentManager(),"[任意のタグ名]") ... |
Fragmentで表示する場合
|
1 2 3 4 5 6 |
...任意のタイミング val dialog = CustomDialogFragment() fragmentManager?.run{ dialog.show(this,"[任意のタグ名]") } ... |
タグ名は一意であれば何でもいいです。findFragmentByTag()メソッド識別するためのものです。
まとめ
いかがでしょうか？ご覧の通りカスタムダイアログの実装はそれほど面倒ではありません。
アプリにオリジナリティを持たせたい時や特殊な操作を行えるダイアログを作成したい時などに是非活用してください。
...と言いつつ卒制のアプリでは通常のアラートダイアログも多用しましたが。
次回はデモで表示しているChromeCustomTabsについて記事を書こうと思います。
