How to implement a collapsing header?

Question

I tried to implement a collapsing UITableView Header but right now I am not getting any further. This is my storyboard. I tried to use the scrollViewDidScroll(scrollView: UIScrollView) delegate method but the position is not changing at all while scrolling in the table view which is embedded in the container. The heightConstraint is the height of my container header view. Here is the full source code for my class. I appreciate any help! Sitting on this problem for some time now.

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    self.heightConstraint.constant = self.maxHeaderHeight
}

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let absoluteTop: CGFloat = 0
    let absoluteBottom: CGFloat = scrollView.contentSize.height - scrollView.frame.size.height
    let scrollDiff = scrollView.contentOffset.y - self.previousScrollOffset
    let isScrollingDown = scrollDiff > 0 && scrollView.contentOffset.y > absoluteTop
    let isScrollingUp = scrollDiff < 0 && scrollView.contentOffset.y < absoluteBottom

    var newHeight = self.heightConstraint.constant
    if isScrollingDown {
        newHeight = max(self.minHeaderHeight, self.heightConstraint.constant - abs(scrollDiff))
    } else if isScrollingUp {
        newHeight = min(self.maxHeaderHeight, self.heightConstraint.constant + abs(scrollDiff))
    }

    if newHeight != self.heightConstraint.constant {
        self.heightConstraint.constant = newHeight
    }

    self.previousScrollOffset = scrollView.contentOffset.y
}

While scrolling up the header container should disappear/change its location.

Did you check this one https://stackoverflow.com/questions/1938921/expand-collapse-section-in-uitableview-in-ios ? I think it would be easier for you to achieve it with tableView check this link https://medium.com/ios-os-x-development/ios-how-to-build-a-table-view-with-collapsible-sections-96badf3387d0 — Let's_Create, Jun 12 '19 at 07:56
Thanks for the links.. I have to use a container view for the navigation. There is no way around it. I achieved it with a table view tho :/ — , Jun 12 '19 at 08:08

PGDev · Accepted Answer · 2019-06-12T11:44:38.207

3

Here is how you can handle the headerView height with tableView scrolling,

class VC: UIViewController {
    @IBOutlet weak var heightConstraint: NSLayoutConstraint!

    var lastContentOffset: CGFloat = 0.0
    let maxHeaderHeight: CGFloat = 115.0

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if (scrollView.contentOffset.y >= (scrollView.contentSize.height - scrollView.frame.size.height)) {
            //Scrolled to bottom
            UIView.animate(withDuration: 0.3) {
                self.heightConstraint.constant = 0.0
                self.view.layoutIfNeeded()
            }
        }
        else if (scrollView.contentOffset.y < self.lastContentOffset || scrollView.contentOffset.y <= 0) && (self.heightConstraint.constant != self.maxHeaderHeight)  {
            //Scrolling up, scrolled to top
            UIView.animate(withDuration: 0.3) {
                self.heightConstraint.constant = self.maxHeaderHeight
                self.view.layoutIfNeeded()
            }
        }
        else if (scrollView.contentOffset.y > self.lastContentOffset) && self.heightConstraint.constant != 0.0 {
            //Scrolling down
            UIView.animate(withDuration: 0.3) {
                self.heightConstraint.constant = 0.0
                self.view.layoutIfNeeded()
            }
        }
        self.lastContentOffset = scrollView.contentOffset.y
    }
}

In the above code headerView will,

collapse when the tableView is scrolled up
expand when the tableView is scrolled down

Let me know in case you still face any issues.

edited Jun 12 '19 at 11:44

answered Jun 12 '19 at 07:58

PGDev

23,751
6
34
88

I made a [gif](https://giphy.com/gifs/ios-swift-JNs7vdoSrJnLZfFP2i) to show the problem I am facing. Im not using a table view in the first place. I use a container view to navigate and then I add a table view into it. – Jun 12 '19 at 08:22
is it a problem to use a container view here instead of a table view? – Jun 12 '19 at 11:32
The code will work for any `scrollView` and not just the `tableView`. – PGDev Jun 12 '19 at 11:45
Is your `containerView` scrolling? – PGDev Jun 12 '19 at 11:45
Do I have to add a Scroll View element into my hierarchy? – Jun 12 '19 at 12:08
Yes. Otherwise how will you be able to scroll your view? – PGDev Jun 12 '19 at 12:11
I see. But do I have to replace my whole view or do I only have to add my container view into the scroll view. [Here](https://imgur.com/a/ZzU2qIu) is my storyboard. – Jun 12 '19 at 12:18
How do I have to constraint the scroll view and the container view? It looks like [this](https://imgur.com/a/gmMpx2Q) – Jun 12 '19 at 13:21
I am having trouble with the scroll view..Do I have to place it right under the header which I want to collapse? – Jun 12 '19 at 13:50
right now my scroll view is under my stack view where my container view was.. and my container view is inside it but my header is not collapsing right now – Jun 12 '19 at 13:53

How to implement a collapsing header?

1 Answers1