Instagram Explorer SearchBar and TableView

Question

I have a question for several days about UISearchBar. I don’t understand how the search bar of Instagram Explorer page works, for example : http://imgur.com/40I38mn

I mean, at the beginning the ViewController shows the searchBar, and below a view(tableview?) which has nothing to do with it. And when the user begins a search by touching the search bar, the right tableview with data appears.

In reality, are there multiple TableView ? UISearchBar calls an another view ? And… simple UISearchBar or UISearchController ? I made a lot of research, tested many things, I even tried a tableView.hidden = true with if/else conditions so… you can see how much i’m disappointed Ahah.

Someone could explain to me the structure of the display, please ?

Answer 1

It looks to be a UISearchController whose search bar is placed within the header of a UICollectionView. The UICollectionView is the view you're referring to when you say "which has nothing to do with it".

Once the search's UITextField is accessed, the search functionality, or the right table view, then appears. This view seems to contain a UISegmentedControl.

A UISegmentedControl tutorial should help you setup a similar tab like effect. Here's a pretty good one that I've used in the past. Also, you could build a very similar User Interface using a UICollectionView that manages 2 sections. The first section containing your Tabs && the second containing the list of search results.

I've done some scouring for you, but I haven't found any tutorials or step by step break downs as to how you'd implement it. If you're very familiar with Table Views, I would recommend trying the UICollectionView approach. If not, the Segmented Control tutorial link should help you get started.

Good luck and I hope this helps

Correction (edit)

It appears that this question helps depict how you would add the UISegmentedControl to the UISearchController