Working on na iOS app I had to solve a interesting UI problem. The screen had to contain a
UITableView with a header. The header should not have been visible when the screen was displayed. In fact the header should not have been visible when the user just scrolled the
UITableView up and down, it only had to become visible when the user “dragged” the
UITableView down, similar to doing pull to refresh. Scrolling the
UITableView then hides the header again.
To better imagine the requirements, take a look at this animation
Notice that you see that the header is there but I have to really drag the
UITableView to make it visible. It then disappears when I scroll the
I read Apple documentation and found two properties of
UITableView (coming from
UIScrollView) that might help with that,
contentInset. There is a great article by Lucas Louca explaining the details and differences.
contentOffset may help you with not showing the header when the
UITableView is displayed by basically scrolling it so the header is not visible. The
contentOffset represents the scroll position of the
contentOffset.y is vertical scroll position and
contentOffset.x is horizontal scroll position. But this does not help with the rest of the requirements so this is not a way to go. The way to go is using the
By using the
contentInset property you can affect the scrollable area of the
UITableView. You can inset the scrollable area top by the height of the header so it is off the screen and you can never scroll to it
It remains visible when the
UITableView bounces. This gives the users a visual clue that something is there and they might try to scroll to it.
Now we need to detect that the user dragged the
UITableView to see the whole header. It corespondents to the user scrolling the
UITableView down so far that the vertical scroll position represented by
contentOffset.y is less than zero. When that happens we just reset the
contentInset.y back to
0. This makes the
UITableView behave like a standard
UITableView with a header.
The last step is switching back to the initial states when the user scrolls and the header comes out of view. Again, we check the vertical scroll position represented by the
contentOffset.y property and when it is more that the header height, we inset the
The best place for both checks seems to be the
scrollViewWillBeginDecelerating method, making the changes while the scroll is still in progress.