SwiftUIにおけるPresenting Additional Views の基本

Presenting Additional ViewsとはApple公式で提供されているSwiftUIにおける基本Viewへの追加Viewです。
よくモーダルなどと表現されるものです。
今までのUIKitでは、addSubViewやpresentなどを駆使して表示されていた追加Viewはここに集約されていくと思い、調べて見ました。

SwiftUI - view

Twiiterの投稿ボタンをタップし、表示される投稿画面などが主な使われ方かなと思います。

また、@H_Crane さんの書いてるSwiftUIのチートシートに刺激を受けて、まとめてみました。

動作環境

• Xcode 11.2.1
• macOS Catalina ver 10.15.2

4種類のPresenting Additional Views

公式で提供されているPresenting Additional Viewsは4種類あります。順を追って見ていきましょう

• Sheet
• ActionSheet
• Alert
• Popover

Sheet

Sheetは基本的なPresenting Additional Viewの基本の中でもっともカスタムで可能なViewです。
下記、SwiftUIでButtonを押した時に表示される例です。
Text("This is Sheet.")と言う箇所がViewのカスタム内容となっており、こちらの中に他で定義したViewクラスを呼び出すことも可能です。

    Button(action: {
        self.showSheet.toggle()
    }, label: {
        Text("AddSheet")
    }).sheet(isPresented: self.$showSheet, content: {
        Text("This is Sheet.")
    })

Sheet公式

ActionSheet

ActionSheetはユーザーに選択肢から選ばせるViewです。
UIKitではUIAlertController で実現していたものですね。
UIAlertControllerとほぼ動作が変わらないので同じノリで利用できそうです。

    Button(action: {
        self.showActionSheet.toggle()
    }, label: {
        Text("AddActionSheet")
    }).actionSheet(isPresented: self.$showActionSheet, content: {
        ActionSheet(title: Text("Action"),
            message: Text("Description"),
            buttons: [
                .default(Text("OK"), action: {

                }),
                .destructive(Text("Delete"), action: {

                })
            ]
        )
    })

ActionSheet公式

Alert

Alertはユーザーへメッセージを通知するViewです。
UIKitではUIAlertController で実現していたものですね。
こちらもActionSheetと同じように UIAlertControllerとほぼ動作が変わらないので同じノリで利用できそうです。

    Button(action: {
        self.showAlert.toggle()
    }, label: {
        Text("AddAlert")
    }).alert(isPresented: self.$showAlert, content: {
        Alert(title: Text("Error"), message: Text("Error Reason"), dismissButton: .default(Text("OK")))
    })

Alert公式

Popover

PopoverはSheetと同じようにカスタムができるViewなのですが、違いがわからず、実行して触って見ても下記のような不明な動作をしました。

    Button(action: {
        self.showPopOver.toggle()
    }, label: {
        Text("AddPopOver")
    }).popover(isPresented: self.$showPopOver, attachmentAnchor: .rect(.bounds), arrowEdge: .leading, content: {
        Text("This is PopOver.")
    })

一体、何のためのViewなのだろうとデザインガイドラインを調べたところ下記のような表記がありました。

Avoid displaying popovers on iPhones. Generally, popovers should be reserved for use in iPad apps. In iPhone apps, utilize all available screen space by presenting information in a full-screen modal view, rather than in a popover. For related guidance, see Modality.

つまりiPadやMacのViewということですね。Sheetを使いましょう。

デザインガイドライン - popover

まとめ

• カスタムはSheet/選択させたい場合はAction/メッセージはAlertを利用する
• PopoverはiPhone開発では利用しない

今回のサンプルコードを下記に置きました。今後も調べた内容を試していくので、スターなどいただけるとありがたいです⭐️

SampleViewSwiftUI