Instagram Explorer SearchBar and TableView

问题

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 ?

回答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

回答2:

My solution is composed of many other SO posts, and of the official Apple documentation. It creates a view with a search bar in the UINavigationBar (so you need your NavigationController to be embeded, but you may change some line to avoid this). You can then select this SearchBar and it will dim the ViewController, then after typing some search it will autocomplete, and when tapping SearchButton start the actual search.

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's search bar within the table's header view
    navigationItem.titleView = searchController.searchBar

    definesPresentationContext = true
}

Then the other fonction is the one who is called when the text in the searchbar is modified :

   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() do the autocomplete, and then load the results when the user press search, so I have this last fonction :

    func searchBarSearchButtonClicked(searchBar: UISearchBar) {

    if let search = searchController.searchBar.text {
            // Load your results in searchResultTVC
        }
}

回答3:

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

来源：https://stackoverflow.com/questions/31776376/instagram-explorer-searchbar-and-tableview

标签

swift

uitableview

uisearchbar

instagram