【Swift・iOS】iphoneアプリで、ポップアップ(モーダル)を実装する方法(Segueを使って実装)

背景が半透明になったモーダル(ポップオーバー)はiOSアプリに限らず、webでもAndroidアプリでもよく実装されます。

今回は、swiftでこのようなモーダルを表示する方法を紹介します。

ViewControllerを2つ作る

元となるViewControllerの上に、新たに背景が薄グレイのViewControllerを表示する方針で、モーダルを作成します。

そのため、Main.storyboardに2つのViewControllerを作成してください。

1つ目(左)をViewController、2つ目(右)をModalViewControllerとして、Controllerファイルも作成し、Main.storyboardとのヒモ付も行ってください。

作成した2つのViewControllerをSegueでつなぎます。(Segueの命名はModalSegueにしました。)

そして、ViewControllerの方にButtonを配置し、ViewController.swiftファイルに紐づけ、タップするとperformSegueを実行するようにします。

ViewController.swift

一旦、この状態でビルドして、buttonをタップすると、画面が真っ白になります。(ModalViewControllerに遷移している)

次に、遷移した状態がわかりやすいように、ModalViewControllerに背景色をつけましょう。

ModalViewController.swift

この状態でビルドして、buttonをタップすると、黒い画面に遷移して、ModalViewControllerに遷移したことがわかりやすいと思います。

このままだと、普通に画面遷移をしているだけなので、Modalとは呼べません。

そこで、Main.storyboardのModalViewControllerの

【Presentation】を【Over Current Context】に変更しましょう。(以下画像参照)

この状態で、ビルドして、buttonをタップしてみてください。

前の画面(button)という文字の上に、新しいViewが表示されていることが確認できます。

一旦、実装としては、これで完了なのですが、モーダルっぽくみせるために、ModalViewControllerに適当にViewパーツを配置してみましょう。

このようにダミーのオブジェクトを配置して、buttonを押せば、モーダルっぽい挙動が確認できます。

モーダルを閉じるときは、普通にSegueの画面を戻すときと同じく、

をModalViewController内で実行すればOK!!

button等をモーダルのオブジェクトの中に配置して、閉じるボタンも実装出来ます。

ポップアップやモーダルは、アプリ開発でよく使う処理なので、絶対に覚えてしまいましょう!!

https://github.com/rara-tan/swift-modal-popup-demo

githubにソースをあげておきましたので、興味がある方は是非😼

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。