iOSでポップアップビューの自作を行う。
iOSでポップアップビューを実装する(with Storyboard)
こちらの記事を参考にしてストーリーボードを使ってポップアップビューを自作。
上記の記事でも言及されているが、世の中には高機能でオシャレなポップアップ/モーダル実装がたくさんあるので、まずはそれらを採用できないか検討するのが賢明かと思われます。
Deployment Target:iOS 8.0
Swift:2.2
ViewControllerを2つ
最初のViewControllerとポップアップのViewControllerの2つを用意。
ポップアップのViewController
背景透過で後ろの画面を表示させるためにポップアップのViewControllerのPresentationをOver Current Context
に設定
背景透過のView
ポップアップは背景透過のViewの上にポップアップ(ピンク)のView重ねて実現する。
背景透過はBackground
に透過カラーを設定する。
ここでAlpha
の設定を変えてしまうと、そのviewのsubviewsもAlpha
の影響を受けてしまうのでAlpha
は1のまま。
ポップアップ以外の場所(背景透過の部分)をタップした時にポップアップを閉じる処理をしたいのでViewを識別するTag
に1を設定する。
ポップアップView
セグエで接続
最初のViewControllerとポップアップのViewControllerをセグエに接続。
Transition
はCrosse Dissolve
を設定。
ここらへんをもっとポップアップぽくしたい時は、カスタムクラスなどで実装する。
ポップアップを閉じる
ポップアップのViewControllerでCloseボタンをタップ、またはポップアップ以外の場所(背景透過の部分)をタップした時にポップアップを閉じる処理を入れる
override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {
super.touchesEnded(touches, withEvent: event)
for touch: UITouch in touches {
let tag = touch.view!.tag
if tag == 1 {
dismissViewControllerAnimated(true, completion: nil)
}
}
}
@IBAction func didTapClose(sender: AnyObject) {
dismissViewControllerAnimated(true, completion: nil)
}
サンプルコード