More Clear cleverness: showing new screens

Feb 16, 2012 10:06 · 415 words · 2 minute read iOS tableViews

Another trick of the Clear app is the way that it takes the established pull-to-refresh interaction of a table view, and extends it to present new screens. So pulling the to-do items table down will first add a new item at the top of the table, then causes the lists table to slide down from the top.

Doing the same in the Lists table results in the Settings table appearing in the same way. The reverse is also true - pulling the table “up” from the bottom will result in the previous screen sliding up from the bottom.

This works by exploiting a property of UIScrollView, from which UITableView inherits. The contentOffset property measures how far from the top of its frame the table has been scrolled - it’s measured in pixels, so if a 1000-pixel tall tableView was scrolled halfway, the contentOffset would be 500px.

The trick here is that the contentOffset can also be negative - which occurs when the tableView’s contents are dragged down from the top to leave a gap. Often this triggers the pull-to-refresh methods, but in Clear’s case it’s the cue for new views to be presented.

To catch the user pulling the table down in this way, you can use the scrollViewDidEndDragging:willDecelerate: method which gets called when the user lifts their touch after dragging the table around.

If you check the tableView’s contentOffset at this point and discover that it’s more than, say, minus 60 pixels, you can use that to trigger another method - be it calling a data update, or pushing in new views. An example might look something like this:

{% gist 1843757)

Detecting a pull at the bottom of the table is similar - instead of looking for a negative contentOffset, though, you need to detect a contentOffset that’s greater than the tableView’s contentSize.

Again, you’ll need to apply a threshold to this to prevent the new view or whatever being presented as a result of a ‘normal’ scroll action. If the tableView is flicked to the bottom, the contentOffset will exceed the contentSize as the table “bounces”.

What Clear seems to do is have three tableViews loaded at any given time, and then change their frames in a UIView animation block to animate them sliding from the top and bottom of the screen.

It’s clever, although it does rely on the user discovering these interactions - there’s no obvious call-to-action as there would be in the case of a “back” button, for example.