how to blur only the part of uitableview getting scrolled - ios

Question

I have to implement a menu just like the "example.gif" in the following library link
i'm using this same library to blur the background.
i've used contentInset so that the first three rows show up from the bottom.
Now, my problem is when i start scrolling the entire screen is blurred, whereas i want to blur the part of screen where uitableviewcells are getting scrolled. (Ultimately, the entire screen will be blurred as soon as the first cell reaches the top).
how can i achieve this. If there is any workaround without using the library, it is also welcome. Here is the code--
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate, UIScrollViewDelegate{
#IBOutlet weak var table: UITableView!
var blurView: DKLiveBlurView!
var unsortedCountryArray:[String] = []
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let topInset = self.view.frame.height - 120
// Array to display.
let countryArray = NSLocale.ISOCountryCodes()
for countryCode in countryArray {
let displayNameString = NSLocale.currentLocale().displayNameForKey(NSLocaleCountryCode, value: countryCode)
if displayNameString != nil {
unsortedCountryArray.append(displayNameString!)
}
}
// =============setting background==============
// self.bkgView = UIImageView(frame: self.view.bounds)
// self.bkgView.image = UIImage(named: "bg1")
// self.bkgView.contentMode = .ScaleAspectFill
// self.view.addSubview(self.bkgView)
// self.blurredBkgView = UIImageView(frame: self.view.bounds)
// self.blurredBkgView.image = UIImage(named: "bg1")
// self.blurredBkgView.contentMode = .ScaleAspectFill
// self.view.addSubview(blurredBkgView)
// self.blurredBkgView.alpha = 0.0
//
// blurEffect = UIBlurEffect(style: .Light)
// visualEffectView = UIVisualEffectView(effect: blurEffect)
// visualEffectView.frame = self.blurredBkgView.bounds
// self.visualEffectView.alpha = 0.0
// self.view.addSubview(self.visualEffectView)
self.table.backgroundColor = UIColor.clearColor()
self.table.separatorColor = UIColor.clearColor()
self.table.contentInset = UIEdgeInsetsMake(topInset, 0, 0, 0)
self.table.rowHeight = 40
print("view bounds: \(self.view.bounds)\n and table bounds: \(self.table.bounds)")
self.blurView = DKLiveBlurView(frame: self.table.bounds)
self.blurView.originalImage = UIImage(named: "bg1")
self.blurView.scrollView = table
self.blurView.setBlurLevel(6.0)
self.blurView.isGlassEffectOn = true
self.table.backgroundView = self.blurView
}
func scrollViewDidScroll(scrollView: UIScrollView) {
// let height = CGFloat(scrollView.bounds.size.height)
// let position = max(scrollView.contentOffset.y, 0.0)
// let percent = min(position / height, 1.0)
// self.blurredBkgView.alpha = percent;
// print("scrollview bounds: \(scrollView.bounds)")
}
func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
// cell.backgroundView = self.blurView
}
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 1
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return unsortedCountryArray.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("cell")!
cell.textLabel?.text = unsortedCountryArray[indexPath.row]
cell.textLabel?.textColor = UIColor.blueColor()
cell.backgroundColor = UIColor.clearColor()
cell.selectionStyle = .None
return cell
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
This much code is blurring while scrolling.

Answer 1

To account for your content inset you need to change the frame you provide to your blurView
Eg
let contentInset = CGFloat(/*Your content inset*/)
let blurFrame = CGRect(x: 0, y: contentInset, width: tableView.frame.width, height: tableView.frame.height - contentInset)
self.blurView = DKLiveBlurView(frame: blurFrame)
EDIT: Old answer
You seem to be using bounds rather than frame for your DKLiveBlurView. This will cause you blur view to start from the top left of the screen (the origin of your view's frame)
Try:
self.blurView = DKLiveBlurView(frame: self.table.frame)
Rather than
self.blurView = DKLiveBlurView(frame: self.table.bounds)