SwiftUI でのモーダル表示#

さて、当ブログでは今まで SwiftUI でモーダル表示を実行する場合の方法について色々解説してきました。

で、よくある方法としてUIViewControllerRepresentableを使ってサイズが 0 の View でオーバーレイするみたいな記事があったりなかったりするのですが、結論として言えばこれはバグを生みやすいので避けたほうが良いという結論です。

自作モディファイアが求められた理由#

個人的に自作モディファイアが求められたのは以下の理由によります。

デモアプリ#

SwiftUI の標準機能だけでモーダルとフルスクリーンを実装すると以下のような感じになります。

モーダルは引っ張って閉じることができるのでdismissは不要ですが、フルスクリーンは閉じることができないのでdismissを実装しておく必要があります。

import SwiftUI

/// コンテンツビュー
struct ContentView: View {
    var body: some View {
        List(content: {
            SheetButton()
            FullScreenButton()
        })
    }
}

/// モーダル表示用のボタン
struct SheetButton: View {
    @State private var isPresented: Bool = false

    var body: some View {
        Button(action: {
            isPresented.toggle()
        }, label: {
            Text("Sheet")
        })
        .sheet(isPresented: $isPresented, content: {
            ModalView()
        })
    }
}

/// フルスクリーン表示用のボタン
struct FullScreenButton: View {
    @State private var isPresented: Bool = false

    var body: some View {
        Button(action: {
            isPresented.toggle()
        }, label: {
            Text("FullScreen")
        })
        .fullScreenCover(isPresented: $isPresented, content: {
            ModalView()
        })
    }
}

/// 表示されるモーダル
struct ModalView: View {
    @Environment(\.dismiss) var dismiss

    var body: some View {
        GroupBox(content: {
            Button(action: {
                dismiss()
            }, label: {
                Text("Close")
            })
        })
    }
}

import SwiftUI
import Introspect

/// モーダル表示用のボタン
struct SheetButton: View {
    @State private var isPresented: Bool = false

    var body: some View {
        Button(action: {
            isPresented.toggle()
        }, label: {
            Text("Sheet")
        })
        .sheet(isPresented: $isPresented, content: {
            ModalView()
              .introspectViewController(customize: { controller in
                    /// UIHostingController
                    /// 引っ張って閉じれないようにする
                    controller.isModalInPresentation = true
                    /// 背景色を透明にする
                    controller.view.backgroundColor = .clear
                })
        })
    }
}

UIApplication を利用してモディファイアを作成する#

いろいろ考えたのだが、結局この方法しか思いつかなかった。ただ、これはサイズが 0 の View を利用しないので初期化が何度もされてしまうという問題は発生しない（と思われる）

extension UIApplication {
    @available(iOS 15.0, *)
    var keyWindow: UIWindow? {
        return self.connectedScenes
            .compactMap({ $0 as? UIWindowScene })
            .first(where: { $0.activationState == .foregroundActive })?
            .windows
            .first(where: { $0.isKeyWindow })
    }

    @available(iOS 15.0, *)
    var rootViewController: UIViewController? {
        return self.keyWindow?.rootViewController
    }

    @available(iOS 15.0, *)
    public var presentedViewController: UIViewController? {
        keyWindow?.makeKeyAndVisible()

        guard let rootViewController = keyWindow?.rootViewController
        else {
            return nil
        }

        var presentedViewController: UIViewController? = rootViewController
        while let controller: UIViewController = presentedViewController?.presentedViewController {
            presentedViewController = controller
        }
        return presentedViewController
    }
}

まず最初に、最も全面に表示されているの UIViewController を取得するコードを書く。このあたりは iOS13 と iOS15 で非推奨になったコードが含まれるので上のように警告を回避しつつkeyWindowを取得するように変更する。

ルートから順に下っていって、それ以上子を持たない UIViewController を返すわけである。

extension View {
    func fullScreen<Content: View>(
        isPresented: Binding<Bool>,
        modalPresentationStyle: UIModalPresentationStyle = .fullScreen,
        modalTransitionStyle: UIModalTransitionStyle = .coverVertical,
        isModalInPresentation: Bool = false,
        @ViewBuilder content: @escaping () -> Content
    ) -> some View {
        if isPresented.wrappedValue {
            let controller: UIHostingController = UIHostingController(rootView: content())
            controller.modalPresentationStyle = modalPresentationStyle
            controller.modalTransitionStyle = modalTransitionStyle
            controller.isModalInPresentation = isModalInPresentation
            UIApplication.shared.presentedViewController?.present(controller, animated: true, completion: {
                DispatchQueue.main.async(execute: {
                    isPresented.wrappedValue.toggle()
                })
            })
        }
        return self
    }
}

で、次に上のような View に対する拡張メソッドを書く。ぶっちゃけると、なんでcompletionの中でisPresented.wrappedValue.toggle()を呼んでいるのかわからないのだが、これをしないと閉じたときに値が逆になっているのでボタンを押しても一回無反応というよくわからないことが起きます。

参考にしたコードだと 0.1 秒後にトグルを切り替えるという謎なコードになっていたので、とりあえず普通に表示完了後に切り替えるようにしました。こっちのほうが確実のはず、多分。

これを動かすとたしかにモーダルが自在に表示できて、バグも少なさそうなコードになりました。