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

Posted 2023-02-27

【中文标题】TableView 上方的浮动/固定搜索栏 - Swift 3

【英文标题】：Floating/fixed search bar above TableView - Swift 3

【发布时间】：2017-08-04 12:46:20

【问题描述】：

我遇到了许多其他用户在 *** 上提出的问题（例如：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 抱歉，这可能是一个愚蠢的问题，但它不是我在界面构建器中的视图控制器的子视图（参见我帖子中的屏幕截图）吗？

【参考方案1】：

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

tableView.tableHeaderView = searchController.searchBar

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

【参考方案2】：

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

self.edgesForExtendedLayout = UIRectEdgeNone;  

并摆脱

tableView.tableHeaderView = searchController.searchBar

【讨论】：

感谢您的回答！但这没有用。 UIRectEdgeNone 在 Swift 3 中不起作用，所以我只用 [] 代替（根据***.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)