【问题标题】: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

【问题讨论】:

    标签: ios swift3 uisearchbar


    【解决方案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 属性您的表格视图(或集合视图)已填充数据。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-05-30
          • 2018-04-16
          • 1970-01-01
          • 1970-01-01
          • 2017-03-12
          • 1970-01-01
          相关资源
          最近更新 更多