iOS 8: Applying a UIVisualEffectView with Blur Effect to a Modal PopOver in Compact Mode

I am trying to make a popover like the one in session 214 of 2014's WWDC.

So I started building my app using the IB having two views connected by a "Present As Popover" segue, as such:

enter image description here The popover view contains a text view that fills its superview, with the following constraints:

In order to support the modal popover the following code:

func adaptivePresentationStyleForPresentationController(controller: UIPresentationController) -> UIModalPresentationStyle {
    return .OverFullScreen
}

func presentationController(controller: UIPresentationController, viewControllerForAdaptivePresentationStyle style: UIModalPresentationStyle) -> UIViewController? {

    let navigationController = UINavigationController(rootViewController: controller.presentedViewController)
    controller.presentedViewController.navigationItem.setRightBarButtonItem(UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.Done, target: self, action: "done"), animated: true)

    return navigationController
}

This gave me the following result: enter image description here

Then I tried to add the UIVisualEffectView with the blur effect. At first I was simply adding a subview to the presented controller view and after checking the View Hierarchy I realised that my effect view was in fact on top of my text view, but my text view was placed correctly. So I tried the insertSubview: atIndex: method like such:

func presentationController(controller: UIPresentationController, viewControllerForAdaptivePresentationStyle style: UIModalPresentationStyle) -> UIViewController? {

    let effectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light)) as UIVisualEffectView
    effectView.setTranslatesAutoresizingMaskIntoConstraints(false)
    controller.presentedViewController.view.insertSubview(effectView, atIndex: 0)

    let viewList : [String : UIView] = ["effectView" : effectView]

    let navigationController = UINavigationController(rootViewController: controller.presentedViewController)
    controller.presentedViewController.navigationItem.setRightBarButtonItem(UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.Done, target: self, action: "done"), animated: true)


    controller.presentedViewController.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[effectView]|", options: nil, metrics: nil, views: viewList))

    controller.presentedViewController.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-[effectView]|", options: nil, metrics: nil, views: viewList))

    return navigationController
}

But I am still unable to present the text view defined in the IB: enter image description here

Through the View Hierarchy I can see that my text view, somehow, is getting moved below the navigation bar when I insert the UIVisualEffectView at index 0.

Any thoughts on how I can programatically set the blur effect below my text without making it disappear/move underneath the navigation bar?

Cheers

Recommended topics

Hot tags