TableView 上方的浮动/固定搜索栏 - Swift 3答案

【问题标题】：Floating/fixed search bar above TableView - Swift 3TableView 上方的浮动/固定搜索栏 - Swift 3
【发布时间】：2017-08-04 12:46:20
【问题描述】：

我遇到了许多其他用户在 StackOverflow 上提出的问题（例如：1、2、3）。

我希望在滚动表格视图时有一个固定搜索栏。我最初有一个UITableViewController，顶部有一个UISearchBar。

大多数解决方案建议我应该有一个UIViewController，下面有一个UISearchBar 和一个UITableView。我正是这样做的。下面是我的界面生成器的截图。

这个解决方案并没有解决它，但是 :( 搜索栏仍然不浮动，滚动时它会隐藏在导航栏后面。

我也尝试过this solution，但我宁愿在导航栏中没有搜索栏。

这是我所有的 TableView 或 Search 相关代码（我删除了所有不相关的内容）：

class NumberSelectorViewController: UIViewController, UITableViewDataSource, UITableViewDelegate, UISearchBarDelegate, UISearchControllerDelegate {

    @IBOutlet var searchBar: UISearchBar!
    @IBOutlet var tableView: UITableView!

    let searchController = UISearchController(searchResultsController: nil)

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.delegate = self
        tableView.dataSource = self

        searchController.searchResultsUpdater = self as UISearchResultsUpdating
        searchController.dimsBackgroundDuringPresentation = false
        definesPresentationContext = true

        // NOTE: Removing thie line removes the search bar entirely.
        tableView.tableHeaderView = searchController.searchBar

        addCancelButton()

    }

    // MARK: - Table view data source

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if isSearching() == true {
            return filteredNumberList.count
        }
        return NumberList.count
    }


    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "numberCell")! as UITableViewCell

        if isSearching() == true {
            cell.textLabel?.text = filteredNumberList[indexPath.row].NumberName
        } else {
            cell.textLabel?.text = NumberList[indexPath.row].NumberName
        }
        return cell
    }

    // MARK: - Table view delegate

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
        if isSearching() == true {
            selectedNumber = filteredNumberList[indexPath.row]
        } else {
            selectedNumber = NumberList[indexPath.row]
        }
        performSegue(withIdentifier: "someSegue", sender: self)
    }

    // MARK: Searching

    func filterContentForSearchText(searchText: String, scope: String = "All") {
        filteredNumberList = NumberList.filter({ (Number) -> Bool in
            return (Number.NumberName?.lowercased().contains(searchText.lowercased()))!
        })

        tableView.reloadData()
    }

    // MARK: Search Bar

    func isSearching() -> Bool {
        return (searchController.isActive && searchController.searchBar.text != "")
    }

    func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {
    }

    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        filteredNumbersList.removeAll()
    }

    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
        self.tableView.reloadData()
    }

    extension NumberSelectorViewController: UISearchResultsUpdating {
        public func updateSearchResults(for searchController: UISearchController) {
            filterContentForSearchText(searchText: searchController.searchBar.text!)
        }

        func updateSearchResultsForSearchController(searchController: UISearchController) {
            filterContentForSearchText(searchText: searchController.searchBar.text!)
        }
    }
}

【问题讨论】：

不要将搜索栏添加为表头，这就是它浮动的原因 - 在您的视图控制器中将其添加为 self.view 的子视图，或者在界面生成器中执行此操作
@mag_zbc 抱歉，这可能是一个愚蠢的问题，但它不是我在界面构建器中的视图控制器的子视图（参见我帖子中的屏幕截图）吗？

标签： ios swift uitableview tableview uisearchbar

【解决方案1】：

我真的找到了答案。问题只是我有这条线：

tableView.tableHeaderView = searchController.searchBar

我删除了这个，然后搜索栏消失了，但它只是隐藏在导航栏后面！所以我玩弄了界面构建器上的限制，现在它可以正常工作了:)

【讨论】：

【解决方案2】：

您似乎已正确地将搜索栏添加到您的视图中，它只是隐藏在导航栏下。试试viewDidLoad

self.edgesForExtendedLayout = UIRectEdgeNone;

并摆脱

tableView.tableHeaderView = searchController.searchBar

【讨论】：

感谢您的回答！但这没有用。 UIRectEdgeNone 在 Swift 3 中不起作用，所以我只用 [] 代替（根据stackoverflow.com/questions/40315841/… 的问题）。同样有趣的是，导航栏是深灰色的......
你使用UINavigationController吗？
我愿意，它嵌套在 UINavigationController 中。
试试self.navigationController?.navigationBar.isTranslucent = false
我没有尝试您的最新代码，但感谢您，我实际上修复了它，您是对的。搜索栏隐藏在导航栏下方。我玩弄了约束并且它有效。 :)

【解决方案3】：

您不需要在 tableView 或其标题中添加 searchBar。

在您的 viewDidLoad 方法中，您可以提供 Edge Inset，以便 tableView 中的内容不会被 searchBar 重叠

override func viewDidLoad() {
    super.viewDidLoad()

    let edgeInsets = UIEdgeInsetsMake(52, 0, 0, 0)
    self.tableView.contentInset = edgeInsets
    self.tableView.register(UINib(nibName: "AbcCell", bundle: nil), forCellReuseIdentifier: "AbcCell")

}

以下是我如何将其放置在我的一个项目中的图像并且它不会浮动。

【讨论】：

【解决方案4】：

另一个视图，例如，您可以将其放置在任何地方

anyView.addSubview(searchController.searchBar)

【讨论】：