LoginSignup
39
38

More than 5 years have passed since last update.

【Swift4】UIPopoverPresentationControllerを使ってiPhone/iPad両対応のPopoverを出してみた

Last updated at Posted at 2018-10-13

iPhone/iPad両対応のPopoverを試してみました。
※キャプチャにすると影の部分が不自然に映りますが、実際は気にならないのでご安心ください

popover.gif

環境

Swift4.2
Xcode10.0

コード

コピペで動くと思います。

ViewController
import UIKit

class ViewController: UIViewController, UIPopoverPresentationControllerDelegate{

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    @IBAction func btnTapped(_ sender: UIButton) {
        let contentVC = ContentViewController()
        // スタイルの指定
        contentVC.modalPresentationStyle = .popover
        // サイズの指定
        contentVC.preferredContentSize = CGSize(width: 200, height: 200)
        // 表示するViewの指定
        contentVC.popoverPresentationController?.sourceView = view
        // ピヨッと表示する位置の指定
        contentVC.popoverPresentationController?.sourceRect = sender.frame
        // 矢印が出る方向の指定
        contentVC.popoverPresentationController?.permittedArrowDirections = .any
        // デリゲートの設定
        contentVC.popoverPresentationController?.delegate = self
        //表示
        present(contentVC, animated: true, completion: nil)
    }

    // iPhoneで表示させる場合に必要
    func adaptivePresentationStyle(for controller: UIPresentationController, traitCollection: UITraitCollection) -> UIModalPresentationStyle {
        return .none
    }
}

ポイントは、iPhoneでも表示させたいときには、UIPopoverPresentationControllerDelegateUIModalPresentationStyle.noneを返してあげること。

.permittedArrowDirectionsには.up.down.left.rightなどが指定でき、.anyを使うと勝手に判断していい感じのところから矢印を出してくれます。
上下どっちかから出したいという場合は、[.up, .down]のように配列で指定することもできます。

ContentViewController
import UIKit

class ContentViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        view.backgroundColor = UIColor.red
    }
}

ContentViewControllerでは背景色のみ設定しています。

参考資料

Popoverの2つの実装方法を比較する

39
38
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
39
38