今回作成するアプリ

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

Simulater iPhone 14 Pro Max

アイキャッチ画像 出典: App.com