Nested Scroll view vs Table View or something else for this requirement

Question

I have a requirement in which I need to have the following functionality -

1)I have a custom segmented control. In order to implement paging to the segmented control I have used horizontal scroll view. Each page has its own vertical scroll view.

Requirement

1)The image should hide as user scrolls up in the respective pages and should show down when user scrolls down in respective pages but keeping the custom segment always at the top of the screen when image is hidden irrespective of the individual page selection-

What I have tried so far -

1st Method

I tried putting the image as header of a table view. Created a single section with one cell & gave the section header as the custom segment. And in the cell I placed the horizontal scroll view with the cell's height adjusted to cover all portion left out of the superview but it didn't work out as when I scroll the vertical scrolling of individual pages it was not in sync with the table view.

2nd Method

I tried setting the segment initially with a fixed distance from the top & I increased & decreased the constraint inside scrollViewDidScroll(). But it too didn't work as when the user scrolled rapidly ,the changing of constraint value didn't follow correctly.

So is there any other way to achieve the same ? Please suggest as I can't make out what to do?

Answer 1

You add a tableView and your UIImage on top of it inside a scrollView. The tableView must have the same height & width than your scrollView. Then you disable the pan gesture of the scrollView :

self.scrollView.panGesture.active = false

Then you have to implement a custom scroll in scrollViewDidScroll' of yourtableView`'s delegate:

func scrollViewDidScroll(scrollView: UIScrollView) {
    if self.scrollView.contentOffset.y <= 100 {
        self.scrollView.contentOffset.y += scrollView.contentOffset.y
        self.tableView.contentOffset.y = 0
    } else {
        // let the tableView scroll normally
    }
}

Or, you can have a try with https://github.com/bryankeller/BLKFlexibleHeightBar ;)

It's a great component that can handle many type on animation in the header based on the position of a scrollView.