Androidでカスタムダイアログの実装【Kotlin】

はいどうも、てちこまです。お得意のさぼり癖で全く更新しない日々が続きましたが復帰です。
最近は引っ越しの準備とか卒制で忙しいんですが卒制のほうが終わりそうなのでそちらを何回かに分けて記事にしていこうと思います。

卒業制作ではダイアログを多用したのですがその中でオリジナルデザインと機能を持ったダイアログを実装したい場面がありました。

ということで今回はカスタムデザインのダイアログの実装をご紹介いたします。

動作デモ

ダイアログ動作デモ

1.デザインの準備

まずは兎にも角にもデザインです。今回はCardViewを使用して作成しました。
複雑な要素の配置はConstraintLayoutを利用するとすぐに用意できます。どんどん利用していきましょう。
ダイアログデザインイメージ図

2.カスタムDialogFragmentの用意

次にDialogFragment()を継承したカスタムダイアログフラグメントを作成します。

CustomDialogFragment ※一部抜粋

ポイントは以下の3点です。

  1. dw?.let{...}
    ここの設定でWindowサイズ、タイトル、ダイアログ背景色等の設定を行います。FLAG_FULLSCREENと指定しているのは背景部分も含めての範囲のことです。ダイアログ本体部分のサイズ指定ではありません。一般的な利用ですとそのままで大丈夫です。

  2. dialog.setContentView(R.layout.[上で作成したレイアウト])
    オリジナルレイアウトを設定します。

  3. findViewById<>()
    各要素の操作が出来ます。

3.ダイアログを表示する

最後に各ActivityやFragment上にDialogを表示しましょう。

Activityで表示する場合

Fragmentで表示する場合

タグ名は一意であれば何でもいいです。findFragmentByTag()メソッド識別するためのものです。

まとめ

いかがでしょうか?ご覧の通りカスタムダイアログの実装はそれほど面倒ではありません。
アプリにオリジナリティを持たせたい時や特殊な操作を行えるダイアログを作成したい時などに是非活用してください。
...と言いつつ卒制のアプリでは通常のアラートダイアログも多用しましたが。
次回はデモで表示しているChromeCustomTabsについて記事を書こうと思います。

てちこま

高卒後3年ニート。 起死回生でコン専入学。 資格とったり、アプリ作ったりしてました。 2020から新米WEBエンジニアになりました。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントする