Swift - How to do add an header with parallax effe

Question

What is the most efficient method for implement an header over a tableView which can animating his frame like in the gif. I need a customizable methods because i would like an header which can became a pageController or similar.

Edit: I tried several libraries found on the net and they are different. I need the header remains fixed at the top as in the gif. I tried to modify the examples to accomplish this but had no results.

I tried to change the scrollViewdidscroll but I failed because the offset does not change linearly, and the animation does not work. I can not animate the header over the bar navigation and ensure that it remains above it.

Thank you

Answer 1

Here you go. You can build your implementation on this simple example:

import UIKit

class ViewController: UITableViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let parallaxViewFrame = CGRect(x: 0, y: 0, width: self.view.bounds.width, height: 200)
        self.tableView.tableHeaderView  = ParallaxHeaderView(frame: parallaxViewFrame)
    }

    override func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let headerView = self.tableView.tableHeaderView as! ParallaxHeaderView
        headerView.scrollViewDidScroll(scrollView: scrollView)
    }
}

final class ParallaxHeaderView: UIView {

    fileprivate var heightLayoutConstraint = NSLayoutConstraint()
    fileprivate var bottomLayoutConstraint = NSLayoutConstraint()
    fileprivate var containerView = UIView()
    fileprivate var containerLayoutConstraint = NSLayoutConstraint()

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

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

        containerView.translatesAutoresizingMaskIntoConstraints = false
        containerView.backgroundColor = UIColor.red

        self.addSubview(containerView)
        self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[containerView]|",
                                                       options: NSLayoutFormatOptions(rawValue: 0),
                                                       metrics: nil,
                                                       views: ["containerView" : containerView]))

        self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "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()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.backgroundColor = .white
        imageView.clipsToBounds = true
        imageView.contentMode = .scaleAspectFill
        imageView.image = UIImage(named: "YourImage")

        containerView.addSubview(imageView)
        containerView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "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)
}

    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)
    }
}