Collapsing toolbar layout for ios

Question

I have a new design for my app and it include a parallax scroll for a image display on top of tableView.

I know how to add a parallax effect with putting a image in to a cell, like this -

when table scrollViewDidScroll get called :

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    CGPoint currentOffset = scrollView.contentOffset;

        if (currentOffset.y > _lastContentOffset.y) {
            //Scroll Up

            _containerView.clipsToBounds = true;
            _bottomSpaceConstraint.constant = -scrollView.contentOffset.y / 2;
            _topSpaceConstraint.constant = scrollView.contentOffset.y / 2;

        } else {
           //Scroll Down

            _topSpaceConstraint.constant = scrollView.contentOffset.y;
            _containerView.clipsToBounds = false;

        } 

        _lastContentOffset = currentOffset;

}

(the _bottomSpaceConstraint and _topSpaceConstraint are the Image top and Bottom constraint which inside the tableView cell in section 0)

But my problem is I needs to stop the image scrolling up when it reached the size of my navigation bar. (my navigation bar background is transparent) I don't want the image to go all the way top. But it is a cell which is inside my tableView so it is going all the way to top until it disappear when scrolling. I need help for stop this image get scrolled. Maybe my approach is not correct if I want to achieve this effect.

This effect is on android and its called "collapsing toolbar layout". http://antonioleiva.com/collapsing-toolbar-layout/

Does someone know how to do this "collapsing toolbar layout" effect for iOS.

Thanks a lot for any help!

Answer 1

Try creating a UIView that will contain the image and set the tableHeaderView in the tableView. Then in scrollViewDidScroll: update the height and top constraints of the header view.