2017年1月10日火曜日

Popoverを表示

設定なんかを変更する場合に、画面全体をページ切り替えするのでなく、吹き出し型のビューを表示させるものがPopover(ポップオーバー)だ。

Pagesとかで右上のボタン押すと出るやつね。
PagesのPopover

Storyboardで簡単に作ろう

iPadだと標準だけど、iPhoneだと画面全体を覆われちゃったりするようなので、そのへんをうまいことやりながら、なおかつStoryboardで簡単に表示させようという魂胆。
だってコードで全部書くとConstraintsの設定とか大変でしょ? 中に置く部品をStoryboardで配置できるメリットは大きいよ。

メインのViewControllerの他にPopover用のViewController(仮にPopView)を作り、ViewControllerにボタンを置いて、PopViewにSegueでつないでやる。SegueのKindはPresent As Popover
このままだとデフォルトの大きさになるので、表示させる内容が少ない場合はサイズを小さくしたい。
中のViewのWidthとHeightを変えてやるとStoryboard上はサイズ変更されるけど、Runさせると変わってない。

Segueで開く際に、Segue先のViewのサイズを変えてやればいい。
そのため、prepare(for segue, sender)をoverrideする。
これから開かれるViewがdestinationプロパティで得られるので、それのpreferredContentSizeを変更すればいい。

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    segue.destination.preferredContentSize = CGSize(width: 200, height: 300)
}

iPadで表示
下半分はまだ製作中ね。

iPadの場合はこれだけでいいんだけど、iPhoneは相変わらず画面全体が覆われちゃう。
そこでSegue先についてのdelegateを設定する。

当然ViewControllerの先頭にUIPopoverPresentationContollerDelegateの宣言をする。

class ViewController: UIPopoverPresentationControllerDelegate {……}


そしてSegue先のdelegate先を設定。

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    segue.destination.preferredContentSize = CGSize(width: 200, height: 300)
    let popView = segue.destination.popoverPresentationController
    popView!.delegate = self
}


そして以下のdelegateメソッドを書き、UIModalPresentationStyleの値を.noneで返してやればiPhoneでも変更したサイズでPopoverが表示できるようになる。

func adaptivePresentationStyle(for controller: UIPresentationController, traitCollection: UITraitCollection) -> UIModalPresentationStyle {
    return .none

}
iPhoneで表示
ちゃんと小さく表示されてる。

参考サイト

コードで書く場合とかは以下のサイトをご参考にどうぞ。

0 件のコメント:

コメントを投稿