背景が半透明になったモーダル(ポップオーバー)はiOSアプリに限らず、webでもAndroidアプリでもよく実装されます。
今回は、swiftでこのようなモーダルを表示する方法を紹介します。
ViewControllerを２つ作る
元となるViewControllerの上に、新たに背景が薄グレイのViewControllerを表示する方針で、モーダルを作成します。
そのため、Main.storyboardに２つのViewControllerを作成してください。
１つ目(左)をViewController、2つ目(右)をModalViewControllerとして、Controllerファイルも作成し、Main.storyboardとのヒモ付も行ってください。
作成した２つのViewControllerをSegueでつなぎます。(Segueの命名はModalSegueにしました。)
そして、ViewControllerの方にButtonを配置し、ViewController.swiftファイルに紐づけ、タップするとperformSegueを実行するようにします。
ViewController.swift
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import UIKit class ViewController: UIViewController { @IBAction func button(_ sender: Any) { performSegue(withIdentifier: "ModalSegue", sender: nil) } override func viewDidLoad() { super.viewDidLoad() } } |
一旦、この状態でビルドして、buttonをタップすると、画面が真っ白になります。(ModalViewControllerに遷移している)
次に、遷移した状態がわかりやすいように、ModalViewControllerに背景色をつけましょう。
ModalViewController.swift
|
1 2 3 4 5 6 7 8 9 10 11 |
import UIKit class ModalViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.7) } } |
この状態でビルドして、buttonをタップすると、黒い画面に遷移して、ModalViewControllerに遷移したことがわかりやすいと思います。
このままだと、普通に画面遷移をしているだけなので、Modalとは呼べません。
そこで、Main.storyboardのModalViewControllerの
【Presentation】を【Over Current Context】に変更しましょう。(以下画像参照)
この状態で、ビルドして、buttonをタップしてみてください。
前の画面(button)という文字の上に、新しいViewが表示されていることが確認できます。
一旦、実装としては、これで完了なのですが、モーダルっぽくみせるために、ModalViewControllerに適当にViewパーツを配置してみましょう。
このようにダミーのオブジェクトを配置して、buttonを押せば、モーダルっぽい挙動が確認できます。
モーダルを閉じるときは、普通にSegueの画面を戻すときと同じく、
|
1 |
dismiss(animated: true, completion: nil) |
をModalViewController内で実行すればOK!!
button等をモーダルのオブジェクトの中に配置して、閉じるボタンも実装出来ます。
ポップアップやモーダルは、アプリ開発でよく使う処理なので、絶対に覚えてしまいましょう！！
https://github.com/rara-tan/swift-modal-popup-demo
githubにソースをあげておきましたので、興味がある方は是非😼
