Instagram 探索搜索栏和表格视图答案

【问题标题】：Instagram Explorer SearchBar and TableViewInstagram 探索搜索栏和表格视图
【发布时间】：2015-08-02 20:42:01
【问题描述】：

我有几天关于 UISearchBar 的问题。我不明白 Instagram Explorer 页面的搜索栏是如何工作的，例如：http://imgur.com/40I38mn

我的意思是，一开始 ViewController 显示了 searchBar，下面是一个与它无关的视图（tableview？）。当用户通过触摸搜索栏开始搜索时，会出现带有数据的右侧表格视图。

实际上，有多个 TableView 吗？ UISearchBar 调用另一个视图？还有……简单的 UISearchBar 或 UISearchController ？我做了很多研究，测试了很多东西，我什至在 if/else 条件下尝试了 tableView.hidden = true 所以……你可以看到我有多失望啊哈。

谁能给我解释一下显示器的结构？

【问题讨论】：

我想知道完全相同的事情，开始赏金

标签： swift uitableview uisearchbar instagram

【解决方案1】：

它看起来是一个UISearchController，其搜索栏 位于UICollectionView 的标题中。 UICollectionView 是您说“与它无关”时所指的视图。

一旦访问搜索的UITextField，就会出现搜索功能或右表视图。此视图似乎包含UISegmentedControl。

UISegmentedControl 教程应该可以帮助您设置类似的标签效果。 Here's 一个我过去用过的相当不错的。此外，您可以使用管理 2 个部分的UICollectionView 构建一个非常相似的用户界面。第一部分包含您的标签 && 第二部分包含搜索结果列表。

我已经为你做了一些搜索，但我没有找到任何教程或分步分解来说明你将如何实现它。如果您对表格视图非常熟悉，我建议您尝试UICollectionView 方法。如果没有，分段控制教程链接应该可以帮助您入门。

祝你好运，我希望这会有所帮助

更正（编辑）

this 问题似乎有助于描述如何将UISegmentedControl 添加到UISearchController

【讨论】：

感谢您的回答，我将在本周晚些时候深入研究并提供更多反馈
我找到了一个部分解决方案，但还没有完全实现，所以我不确定一切都会按预期工作。我把它放在一个答案中，请检查它@Chrishaze

【解决方案2】：

我的解决方案由许多其他 SO 帖子和 Apple 官方文档组成。它在 UINavigationBar 中创建一个带有搜索栏的视图（因此您需要嵌入 NavigationController，但您可以更改某些行以避免这种情况）。然后你可以选择这个 SearchBar，它会使 ViewController 变暗，然后在输入一些搜索后它会自动完成，并在点击 SearchButton 时开始实际搜索。

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
}

那么另一个函数就是当搜索栏中的文本被修改时被调用的函数：

   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)

}

我的选择是让 updateSearchResultsForSearchController() 自动完成，然后在用户按下搜索时加载结果，所以我有最后一个功能：

    func searchBarSearchButtonClicked(searchBar: UISearchBar) {

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

【讨论】：

【解决方案3】：

我认为首先是 UISearchBar，然后下面的内容可能是一种 UISegementedControl，当您点击它时，首先会更改对帐户名称或主题标签（Tab“Top”）的搜索，人们用他们的名字（标签“人”）等...

【讨论】：