Using the background of a UITableView as a scroll indicator


There is a fancy solution to present the scrolling position of a tableview to the user using moving image as a background. The user can better imagine the size of the table view because the background image suggest where he/she is in the tableview.

How-To – short version

  1. Add a tableview
  2. create a scrollview with an imageview which size and contentSize is the same as the tableview
  3. add the scrollview as a background view of the tableview
  4. set the tableview to transparent
  5. Good To Know: the TableView is a ScrollView so you can handle all ScrollViewDelegate related methods. Just simply implement the ScrollView delegate methods where you implemented the TableViewDelegate methods: catch the tableview’s scrolling event and position the scroll position of the background scrollview accordingly

How-To – detailed version

The sample source uses ARC.

First, in the ViewDidLoad of your ViewController load the appropriate image, create an image view which presents it  and add the ImageView as the subview of your ScrollView:

 

Second, set the ScrollView as the backgroundView of your tableView:

Third, don’t forget to set the background color of the cells to clearColor if you use the tableView in grouped mode:

Fourth implement the appropriate ScrollViewDelegate method of the TableView (scrollViewDidScroll). Notice that I modified the parameter to UITableView instead of UIScrollView. This is not necessary but makes to code more clear and you don’t have to cast a lot. We should calculate the correct position by the proportion of the contentSize of the TableView and the ScrollView.

 

Notes: The image should be long enough to see the correct effect.

If you put a frame around your content you should play with margins and spacings:  you have to set up a header and footer and indent of each cell.

If you use sections take care of indenting the sections as well. You can achieve by implementing the  tableView:viewForHeaderInSection and return a UIView which contains a UILabel indenting appropriately.

You can set a semitransparent background color for each cell and/or you can use a faded image.

Download the sample project:

TableViewAutoScrollingBackground.zip