如何在导航栏下隐藏搜索栏并在用户下拉表格视图时显示它？

Posted 2023-03-14

【中文标题】如何在导航栏下隐藏搜索栏并在用户下拉表格视图时显示它？

【英文标题】：How to hide searchBar under navigation bar and show it when user pull the tableView down?

【发布时间】：2017-09-20 20:28:40

【问题描述】：

在我的应用程序中，我想在 tableView 上方实现 searchBar，它将隐藏在导航栏下。当用户拉下 tableView 时，我想显示 searchBar。请告诉我如何快速实现这一目标。谢谢！！ enter image description here

【参考方案1】：

设置搜索控制器后，只需让表格视图或集合视图滚动到第一行。

override func viewDidLoad() 
  super.viewDidLoad()
  
  navigationItem.searchController = searchController
  
  tableView.scrollToRow(
    at: .init(row: 0, section: 0),
    at: [.bottom, .left],
    animated: false
  )

【参考方案2】：

在 AppDelegate.swift 中使用 UINavigationController 设置 rootViewController。

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool 
        // Override point for customization after application launch.
        window = UIWindow(frame: UIScreen.main.bounds)
        window?.makeKeyAndVisible()
        window?.rootViewController = UINavigationController(rootViewController: ViewController())

        return true
    

然后在 ViewController.swift 中，通过正确实现 UITableViewDataSource 和 UITableViewDelegate 方法来添加 TableView。 然后，声明 UISearchController 并将其添加到 tableHeaderView 而不是添加为子视图。然后，设置 tableView 的内容偏移量，以便默认隐藏 searchController。当tableView向下滚动时，只显示searchBar。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource 

    private var myData: NSArray = ["One", "Two", "Three"]

    private var tableView: UITableView!

    //lazy var searchBar:UISearchBar = UISearchBar()

    override func viewDidLoad() 
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        navigationItem.title = "Home"

        tableView = UITableView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height))

        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "MyCell")
        tableView.dataSource = self
        tableView.delegate = self

        self.tableView.backgroundColor = .brown

        let searchBarController: UISearchController = UISearchController(searchResultsController: nil)

        tableView.tableHeaderView = searchBarController.searchBar

        tableView.setContentOffset(CGPoint.init(x: 0, y: 44), animated: false)

        self.view.addSubview(tableView)

    

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) 
        print("\(indexPath.row)")
    

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int 
        return myData.count
    

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
        let cell = tableView.dequeueReusableCell(withIdentifier: "MyCell", for: indexPath)
        cell.textLabel?.text = myData[indexPath.row] as! String
        cell.backgroundColor = .brown
        return cell
    

    override func didReceiveMemoryWarning() 
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    

应用程序第一次启动时，searchBar 是隐藏的，只显示 tableView：

tableView向下滚动后，出现searchBar：

【讨论】：

谢谢@bthapa ！！我能够实现相同的功能，您能否解释一下当点击搜索栏文本字段时，如何将搜索栏推到导航栏上并带有取消按钮

为此，您需要添加两个 UISearchBarDelegate 方法，即 searchBarSearchButtonClicked(_ searchBar: UISearchBar) 和 searchBarCancelButtonClicked(_ searchBar: UISearchBar)。当点击 searchBar 时，使用 UINavigationBarController 中已经定义的 setNavigationBarHidden() 隐藏导航栏。这是我如何简单地完成它的完整源代码的链接。 github.com/bthapa4791/TableViewWithSearchBarController

非常感谢@bthapa。我遵循了该方法，但是当我单击 searchBarSearchButtonClicked 时，导航隐藏，但 searchBar 未显示在导航栏上。当点击 searchBarSearchButtonClicked 我在做 navigationBarHidden = true，请看附件截图。谢谢！！

【参考方案3】：

我可以用这段代码隐藏搜索栏

 let searchController = UISearchController(searchResultsController: nil)

override func viewDidLoad() 
    super.viewDidLoad()

    self.searchbar()
    self.automaticallyAdjustsScrollViewInsets = false
    tableView.contentInset = UIEdgeInsets.zero
    tableView.tableHeaderView = searchController.searchBar
    //Hide SearchBar
    tableView.setContentOffset(CGPoint.init(x: 0, y: 44), animated: false)
  

func searchbar() 
    searchController.searchResultsUpdater = self as UISearchResultsUpdating
    searchController.dimsBackgroundDuringPresentation = false
    definesPresentationContext = true

  

【参考方案4】：

若要最初隐藏searchBar，只需设置navigationItem.searchController 属性在您的表格视图（或集合视图）已填充数据。