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