以编程方式显示UISearchController的搜索栏 [英] Display UISearchController's searchbar programmatically

问题描述

注1：此问题涉及在更新的表格视图之外添加UISearchController的搜索栏 - 而不是作为表格视图的标题。

Note 1: This question pertains to adding a UISearchController's search bar outside of the table view it updates - NOT as the table view's header.

注2：一些反复试验让我找到了解决方案。请参阅下面的答案。

Note 2: Some trial and error led me to a solution. Please see my answer below.

我是iOS新手开发和我正在努力使用UISearchController类。我有一个视图控制器，在我的视图控制器视图中，我打算在表视图上方有一个搜索栏。我希望搜索栏链接到UISearchController。由于界面构建器没有UISearchController，我以编程方式添加控制器。在实例化UISearchController之后，我尝试以编程方式将搜索控制器的搜索栏添加到我的视图中但尚未成功。我已经尝试设置搜索栏的框架并给它自动布局约束，但这两种方法都没有对我有用（即当我运行应用程序时，什么都没有出现）。这是我尝试过的最新代码：

I am new to iOS development and am struggling to work with the UISearchController class. I have a view controller, and in my view controller's view, I plan to have a search bar above a table view. I would like the search bar to be linked to a UISearchController. Since interface builder does not come with a UISearchController, I am adding the controller programmatically. After instantiating a UISearchController, I have tried to add the search controller's search bar to my view programmatically but have not been successful. I have tried setting the search bar's frame and giving it autolayout constraints, but neither approach has worked for me (i.e. when I run the app, nothing appears). Here is the latest code I have tried:

    let searchController = UISearchController(searchResultsController: nil)

    // Set the search bar's frame
    searchController.searchBar.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 50)

    // Constraint to pin the search bar to the top of the view
    let topConstraint = NSLayoutConstraint(item: searchController.searchBar, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Top, multiplier: 1, constant: 0)
    searchController.searchBar.setTranslatesAutoresizingMaskIntoConstraints(false)

    self.view.addSubview(searchController.searchBar)

    self.view.addConstraint(topConstraint)

任何帮助都将不胜感激！谢谢！

Any help would be greatly appreciated! Thank you!

编辑：只使用其中一个设置搜索栏的框架或者给它自动布局约束（而不是组合两者）正如我最初尝试的那样）起初似乎起作用，但在点击搜索栏后，你会遇到Dwight所指出的问题。我已经离开了这些案例的代码，以防它与您目前的情况相比有所帮助，但是对于一个有效的解决方案，请参阅下面的答案。

Using only one of either setting the search bar's frame or you giving it autolayout constraints (as opposed to a combination both as I initially tried) appears to work at first, but after tapping on the search bar you will have issues as pointed out by Dwight. I've left the code for these cases in case it's helpful to compare to what you currently have, but for a working solution see my answer below.

使用自动布局约束：

    let searchController = UISearchController(searchResultsController: nil)

    let topConstraint = NSLayoutConstraint(item: searchController.searchBar, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Top, multiplier: 1, constant: (statusBarHeight + navigationBarHeight!))
    let leftConstraint = NSLayoutConstraint(item: searchController.searchBar, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Left, multiplier: 1, constant: 0)
    let rightConstraint = NSLayoutConstraint(item: searchController.searchBar, attribute: NSLayoutAttribute.Right, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Right, multiplier: 1, constant: 0)
    let heightConstraint = NSLayoutConstraint(item: searchController.searchBar, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 44)
    searchController.searchBar.setTranslatesAutoresizingMaskIntoConstraints(false)

    searchController.searchBar.addConstraint(heightConstraint)

    self.view.addSubview(searchController.searchBar)

    self.view.addConstraints([topConstraint, leftConstraint, rightConstraint])

我将topConstraint常量设置为状态栏的高度加上导航栏的高度，因为我的视图控制器嵌入在导航控制器中。

I've set the topConstraint constant to the height of the status bar plus the height of the navigation bar, as my view controller is embedded in a navigation controller.

调整框架：

    let searchController = UISearchController(searchResultsController: nil)

    searchController.searchBar.frame = CGRect(x: 0, y: (statusBarHeight + navigationBarHeight!), width: self.view.frame.size.width, height: 44)

    self.view.addSubview(searchController.searchBar)

推荐答案

经过多次试验和错误，我得到了以下工作解决方案：

After some more trial and error, I have the following working solution:

1. 打开Main.storyboard并向视图控制器添加一个高度为44的UIView（UISearchBar的默认高度）和一个UITableView。设置自动布局约束，以便将UIView固定到两侧和顶部布局指南（使用顶部布局指南确保无论视图控制器是否嵌入在导航控制器中，这都将起作用）并且表视图固定为双面，底部布局指南，顶部固定在UIView的底部。


2. 在ViewController.swift中将UIView和UITableView连接为IBOutlets。在我的项目中，我将它们称为topView和tableView。


3. 在ViewController.swift的顶部声明一个搜索控制器： var searchController：UISearchController！



4. 然后，在viewDidLoad（）中，您将需要：

1. Open up Main.storyboard and add to your view controller a UIView with height 44 (default height of a UISearchBar) and a UITableView. Set the autolayout constraints so that the UIView is pinned to the two sides and to the top layout guide (using the top layout guide ensures this will work whether or not your view controller is embedded in a navigation controller) and the table view is pinned to the two sides, the bottom layout guide, and its top pinned to the bottom of the UIView.
2. Connect the UIView and UITableView as IBOutlets in your ViewController.swift. In my project, I called them topView and tableView.
3. Declare a search controller at the top of your ViewController.swift: var searchController: UISearchController!

4. Then, in viewDidLoad(), you will need:

// Initialize and set up the search controller
self.searchController = UISearchController(searchResultsController: nil)
self.searchController.searchResultsUpdater = self
self.searchController.dimsBackgroundDuringPresentation = false // Optional
self.searchController.searchBar.delegate = self

// Add the search bar as a subview of the UIView you added above the table view
self.topView.addSubview(self.searchController.searchBar)
// Call sizeToFit() on the search bar so it fits nicely in the UIView
self.searchController.searchBar.sizeToFit()
// For some reason, the search bar will extend outside the view to the left after calling sizeToFit. This next line corrects this.
self.searchController.searchBar.frame.size.width = self.view.frame.size.width

这应该是它！当然，您需要将视图控制器设置为UITableViewDatasource，UITableViewDelegate，UISearchBarDelegate，UISearchControllerDelegate和UISearchResultsUpdating，并且还要处理所有必需的委托方法，但就搜索栏而言，这对我有用。如果您有任何问题，请发表评论。

This should be it! Of course, you'll need to make your view controller a UITableViewDatasource, UITableViewDelegate, UISearchBarDelegate, UISearchControllerDelegate, and UISearchResultsUpdating and take care of all required delegate methods as well, but as far as the search bar goes, this has worked for me. Please comment if you have any issues.

这篇关于以编程方式显示UISearchController的搜索栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！