Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
341 views
in Technique[技术] by (71.8m points)

ios - How to implement UIVisualEffectView in UITableView with adaptive segues

I would like to implement UIVisualEffectView to apply a blur effect to a view to show the view that lies behind it.

This view that should have its background blurred is a UITableViewController that is embedded in a UINavigationController, and it will either be presented in a popover on iPad or it will be presented full screen modally on iPhone, thanks to iOS 8 adaptive segues (Present as Popover). When this view controller is in a popover I want the background to blur what's underneath the popover, and when it's presented full screen I want the background to blur the previous view controller.

I have tried to implement this and have not been successful. I cannot even get the blur effect to work for the popover. I thought this code should do the trick:

//In viewDidLoad on the UITableViewController subclass:
let effectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
effectView.frame = tableView.frame
tableView.addSubview(effectView)

I also tried adding the subview to the tableView.backgroundView, I tried setting the backgroundView to my effectView, I tried using Autolayout constraints instead of setting the frame, but nothing has worked. Can you help me accomplish the desired behavior?

An example of what I am trying to obtain:
iPad popover:
enter image description here

iPhone modal presentation:
enter image description here

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I've finally found a solution. I had to create two separate segues - one for a Popover Presentation which is called only on iPad, and the other a modal segue with Presentation Style set to Over Full Screen (that's important) for iPhone.

In the table view controller that is being presented, in viewDidLoad, this code will apply the desired blur effect (and bonus, only if they haven't disabled transparency effects):

if (!UIAccessibilityIsReduceTransparencyEnabled()) {
    tableView.backgroundColor = UIColor.clear
    let blurEffect = UIBlurEffect(style: .light)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    tableView.backgroundView = blurEffectView

    //if inside a popover
    if let popover = navigationController?.popoverPresentationController {
        popover.backgroundColor = UIColor.clear
    }

    //if you want translucent vibrant table view separator lines
    tableView.separatorEffect = UIVibrancyEffect(blurEffect: blurEffect)
}

This causes the table background to appear just like it does in the screenshots. The trick for iPhone was to ensure it's presented over the screen, while the trick for iPad was to remove the backgroundColor in the popoverPresentationController.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...