Instagram Explorer SearchBar and TableView

Question

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

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

In fact, are there multiple TableViews? Does a UISearchBar call another view? And ... a simple UISearchBar or UISearchController? I researched a lot, tested a lot, even tried tableView.hidden = true with if / else conditions, so ... you can see how much I disappointed Ahah.

Can someone explain the display structure to me please?

Answer 1

It looks like a UISearchController , whose search string is placed in the header of the UICollectionView . UICollectionView is the view that you talk about when you say "that has nothing to do with it."

After accessing the UITextField search, a search function or the appearance of the right table appears. This view seems to contain a UISegmentedControl .

Tutorial

A UISegmentedControl should help you configure a similar tab as an effect. Here is a pretty good one that I used in the past. In addition, you can create a very similar user interface using the UICollectionView , which manages two sections. The first section containing your tabs && & the second contains a list of search results.

I did some cleaning for you, but I did not find any lessons or phased breakdowns of how you implement it. If you are familiar with table views, I would recommend trying the UICollectionView approach. If not, a link to the Segmented Control course will help you get started.

Good luck and I hope this helps

Correction (change)

This question seems to help describe how to add a UISegmentedControl to a UISearchController

Answer 2

My solution consists of many other SO posts and Apple official documentation. It creates a view with a search bar in the UINavigationBar (so you need your navigation controller to be embedded, but you can change some lines to avoid this). Then you can select this SearchBar, and it will be a dull ViewController, then after entering some search it will be autocomplete, and when you click SearchButton the actual search will begin.

 class ViewController: UISearchResultsUpdating, UISearchControllerDelegate, UISearchBarDelegate { //Our SearchController var searchController: UISearchController! override func viewDidLoad() { super.viewDidLoad() let src = SearchResultTVC() //A simple UiTableViewController I instanciated in the storyboard // We instanciate our searchController with the searchResultTCV (we he will display the result searchController = UISearchController(searchResultsController: src) // Self is responsible for updating the contents of the search results controller searchController.searchResultsUpdater = self self.searchController.delegate = self self.searchController.searchBar.delegate = self // Dim the current view when you sélect eh search bar (anyway will be hidden when the user type something) searchController.dimsBackgroundDuringPresentation = true // Prevent the searchbar to disapear during search self.searchController.hidesNavigationBarDuringPresentation = false // Include the search controller search bar within the table header view navigationItem.titleView = searchController.searchBar definesPresentationContext = true } 

Then another direction is the one that gets called when the text in the search bar changes:

  func updateSearchResultsForSearchController(searchController: UISearchController) { // If dismissed then no update if !searchController.active { return } // Write some code for autocomplete (or ignore next fonction and directly process your data hère and siplay it in the searchResultTCV) } 

My choice is to leave updateSearchResultsForSearchControlller () to autofill, and then load the results when the user clicks on the search, so I have the last consequence:

  func searchBarSearchButtonClicked(searchBar: UISearchBar) { if let search = searchController.searchBar.text { // Load your results in searchResultTVC } } 

Answer 3

I think that at first there is a UISearchBar, and then what is below it can be a kind of UISegementedControl, and when you click on it, first change the search for the account name or hashtag (Top tab), people with their name ( Tab "People"), etc.