• 2022/10/15
• 3分

【Swift UIKit】モーダルウィンドウの実装方法！segueとpresentの2パターン

＼ アプリをリリースしました ／

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

posted withアプリーチ

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

モーダルウィンドウ

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

UIKitでモーダルを実装する方法

UIKitフレームワーク使用時にモーダルを実装するにはStoryboardから実装するパターンとコードで実装するパターンの2つがあります。

ポイント

• Storyboard：Segue(セグエ)
• コード：presentメソッド

使用用途などに応じて適した方法で実装してみてください。

Storyboardから実装する

Storyboardからはsegueを使用することでモーダルを簡単に実装することができます。実装のためには親となるビューと子となるビューが必要になるので、Storyboardに新しく「View Controller」を追加します。

親側には「Button」を子側には「Label」を追加して「Modal Page」としておきます。

これで準備が整ったのでsegueを使ってモーダル(画面遷移)を実装していきます。方法はButtonを選択した状態で「Control」を押しながらドラッグして子ビューへと繋ぎ「Show」を選択します。

これでモーダルの実装は完了です。ビルドして正常に動作するか確認してみてください。

コードでモーダルを実装する

先に流れを確認しておきます。

1. Storyboardからモーダル用のView Controllerを追加
2. 追加したView Controllerに「Storyboard ID」を付与
3. 遷移元ViewControllerクラスのボタンアクションを定義/紐付け
4. 遷移元ViewControllerクラスからpresentメソッドで遷移

必要となるView Controllerや画面は以下の通りです。

• ViewController：遷移元
• Storyboard ID「modal」画面：遷移先

1.Storyboardからモーダル用のView Controllerを追加

View Controllerの追加やUI部品の設置は先ほどと同様の手順で進めておきます。

2.追加したView Controllerに「Storyboard ID」を付与

続いてモーダルとして表示するView Controllerに対してStoryboardから「Storyboard ID」を付与しておきます。これでコードからこの画面を識別できるようになります。

3.遷移元ViewControllerクラスのボタンアクションを定義/紐付け

ボタンを押した時にモーダルを表示させたいので@IBActionを使ってアクションを定義していきます。定義したらStoryboardからボタンとアクションを紐づけるのを忘れないようにしてください。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
      super.viewDidLoad()
    }

    @IBAction  func showModal() {
      // 
    }
}

4.遷移元ViewControllerクラスからpresentメソッドで遷移

遷移元となるViewControllerクラスから先ほど指定した「Storyboard ID」を識別子にモーダルとして表示するView Controllerを取得します。

@IBAction  func showModal() {
      let storyboard = UIStoryboard(name: "Main", bundle: nil)
      let modalVC = storyboard.instantiateViewController(withIdentifier: "modal")
      modalVC.modalPresentationStyle = .formSheet
      present(modalVC, animated: true, completion: nil)
}

まずはUIStoryboardクラスでStoryboardファイルを指定し、インスタンスを生成します。

let storyboard = UIStoryboard(name: "Main", bundle: nil)

続いてinstantiateViewControllerメソッドを指定して該当の「Storyboard ID」を持ったViewControllerを取得します。

let modalVC = storyboard.instantiateViewController(withIdentifier: "modal")

modalPresentationStyleでモーダルのスタイルを指定します。

modalVC.modalPresentationStyle = .formSheet

最後に引数に指定したViewControllerをモーダルで表示できるpresentメソッドを使用して完成です。

present(modalVC, animated: true, completion: nil)

modalPresentationStyle

modalPresentationStyleプロパティでスタイルを設定しています。

enum UIModalPresentationStyle : Int, @unchecked  Sendable {
  case automatic // デフォルトの表示スタイル
  case none // 改変禁止
  case fullScreen // フルスクリーン
  case pageSheet // 基礎となるコンテンツを部分的にカバースタイル
  case formSheet // 画面の中央にコンテンツを表示するスタイル
  case currentContext // コンテンツが別のビュ コントローラーのコンテンツの上に表示されるスタイル
  case custom // カスタムスタイル
  case overFullScreen // 提示されたビューが画面を覆うスタイル
  case overCurrentContext // コンテンツが別のビュー コントローラーのコンテンツの上に表示されるプレゼンテーション スタイル
  case popover // ポップオーバースタイル
  case blurOverFullScreen // フルスクリーン 新しいコンテンツを表示する前に、下にあるコンテンツをぼかす
}

presentメソッド

公式リファレンス：presentメソッド

UIViewControllerクラスが持つメソッドで引数に指定したViewControllerをモーダルで表示できるメソッドです。

func present(
  _ viewControllerToPresent: UIViewController,
  animated flag: Bool,
  completion: (() -> Void)? = nil
)

モーダルから戻るボタンの実装方法

親ビューからモーダルを呼び出した後に戻るボタンを実装していきます。新規で「ModalViewController.swift」を作成し、Storyboardから「Modal Page」の画面と紐づけておきます。

モーダルから戻るにはdismissメソッドを使用します。作成したModalViewControllerにボタンのアクションを用意し、Storyboardから「Modal Page」内にボタンを設置して紐付け作業をしておきます。

ModalViewController.swift
import UIKit

class ModalViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
        
    @IBAction  func dismissModal() {
        self.dismiss(animated: true,completion: nil)
    }

}

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

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