• 2022/10/15
• 3分

【Swift UIKit】UIPresentationControllerを使ったカスタムモーダルの実装方法！

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

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

posted withアプリーチ

UIKitを使ってモーダルビューをカスタムで実装する方法をまとめていきます。通常のモーダルの実装方法は以下の記事を参考にしてください。

カスタムモーダルの実装方法

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

1. Storyboardからモーダル用のView Controllerを追加
2. 追加したView Controllerに「Storyboard ID」を付与
3. 遷移元にUIViewControllerTransitioningDelegateを準拠
4. 遷移先はUIPresentationControllerに変更
5. ボタンにアクションメソッドを用意してpresent
6. presentationControllerメソッドで対象遷移先を返す

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

• ViewController：遷移元
• ModalViewController：モーダル管理
• Storyboard ID「modal」画面：遷移先

詳細な解説は一連の流れの後に記述していますのでまずは実装する方法のみを記述していきます。

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

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

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

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

3.遷移元にUIViewControllerTransitioningDelegateを準拠

遷移元となるViewControllerクラスにUIViewControllerTransitioningDelegateを追加します。※解説は後述

ViewController.swift
import UIKit

class ViewController: UIViewController,UIViewControllerTransitioningDelegate{

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

4.遷移先はUIPresentationControllerに変更

遷移元となるViewControllerクラスにUIPresentationControllerのみにしておきます。※解説は後述

ModalViewController.swift
import UIKit

class ModalViewController: UIPresentationController {
    // ここにカスタムの好きな設定を記述する
}

このクラスにモーダルをカスタムするための処理を記述していきます。

5.ボタンにアクションメソッドを用意してpresent

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

アクション内ではmodalPresentationStyleの値を.customにしておきます。

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

6.presentationControllerメソッドで対象遷移先を返す

最後にpresentationControllerメソッドを追加してUIPresentationControllerに準拠させたクラスを返せばモーダルの実装は完了です。

ViewController.swift
func presentationController(forPresented presented: UIViewController, presenting: UIViewController?, source: UIViewController) -> UIPresentationController? {
    return ModalViewController(presentedViewController: presented, presenting: presenting)
}

正常に動作するか試してみてください。

UIViewControllerTransitioningDelegate

公式リファレンス：UIViewControllerTransitioningDelegate

ViewController間の画面遷移を管理するメソッドを提供している。最後に使用したpresentationControllerメソッドはこのが提供しているメソッドの1つです。

presentationControllerメソッド

モーダル表示をさせるためにビュー階層を管理するためのUIPresentationControllerインスタンスを設定するメソッド。

func presentationController(forPresented presented: UIViewController, presenting: UIViewController?, source: UIViewController) -> UIPresentationController? {
    return ModalViewController(presentedViewController: presented, presenting: presenting)
}

UIPresentationController

公式リファレンス：UIPresentationController

遷移アニメーションと画面上のビューコントローラーの表示を管理するクラス。今回は空白(何も設定していない)でしたが、用意されたメソッドを使用してアニメーションに独自の動きを与えたり、表示するビューのサイズを設定することができます。

ModalViewController.swift
import UIKit

class ModalViewController: UIPresentationController {
    // ここにカスタムの好きな設定を記述する
}

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

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