今回作成するアプリ
2021年のWWWDCでUIKitにハーフモーダルが発表され、WWWDC2022でSwiftUIにも発表されました。
iOS16/iPadOS16にてSheetにpresentationDetents modifierが追加されたことで、ハーフモーダルが簡単に使えるようになりました。
今回は、ハーフモーダルをSwiftUIで実装する方法を紹介します。
実装
コード
import SwiftUI
struct ContentView: View {
@State var showModalSheet = false
var body: some View {
Button("ハーフモーダルを開く") {
showModalSheet = true
}
.sheet(isPresented: $showModalSheet) {
ZStack {
Text("ハーフモーダル")
}
.presentationDetents([.large, .height(400), .fraction(0.5)])
// .presentationDetents([.large])
// .presentationDetents([.fraction(1)])
// .presentationDetents([.height(400)])
}
}
}
解説
使い方は簡単で、.sheetの中のViewに
func presentationDetents(_ detents: Set<PresentationDetent>) -> some View
を追加するだけです!
パラメータは、
- [.large] スクリーン全体
- [.medium] スクリーンの約半分
- [.fraction(CGFloat)] CGFloatの値がスクリーンに対する割合(0.5なら半分、1.0なら全体)
- [.height(CGFloat)] CGFloatで高さを直接指定できる
組み合わせて記述した場合は、一番低いものが優先されます。
他には.customもありCustomPresentationDetentプロトコルを実装した構造体を使用することもできるようです。
動作
参考文献
環境
macOS Ventura 13.0.1
Xcode 14.2
iOS 16.2
アイキャッチ画像 出典: App.com