SwiftUI 半分サイズのモーダルシート PartialSheet

iOSのアプリでよく見かける画面サイズの半分ぐらいで下から出てくるモーダルシートですが、SwiftUIでどのように実装するのか標準のsheetでは思った挙動ではないようなので、調べてみるとPartialSheetを使うと実現できました。

PartialSheetは下のURL(GitHub)です。

https://github.com/AndreaMiotto/PartialSheet

XcodeのAccounts画面でGitHub登録し、メニュー［File｜Swift Packages｜Add Package Dependency…］を選択しダイアログからPartialSheetを使いたいProjectを選びます。

［Choose Package Repository］画面検索用フィールドに「PartialSheet」と入力します。

［Next］ボタンを押すとProjectに追加されます。

ソースコードに「import PartialSheet」すると使うことができます。@EnvironmentObjectに PartialSheetManagerを設定しないといけない。

@EnvironmentObject var partialSheetManager: PartialSheetManager

半モーダルシートはどこかのActionで下記のように記述します。

self.partialSheetManager.showPartialSheet(content: {
	VStack {
		Text("")
	}.frame(height: 120)
})

PartialSheetは、NavigationViewの中でないと思ったような動きをしてくれませんでした。

NavigationView{
}.addPartialSheet()

NavigationViewに.addPartialSheet()を設定します。ためしたコード全体は下記のような感じです。

import PartialSheet

class TComponent : ObservableObject {
    @Published var textValue : String = "Show HalfSheet"
    static func resourcesLoadImage(name: String) -> CGImage {
        guard
            let url = Bundle.main.url(forResource: name, withExtension: "png"),
            let imageSource = CGImageSourceCreateWithURL(url as NSURL, nil),
            let image = CGImageSourceCreateImageAtIndex(imageSource, 0, nil)
        else {
            fatalError("Couldn't load image \(name) .")
        }
        return image
    }
}

struct HalfSheet: View {
    @EnvironmentObject var Component1: TComponent
    @EnvironmentObject var partialSheetManager: PartialSheetManager

    var body: some View {
        NavigationView{
            VStack {
                Text(self.Component1.textValue)
                Button("初代", action: {
                    self.Component1.textValue = "初代"
                    self.partialSheetManager.showPartialSheet(content: {
                        VStack {
                            Image(TComponent.resourcesLoadImage(name: "shodai"), scale: 3, label: Text("") ).clipShape(Circle())
                                .overlay(Circle().stroke(Color.red, lineWidth: 4))
                            Text("ウルトラマン")
                        }.frame(height: 120)
                    })
                })
                Button("帰ってきた", action: {
                    self.Component1.textValue = "ジャック"
                    self.partialSheetManager.showPartialSheet(content: {
                        VStack {
                            Image(TComponent.resourcesLoadImage(name: "shinman"), scale: 2, label: Text("") ).clipShape(Circle())
                                .overlay(Circle().stroke(Color.blue, lineWidth: 4))
                            Text("ジャック")
                        }.frame(height: 200)
                    })
                })
            }
        }.addPartialSheet()
    }
}

上記コードでは、2つshowPartialSheet()を作っています。Imageは少し面倒なコードを書いていますがResourcesディレクトリにPNGファイルを入れていたためです。

Assets.xcassetsに画像を入れた場合は、Image(“shodai”)でOKです。

struct HalfSheet_Previews: PreviewProvider {
    static var previews: some View {
        HalfSheet().environmentObject(TComponent()).environmentObject(PartialSheetManager())
    }
}

Viewを使う場合.environmentObject()を2つ設定すればうまく動きました。