Search code examples
iosobjective-cuitableviewuisearchdisplaycontrolleruirefreshcontrol

Refresh Control with Search Display Controller appears overtop the Search Bar

I have implemented a simple Table View Controller with a Search Display Controller dragged out via Interface Builder. I then enabled refreshing so that a Refresh Control is visible when the user pulls down to refresh.

The problem is, the spinner is visible on top of the search bar when it should lie underneath it.

I know the cause is the Minimal Search Style. If you use the default Prominent style, the issue doesn't exist.

When you slowly pull down you'll see the first line appear overtop the search bar like so: enter image description here

If you keep pulling it does show up in the location you expect, but if you push the view back up while it's still refreshing you'll see the spinner on top of the search bar like so: enter image description here

As soon as you push it up so that the spinner touches the first section header, the spinner immediately disappears.

This is how it is supposed to look, like it does in Mail - underneath the search bar: enter image description here

I tried to fix the problem by simply making the spinner lie underneath the search bar so that it would never appear overtop, but that did not work. Oddly enough, that code caused the spinner to not be visible in the gray area above the table and if you push it up it appears overtop the search bar - exactly opposite of what I would expect. Here is that code:

self.refreshControl.layer.zPosition = self.searchDisplayController.searchBar.layer.zPosition - 1;

How can I prevent the spinner appearing on top of the search bar when using the Minimal style?

Solution

  • This seems to be a bug with the Minimal Bar Style. If you set it to Prominent you won't experience the issue. If you use Prominent and try to remove the background, you'll also experience this issue. The only workaround I've found is to try to mimic the Minimal style with the Prominent style applied.