Search code examples
iosswiftuitableviewuiblureffect

UITableView blurred overlay

In my project I want to achieve a blurred background in a UITableView.

So far I already set up the overlay like this:

let blurEffect = UIBlurEffect(style: .dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)

blurEffectView.frame = self.view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

self.tableView.insertSubview(blurEffectView, at: 0)

Now I got the problem that the blurred overlay is on top of my table cell. See given image. The order should be like this: UITableView (which has a bg-color) - UIVisualEffectView (blurred overlay) - UITableViewCell

How can I put the overlay between the table view and it's cell? Or is there even a better solution to this?

enter image description here

Solution

  • Make your blurred view tableview's background view and it should look correct.

    let blurEffect = UIBlurEffect(style: .dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)

blurEffectView.frame = self.view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

self.tableView.backgroundView = blurEffectView