使用UISearchController在Navigationbar中实现搜索栏

Question

我已经使用以下代码使用UISearchController实现了searchBar-

var searchController = UISearchController(searchResultsController: nil)
searchController.searchResultsUpdater = self
searchController.obscuresBackgroundDuringPresentation = false
searchController.searchBar.placeholder = "Search here..."
definesPresentationContext = true
searchController.searchBar.delegate = self
searchController.searchBar.sizeToFit()
if #available(iOS 11.0, *) {

self.navigationItem.searchController = searchController
} else {
// Fallback on earlier versions
navigationItem.titleView = searchController.searchBar
navigationItem.titleView?.layoutSubviews()
}

现在我有两个问题

1. SearchBar位于navigationBar的下方（请参见下图），如何在使用UISearch bar实现searchBar时将searchBar置于NavigationBar的顶部。

2. 取消按钮没有出现在搜索栏的右侧。

Answer 1

我认为您无法在本地执行此操作。 但是，您可以在打开菜单时激活搜索栏（不要忘记将searchController.hidesNavigationBarDuringPresentation设置为true ）：

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    searchController.isActive = true
}

但是它将隐藏UINavigationBar所以这不是您真正想要的。 因此，也许更好，您可以创建一个自定义导航栏并隐藏本机导航栏。 这是一个简单的示例：

1-创建一个带有水平UIStackView的快速xib文件NavigationBarView，一个固定宽度的后UIButton和一个UISearchBar ：

class NavigationBarView: UIView {

    var backAction: (()->Void)?
    @IBOutlet weak var searchBarView: UISearchBar!

    override func awakeFromNib() {
        super.awakeFromNib()

        // Customize your search bar
        self.searchBarView.showsCancelButton = true
    }

    @IBAction func backButtonPressed(_ sender: Any) {
        self.backAction?()
    }
}

2-创建一个具有垂直UIStackView的UIViewController ， UIStackView使用UITableViewController ，其中包含一个固定高度为64的视图和一个UITableView ：

class TableViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, UISearchBarDelegate {

    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var containerView: UIView!
    let navigationBarView: NavigationBarView = NavigationBarView.viewFromNib() // Custom helper to instantiate a view, see below

    override func viewDidLoad() {
        super.viewDidLoad()
        self.navigationController?.navigationBar.isHidden = true // hide the native UINavigationBar

        self.navigationBarView.backAction = {
            self.navigationController?.popViewController(animated: true)
        }
        self.navigationBarView.searchBarView.delegate = self
        self.navigationBarView.add(in: self.containerView) // Custom helper to put a view in a container view, see below

        // Other stuff     
        self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
    }

这是我的助手：

extension UIView {
    static public func viewFromNib <GenericView: UIView> () -> GenericView {
        let className = String(describing: self)
        guard let instance = UINib(nibName: className, bundle: nil)
            .instantiate(withOwner: nil, options: nil).first as? GenericView else {
                // If this happens, it means the xcodeproj is broken
                fatalError("Ho no its broken!")
        }
        return instance
    }

    func add(in superView: UIView) {
        self.translatesAutoresizingMaskIntoConstraints = false
        superView.addSubview(self)
        self.topAnchor.constraint(equalTo: superView.topAnchor).isActive = true
        self.bottomAnchor.constraint(equalTo: superView.bottomAnchor).isActive = true
        self.leftAnchor.constraint(equalTo: superView.leftAnchor).isActive = true
        self.rightAnchor.constraint(equalTo: superView.rightAnchor).isActive = true
    }
}

Answer 2

您可以尝试使用以下代码，如果您遇到任何问题，请告诉我。

if self.searchController != nil {
            self.searchController.isActive = false
        }
        isSearching =  true
        self.searchController = UISearchController(searchResultsController:  nil)
        self.searchController.searchResultsUpdater = self
        self.searchController.delegate = self
        self.searchController.searchBar.delegate = self
        self.searchController.hidesNavigationBarDuringPresentation = false
        self.searchController.dimsBackgroundDuringPresentation = false
        self.navigationItem.titleView = searchController.searchBar
        self.definesPresentationContext = false

        self.searchController.searchBar.returnKeyType = .done

Answer 3

1. 有一个属性

    searchController.hidesNavigationBarDuringPresentation = true 

2. 存在间隙，因此可能是白色的Canel按钮。 您可以在Debugger Navigator （Cmd + 7）-> View UI Hierarcy肯定地知道它。 白色按钮文字可能是由于自定义导航栏样式引起的