Pull Down Table Views

2 min readAug 15, 2016

We often see a design where a user pulls down a scrollable view so to reveal another view. Something like this,

Our product team wanted this effect in our detail pages. Of course we did it, that gif is from our app detail pages. So heres what we did to get this right…

Lets Begin

Since the detail pages have a lot of content so we picked up the UITableView so we could reuse the cells.

The Pull Down Table View

So lets create lazy table view and set up its .dataSource and .delegate properties. Here we init the pullDownTableView with the size of the view controllers view, so that the table view takes the complete space on the controllers view.

Add the table view to the controller and set the background colors to contrasting colors.

Making The Underlying View Visible

To make the view below the table view we exploit the contentInset and contentOffset properties of the UIScrollView. On viewDidLayoutSubViews we configure the insets and the offsets.

Now run the app and we would see the background view as well as the table view.

Fallback Of Unwanted Touches

As we note that the table view is handling the touches events on the background view. We dont need this. We want these touches to be handled by the underlying views hence we need to create a custom UITableView class to make sure these touches are not handled by the table view.

Set the type for the pullDownTableView from UITableView to TableView. Run the app and now you will notice that touces outside the content view are passed back to the underlying views and now our table view does not respond to such touches.

Springing Content View

Now lets add a sping like behaviour to our content view. We do this in scrollViewWillEndDragging. We define the threshold to half content view’s height that is visible on initial load.