カテゴリー: Swift

SwiftUIでURLを指定してiOSのSafariブラウザを開く

if let url = URL(string: "https://mjeld.com/") {
	UIApplication.shared.open(url, options: [.universalLinksOnly: false], completionHandler: {completed in
		print(completed)
	})
}

上記のコードは、options, completionHandlerを付けていますが下のようなシンプルな方法でもOKです。

if let url = URL(string: "https://mjeld.com/") {
	UIApplication.shared.open(url)
}

https://developer.apple.com/documentation/uikit/uiapplication/1648685-open

optionsで [.universalLinksOnly: true]を指定した場合、「URLが有効なユニバーサルリンクであり、そのURLを開くことができるインストール済みアプリがある場合にのみ、メソッドはURLを開きます。 このキーの値は、ブール値を含むNSNumberオブジェクトです。」ということらしいです。

completionHandler: {completed in print(completed) } 成功したら trueが返ってきます。

struct TURLOpen: View {
    var body: some View {
        Button("URL Open", action: {
            if let url = URL(string: "https://mjeld.com/") {
                UIApplication.shared.open(url, options: [.universalLinksOnly: false], completionHandler: {completed in
                    print(completed)
                })
            }
        })
    }
}

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つ設定すればうまく動きました。