【SwiftUI】iOS16からハーフモーダルが使えるようになったので使ってみた

はじめに

以前はSwiftUIがハーフモーダルに対応していなかったのでUIKitを使用してハーフモーダルを実装しました。

今回は公式で対応されたハーフモーダルを使ってみたいと思います。

presentationDetents

使い方

タイプ	使い方
.large	.large	通常のsheetと同じ高さ
.medium	.medium	画面の半分の高さ
.height	.height(100)	heightで高さを指定できる
.fraction	.fraction(1/3)	画面の何分の何を指定できる(例は三分の一)
.custom	.custom(CustomSheetHeight.self)	高さをカスタマイズできる

基本的な使い方

ContentView

import SwiftUI

struct ContentView: View {
    @State private var large: Bool = false
    @State private var medium: Bool = false
    @State private var height: Bool = false
    @State private var fraction: Bool = false
    @State private var custom: Bool = false
    var body: some View {
        VStack(spacing: 20) {
            Button("large") {
                large = true
            }

            Button("medium") {
                medium = true
            }

            Button("height") {
                height = true
            }

            Button("fraction") {
                fraction = true
            }

            Button("custom") {
                custom = true
            }
        }
        .sheet(isPresented: $large) {
            Text("large")
                .presentationDetents([.large])
        }
        .sheet(isPresented: $medium) {
            Text("medium")
                .presentationDetents([.medium])
        }
        .sheet(isPresented: $height) {
            Text("height")
                .presentationDetents([.height(100)])
        }
        .sheet(isPresented: $fraction) {
            Text("fraction")
                .presentationDetents([.fraction(1/3)])
        }
        .sheet(isPresented: $custom) {
            Text("custom")
                .presentationDetents([.custom(CustomSheetHeight.self)])
        }
    }
}

CustomSheetHeight

// iPadの場合は400、それ以外は200にする
struct CustomSheetHeight: CustomPresentationDetent {
    static func height(in context: Context) -> CGFloat? {
        return UIDevice.current.userInterfaceIdiom == .pad ? 400 : 200
    }
}

複数タイプで切り替える

import SwiftUI

struct ContentView: View {
    @State private var isPresented: Bool = false
    var body: some View {
        VStack(spacing: 20) {
            Button("表示") {
                isPresented = true
            }
        }
        .sheet(isPresented: $isPresented) {
            Text("複数サイズ")
                .presentationDetents([.height(100), .medium, .fraction(0.8), .large])
        }
    }
}

おわり

どんどん便利になってきてますね
SwiftUIが進化してると嬉しいです