Continue alternating row colors in the "bounce area" of a UITableView

Question

In Weather.app on iPhone, scrolling past the bounds of the Hourly tableview continues to show the alternating table cells, just without any text inside of them (see image below). I was wondering how I could replicate this look. This question provides one solution, but I was hoping there was a more efficient way then just adding an image of blank cells above my tableview.

Thanks

Answer 1

You can use the headerView and footerView properties of the UITableView. These allow you to specify custom UIViews that will be placed before and after your content cells.

So, you should initialize a UIView with some dummy inner views with alternating colors. The height for this UIView should be equal to tableView.frame.size.height. then just do:

tableView.headerView = headerViewWithFakeColors;
tableView.footerView = footerViewWithFakeColors;

Also, you will also need to change the contentInset property so that these fake header&footer views are only visible when the user is bouncing (with contentInset you can control the point where the tableview starts bouncing)

tableView.contentInset = UIEdgeInsetsMake(headerViewWithFakeColors.frame.size.height, 0, -footerViewWithFakeColors.frame.size.height, 0);