Adding UIVisualEffectView to tableView in swift

Question

I have added a UIVisualEffectView object form Object Library in Xcode on top of my tableView in the storyBoard. The first cell of the tableView is behind the UIVisualEffectView object . I want to display the first cell of the table view below the blur area. Also when i scroll the table cells it should go behind the blur area . I tried with this code

self.tableView.contentInset = UIEdgeInsetsMake(100, 0, 0, 0)
self.tableView.scrollIndicatorInsets = UIEdgeInsetsMake(100, 0, 0, 0)

But when i scroll upside the cells won't go behind the blur area . Help

Also I am trying to change the color of the blur region. Currently its white for light effect and black for dark effect. How do i set a specific color to blur area without effecting its behavior ?

Answer 1

Yours cell cant go outside of the table. So you need to extend the tableView, then add contentInset.

Also make sure that your tableView is transparent and visualEffectView is under the tableView.

Answer 2

Simple method is make UIVisualEffectView as your table view section header view, for example

override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let blurEffect = UIBlurEffect(style: .Light)
    let blurView = UIVisualEffectView(effect: blurEffect)
    return blurView
}

override func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 44.0
}

it looks like