add blur effect while scrolling on Parallax header (Swift)

Question

well what am trying to achieve is in this library https://github.com/Vinodh-G/ParallaxTableViewHeader but am having problem while implementing this library :

problem :

1. its on ObjC and my native language is Swift so its hard to understand what is going on under the hood

2. somehow i implemented this library but the headerView's image is not on centre , i tried to set the ContentMode to scaletofill , Centre but it didn't worked for me

its appearing like this (not on centre until i scroll once)

so

after scrolling:

so i created my own and its working fine only one problem is that i dont have any blur effect yet , so if anybody knows how this works or how can i add this blur effect on my HeaderView then please let me know

my (Swift) HeaderView :

class HeaderView: UIView {

var heightLayoutConstraint = NSLayoutConstraint()
var bottomLayoutConstraint = NSLayoutConstraint()

var containerView = UIView()
var containerLayoutConstraint = NSLayoutConstraint()

override init(frame: CGRect) {
    super.init(frame: frame)
    self.backgroundColor = UIColor.whiteColor()

    // The container view is needed to extend the visible area for the image view
    // to include that below the navigation bar. If this container view isn't present
    // the image view would be clipped at the navigation bar's bottom and the parallax
    // effect would not work correctly

    containerView.translatesAutoresizingMaskIntoConstraints = false
    containerView.backgroundColor = UIColor.redColor()
    self.addSubview(containerView)
    self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[containerView]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["containerView" : containerView]))
    self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[containerView]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["containerView" : containerView]))
    containerLayoutConstraint = NSLayoutConstraint(item: containerView, attribute: .Height, relatedBy: .Equal, toItem: self, attribute: .Height, multiplier: 1.0, constant: 0.0)
    self.addConstraint(containerLayoutConstraint)

    let imageView: UIImageView = UIImageView.init()
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.backgroundColor = UIColor.whiteColor()
    imageView.clipsToBounds = true
    imageView.contentMode = .ScaleAspectFill
    imageView.image = UIImage(named: "cover")
    containerView.addSubview(imageView)
    containerView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[imageView]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["imageView" : imageView]))
    bottomLayoutConstraint = NSLayoutConstraint(item: imageView, attribute: .Bottom, relatedBy: .Equal, toItem: containerView, attribute: .Bottom, multiplier: 1.0, constant: 0.0)
    containerView.addConstraint(bottomLayoutConstraint)
    heightLayoutConstraint = NSLayoutConstraint(item: imageView, attribute: .Height, relatedBy: .Equal, toItem: containerView, attribute: .Height, multiplier: 1.0, constant: 0.0)
    containerView.addConstraint(heightLayoutConstraint)
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}



func scrollViewDidScroll(scrollView: UIScrollView) {

    containerLayoutConstraint.constant = scrollView.contentInset.top;
    let offsetY = -(scrollView.contentOffset.y + scrollView.contentInset.top);
    containerView.clipsToBounds = offsetY <= 0
    bottomLayoutConstraint.constant = offsetY >= 0 ? 0 : -offsetY / 2
    heightLayoutConstraint.constant = max(offsetY + scrollView.contentInset.top, scrollView.contentInset.top)
}

}

Answer 1

Well instead of trying to blur your image you can add an overlayView over your image which is of course set to clearColor() and then while you scroll up set the background color of your overlay view to this :-

UIColor(white: 1.0, alpha: scrollView.contentOffset.y/180)

Note, I had used a tableView setting two different types of cells (one parallaxHeaderViewCell Containing imageView and the overlayView over it and another a normalCell for tableView). The scrollView I have written is from :-

func scrollViewDidScroll(scrollView: UIScrollView!)

I too have used my own code to implement parallax instead of implementing third-party. Its easy to implement and no big deal !!