【Swift UI】モーダルの実装方法!sheetモディファイアの使い方!

この記事からわかること

  • Swift UIモーダルウィンドウ実装方法
  • sheetモディファイア使い方
  • ハーフモーダルの実装方法

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Swift UIを使ってモーダルウィンドウの実装方法をまとめていきます。UIKitでの実装方法は異なるので以下の記事を参考にしてください。

モーダルウィンドウとは?

モーダルウィンドウ(modal window)とは親画面(ページ)の上に表示させる子画面(ページ)のことです。Swift UIではモーダルウィンドウを画面下から出てくる形で実装することができます。子画面で特定の操作が行われるまでは親画面は操作出来ず、特定の操作を行うと子画面は下部へとアニメーションしながら消えていきます

Swift UIでのモーダル実装方法

Swift UIでモーダルウィンドウを実装するにはsheetモディファイアを使用します。

func sheet(
    isPresented: Binding,
    onDismiss: (() -> Void)? = nil,
    content: @escaping () -> Content
) -> some View where Content : View

引数

引数にはシートの表示/非表示を保持するための真偽値の変数を渡します。この変数にtrueを格納するとシートが下部から表示されるようになります。

使用例

struct ContentView: View {
    @State  var isModal:Bool = false
    var body: some View {
        VStack{
            Button(action: {
                isModal = true
            }, label: {
                Text("ContentView")
            })
        }.sheet(isPresented: $isModal, content: {
            Text("Modal Page")
        })
    }
}
Swift UIのsheetモディファイアを使用してモーダルウィンドウを実装している画面

ハーフモーダルの実装

先ほどのモーダルウィンドウは画面いっぱいを覆うようなサイズでしたがpresentationDetentsメソッドを使用することで大きさを半分にしたり、カスタムで指定することも可能となっています。

このメソッドはsheetモディファイアではなく中の要素から呼び出します。

.sheet(isPresented: $isModal) {
  Text("Modal Page")
  .presentationDetents([. medium])
}

presentationDetentsの引数にはPresentationDetent構造体をSet型で渡します。

struct PresentationDetent {
  static let large: PresentationDetent // デフォルト フルスクリーン
  static let medium: PresentationDetent // ハーフモーダル
  static func height(CGFloat) -> PresentationDetent // 任意の高さ
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

私がSwift UI学習に使用した参考書

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

QuickPressPanel

早押しゲーム-QuickPressPanel-

無料posted withアプリーチ

貸し借り管理アプリ

友達とのお金の管理-貸し借り管理アプリ-

無料posted withアプリーチ

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

New Article

index