How to add refresh control to collection view large titles navigation bar in iOS 11?

Question

According to Apple the refresh control should be part of the large title navigation bar in iOS 11.

The refresh control is part of the navigation bar (on pull to refresh) when I enabled the refresh control in my storyboard for a UITableViewController.

I can not do this in storyboard for all other views like UICollectionViewController. When I add a refresh control in code as a subview it is not part of the navigation bar:

refreshControl = UIRefreshControl()
collectionView?.addSubview(refreshControl)

It looks like this though:

How can I add a refresh control to my custom scroll view like UICollectionViewController in such a way that the refresh control is displayed in the navigation bar when large titles is used?

Hokeypokey

Add whole view to the UIScrollView and then add UIRefreshControl as a subview of scrollView – Thickwitted

So the trick is to add the UIRefreshControl not as a subview of UICollectionView but as a subview of UIScrollView? – Hokeypokey

Oh I see UICollectionView is already a UIScrollView – Hokeypokey

Thats the point :) – Thickwitted

So I am doing it the right way. Why does it not work then? I added an image above demonstrating how it looks. – Hokeypokey

Answer 1

As of iOS 10, UITableView and UICollectionView has refreshControl property.

So, instead of:

tableView.addSubview(refreshControl)

you do:

tableView.refreshControl = refreshControl

and this should work for new big headers in iOS 11.

Marriageable

I did not know this was added in iOS 10. Thank you for showing me! Works perfectly! – Hokeypokey

Note that this will work correctly only if the table view controller is set to extend up behind the navigation bar. I had my table view not extending behind the navigation bar and got a humungous mess. – Agrestic

@Agrestic hmm, never tried it that way. Thanks for mentioning it, I'll try it as I'm curious about the mess :D – Marriageable

I couldn't get it to work with a regular UIViewController that has a full screen tableView (no difference from a UITableViewController, just more controllable). The refresh control just spergs out. I had to add an empty view behind the table so I would get the old functionality back. – Tradeswoman

It's worth noting that the refreshControl property is actually on UIScrollView, the superclass of both UITableView and UICollectionView – Capitalist

@Agrestic What did you do to get rid of the humungous gap above the large title when using the refresh controller? – Tuchman

@AaronBratcher Basically this is probably due to your not doing the underlap of the table view beneath the navigation bar correctly. You could pose a separate question if you want more detailed help. – Agrestic

@Agrestic I am having tableview which is not directly under navigation bar. There is a search field in between. So How can I set refresh control to this tableview? Also my navigation bar has customised height(around 100pt) – Jurat

dude one year since we're trying to do something like this, I owe you a beer – Revive

Answer 2

EDIT: The documentation has been updated at some point, and below information is not longer true.

As specified by Apple in UIRefreshControl documentation.

Note Because the refresh control is specifically designed for use in a table view that's managed by a table view controller, using it in a different context can result in undefined behavior.

If your VC is a UITableViewController it will work exactly like in system apps.

Stupefacient

You saved my day ! I didn't understand why I had a glitchy behaviour on the refresh control. It was because my controller was a UIViewController and not a UITableViewController. Now it works like a charm ! – Suazo

Where does it say this exactly? – Bodhisattva

This is no longer true, according the UIRefreshControl Documentation – Courtroom

This still appears to be the case. Using a regular UIViewController with a table view results in a glitchy/flickering refresh control. Using a UITableViewController fixes the issue. Documentation changed but the "undefined behavior" persists. – Eupheemia

Answer 3

In my case, I wanted to have UIView under UITableView, so UITableView wasn't first subview of view controller's view.

To fix this, I changed order of UITableView and other UIView

from

to

Now I just set zPosition of my view to lower value than UITableView's zPosition which should make my view look like it is "under" UITableView

myView.layer.zPosition = -1

Rickets