Sliding Header View Bar when using Horizontal Scrolling Table Views

Question

I am building an application that has multiple tableviews inside a scrollview that has paging enabled and scrolls horizontally. Every tableview has a title.

I want to be able to scroll horizontally, and have a bar above the table view (and below the navigation bar that shows all the titles of the tableview, and that scrolls at another speed that the tableviews.

I attached two screenshots to help you understand what I mean.

1) I have a navigation bar that I customized, and a Filter button in it. I want to keep that and not touch it.

2) I have a bar (club 1, club 2, club 3 that I want to be able to scroll horizontally). Let's call it "title bar"

3) I have table views that I want to be able to scroll horizontally too. Every table view has its title in what I called the "title bar"

As you can see in the second picture, what is inside the red rectangle is what needs to fixed. When I scroll horizontally, I want the bar to remain in place, with the titles of the table views moving smoothly and naturally.

What I'm doing now is using HEADER VIEWS for every table instead of using a special real bar, which absolutely does not serve my purpose.

What I want is a bar that shows the title and follows the tableviews I'm scrolling naturally, not a header view that is sticked to every tableview. Examples of what I want are Zite or Google Play Music on Android

Thank you for your time! If anyone has a question, a solution or any idea that can help, please share it. Thank you again!

Answer 1

My suggestion for you is the following:

Make the tableviews iside this scrollview (letscall it containerScrollView) without this header. Then, you create another scrollview (lets call it headerScrollView), and set the height of this headerScrollView to this height inside the red square, and also set its userInteractionEnabled to NO.

Now, for each tableView added to the containerScrollView, you add also a UIView containing those labels (club 1, club 2...). In the delegate method `scrollViewDidScroll', you get if the containerScrollView was scrolled, and programatically you scroll your headerScrollView to show different data.