使用 UISearchController 在 Navigationbar 中实现搜索栏答案

【问题标题】：Implementing search bar in Navigationbar using UISearchController使用 UISearchController 在 Navigationbar 中实现搜索栏
【发布时间】：2018-07-05 21:59:23
【问题描述】：

我已经使用 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()
}

现在我有两个问题-

SearchBar 位于 navigationBar 下方（见附图），当我们使用 UISearch bar 实现 searchBar 时，如何将 searchBar 置于 NavigationBar 之上。
取消按钮未出现在搜索栏的右侧。

【问题讨论】：

标签： ios swift uisearchbar ios11 uisearchcontroller

【解决方案1】：

我不认为你可以在本地做到这一点。但是你可以在打开菜单时激活搜索栏（不要忘记将searchController.hidesNavigationBarDuringPresentation设置为true）：

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

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

1 - 创建一个带有水平UIStackView的swift 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 - 不使用UITableViewController，而是创建一个带有垂直UIStackView 的UIViewController，其中包含一个固定高度为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
    }
}

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

这个有一个属性

searchController.hidesNavigationBarDuringPresentation = true

有一个间隙，所以它可能是一个白色文本 Canel 按钮。您可以在Debugger Navigator (Cmd+7) -> View UI Hierarcy 中确定。白色按钮文本可能是由自定义导航栏样式引起的

【讨论】：