如何让TableView中的SearchBar看起来像设置应用程序中的那个

Question

在我的应用程序中，我有一个可以在顶部搜索SearBar的TableView。我添加了SearchBar，通过界面生成器拖动一个，然后使我的TableView成为UISearchBarDelegate并添加：

searchBar.delegate = self

这导致以下外观

我想要的是我的SearchBar看起来像设置应用程序（每个iOS设备上预装的那个）看起来像这样

此外，单击时，它的行为会有所不同，因为它会使视图的其余部分变灰并删除标题，如此处所示

而我的SearchBar只打开键盘并在点击时显示光标。

为了达到这种特定的外观，我需要做些什么？

Answer 1

您可以通过编程方式将UISearchController添加到navigationBar来轻松完成。使用代码创建UISearchController：

let controller = UISearchController(searchResultsController: nil)

然后将其添加到navigationItem，

    controller.searchResultsUpdater = self
    controller.obscuresBackgroundDuringPresentation = false
    controller.searchBar.placeholder = "Search Candies"
    definesPresentationContext = true
    if #available(iOS 11.0, *) {
        navigationItem.searchController = controller
    } else {
        navigationItem.titleView = searchController.searchBar
    }

信用：https://www.raywenderlich.com/157864/uisearchcontroller-tutorial-getting-started

Answer 2

您可以通过创建它的子类来自定义UISearchBar：

class CustomSearchBar: UISearchBar {

    override init(frame:CGRect) {
        super.init(frame: frame)
        setup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

    func setup() {

        self.placeholder = "Search"

        // Color of the text field (in your case it should be gray)
        self.barTintColor = yourGraySearchBarColor

        // Color of the cursor (you don't need to change this if you want to stay with the default blue)
        self.tintColor = UIColor.white

        // Background color of you search bar
        self.backgroundImage = UIImage(named: "SearchBarBG")
    }
}

要设置搜索栏的背景颜色，您必须创建一个图像，这是一个只有您想要的颜色的正方形（在您的情况下为浅灰色），大小无关紧要，我将其设置为20x20像素。

您可以通过在整个屏幕上方添加半透明的灰色UIView来使背景变暗（SearchBar除外，因此它需要位于SearchBar下）。如果您采用UISearchBarDelegate，则可以在searchBarTextDidBeginEditing(_ searchBar: UISearchBar)函数中添加此叠加层，并将其移除到searchBarTextDidEndEditing(_ searchBar: UISearchBar)函数中。