はじめに
今回は任意のUIViewControllerをポップオーバーさせる方法についてみていきます。
ポップオーバーとは、ボタンをタップした時に子画面を表示させることです。
iPadのカレンダーアプリで+ボタンをタップしたときに表示される「新規イベント」のような画面と考えてください。
環境
Xcode：9.2
Swift：4.0.3
ポップオーバー呼び出し側のデザイン
はじめにSingle View Appのプロジェクトを作成します。
つづいてMain.storyboardを開いて、View Controllerの上部にNavigation Barを配置し、その右側にBar Button Itemを1つ配置してください。
次に、今追加したBar Button Itemを+アイコンに変更します。Bar Button Itemを選択してSystem Itemを「Add」にします。
これで、以下のように+アイコンへと変わります。
ポップオーバーのデザイン
続いてポップオーバーされるビューを作成します。
Main.storyboardにView Controllerを1つ追加してください。
追加したView Controllerが白い背景色だとわかりにくいので別の色を設定しておきます（ここではオレンジにしました）。
次に、ポップオーバーされた時のサイズを変更します。①View Controllerをくりくして選択したら、②Size inspectorを選択します。③Simulated Sizeで「Freeform」を選択したら幅と高さを任意のサイズに変更します。
最後にAttributes inspectorを選択してContent Sizeのところにチェックをつけます。サイズは、先ほど設定した値になっていますので変更せずにそのままとします。
セグエで接続する
呼び出し元と呼び出し先のページができたのでセグエで接続をします。
メインのView Controllerに配置した「+」ボタンをタップした時にポップオーバーされるようにします。
[control]キーを押しながら「+」ボタンをポップオーバーするページへドラッグしてセグエ接続します。このときAction Segueは「Present As Popover」を選択します。
コードの実装
最後にコードを実装します。
メインのViewController.swiftを開いて、
UIPopoverPresentationControllerDelegateを継承させます。
class ViewController: UIViewController, UIPopoverPresentationControllerDelegate {
次に、以下のコードを挿入してください。
// 前準備
override func prepare (for segue: UIStoryboardSegue, sender: Any?) {
// セグエのポップオーバー接続先を取得
let popoverCtrl = segue.destination.popoverPresentationController
// 呼び出し元がUIButtonの場合
if sender is UIButton {
// タップされたボタンの領域を取得
popoverCtrl?.sourceRect = (sender as! UIButton).bounds
}
// デリゲートを自分自身に設定
popoverCtrl?.delegate = self
}
// 表示スタイルの設定
func adaptivePresentationStyle(for controller: UIPresentationController, traitCollection: UITraitCollection) -> UIModalPresentationStyle {
// .noneを設定することで、設定したサイズでポップオーバーされる
return .none
}
上記のコードは2つのメソッドがあります。1つ目のprepareは前準備です。
セグエのポップオーバーの接続先をどこに表示するかの設定を行なっています。
タップされたボタンの下に表示させたいので、prepareの呼び出し元がUIButtonかどうかを判断しています。UIButtonだった場合は、そのUIButtonの位置をsourceRectプロパティに代入し、表示位置を決めています。
もう1つのadaptivePresentationStyleメソッドはポップオーバーが表示されるときのスタイルを設定するためのものです。.noneを返却することで、設定したサイズで表示されるようになります。
実行してみよう
実行をして「+」ボタンをタップすると以下のように「+」ボタンの下にポップオーバー表示されるようになります。
コメント