【SwiftUI】 Manage Custom Dialogs
Goal
- カスタムViewを作成しそれをダイアログとして表示する
- 複数のダイアログを表示できるようにする
Background
SwiftUIではAlertを利用することで標準のアラートを表示することができます。
しかし、UIKitを用いて開発していたときのように独自のViewをダイアログとして表示したいことがあります。
また、1つの画面で複数パターンのダイアログを表示することもあるでしょう。
そのような要件を満たすものを紹介します。
Demo
今回作成するものは次のようになります。
全体のコードは最後にありますので参考にして下さい。
Content Pattern
まず、カスタムダイアログViewを作成します。
（後でダイアログの背景を透過する処理を共通で入れるので、その部分は不要です）
Viewを継承したパーツです。
そしてこれらをまとめたEnumを作成します。
こうすることでアプリ内でカスタムダイアログを利用するケースを一覧で見られるようになり、また特定のケースでViewを差し替えることも容易です。
（caseの命名がcontentDetail01のようになっていますが、実際にはより詳細な命名が良いと思います。簡単化のためにそうしています。）
Manage Dialog Presentation
次にダイアログの表示を制御するクラスを作成します。
- 表示フラグの更新
- 表示するコンテンツの設定
を担います。
ダイアログを表示するViewからはshowメソッドを利用して任意のコンテンツを表示します。
Custom Dialog Modifier
カスタムダイアログをViewModifierを経由して表示します。
これはこちらの記事: Custom View Dialog in SwiftUI | Swift UI recipesを参考にしています。
-
ViewModifiewで元のコンテンツの上にカスタムダイアログを表示する - 画面全体を覆う、黒の透過色を配置することでダイアログ風のUIにする
というのが主な点です。
Set Up
以上で要素が揃いました。
Viewでダイアログを表示してみましょう。
ViewではDialogPresentationを保持します。
dialogPresentataion.show(
content: .contentDetail01(isPresented: $dialogPresentataion.isPresented))
のようにしてダイアログを表示します。
ダイアログ側で閉じるボタンを押した時にフラグを更新するので、isPresentedを渡しています。
Summary
ダイアログ表示の責務を持つ管理クラスを作成することで、ダイアログを表示する際の処理を隠蔽し、また複数の表示パターンに対応することができました。
より良い方法、問題点等ありましたら気軽にコメント頂けると幸いです。
コード全体はこちら