在iOS 11上使用背景图片的UISearchController

Question

我正在将UISearchController添加到UITableView中，但在iOS 11上进行自定义时遇到了困难。我的导航栏使用渐变图像背景，我希望搜索控制器与之匹配，但我没有找到设置UISearchController背景图像的方法。当它作为TableHeaderView的UISearchController时，它可以完美工作，但在iOS 11中几乎没有任何自定义传递。当前结果:期望结果:这是我正在使用的代码：（在viewDidLoad中调用）

private func setupSearchController() {

    let searchController = UISearchController(searchResultsController: nil)

    // Convert CAGradientLayer to UIImage
    let gradient = Color.blue.gradient
    gradient.frame = searchController.searchBar.bounds
    UIGraphicsBeginImageContext(gradient.bounds.size)
    gradient.render(in: UIGraphicsGetCurrentContext()!)
    let gradientImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    // Setup the Search Controller
    searchController.searchBar.backgroundImage = gradientImage
    searchController.searchBar.isTranslucent = false
    searchController.searchResultsUpdater = self
    searchController.hidesNavigationBarDuringPresentation = false
    searchController.dimsBackgroundDuringPresentation = false
    searchController.obscuresBackgroundDuringPresentation = false
    searchController.searchBar.placeholder = "Search by transaction name"
    searchController.searchBar.tintColor = Color.custom(hexString: "FAFAFA", alpha: 1).value
    definesPresentationContext = true
    searchController.searchBar.delegate = self

    // Implement Search Controller
    if #available(iOS 11.0, *) {
        navigationItem.searchController = searchController
        navigationItem.hidesSearchBarWhenScrolling = false
        navigationController?.navigationBar.setBackgroundImage(gradientImage, for: .default)
    } else {
        tableView.tableHeaderView = searchController.searchBar
    }

}

- nomadoda

---

Color.blue.gradient是什么？ - temp

很久以前，但我相信我使用了自定义的Color类。我认为Color.blue.gradient是类型为CAGradientLayer的。 - nomadoda

Answer 1

感谢Krunal的回答，在搜索了相当长时间后，我终于找到了一个不错的解决方案。

以下是我实现iOS 11背景图像的方式：

    // Implement Search Controller
    if #available(iOS 11.0, *) {
        if let navigationBar = self.navigationController?.navigationBar {
            navigationBar.barTintColor = UIColor(patternImage: gradientImage!)
        }
        if let textField = searchController.searchBar.value(forKey: "searchField") as? UITextField {
            if let backgroundview = textField.subviews.first {
                backgroundview.backgroundColor = UIColor.white
                backgroundview.layer.cornerRadius = 10;
                backgroundview.clipsToBounds = true;

            }
        }
        navigationItem.searchController = searchController
        navigationItem.hidesSearchBarWhenScrolling = false
    } else {
        tableView.tableHeaderView = searchController.searchBar
    }

- nomadoda

---

有没有一种方法可以将此方法应用于垂直渐变。在应用时，它会分为搜索栏和导航栏两个部分。 - Arunkrishna

Answer 2

你可以添加一个自定义视图来实现这个功能。 使用自定义视图将搜索栏添加到其中，然后将此自定义视图添加到你的 ViewController 中。 现在，你可以轻松地设置此自定义视图的背景：

//if customView is named as customView

    let backgroundImage = UIImageView(frame: UIScreen.mainScreen().bounds)
    backgroundImage.image = UIImage(named: "background.png")
    self.customView.insertSubview(backgroundImage, atIndex: 0)

- Madhur

---

谢谢！我认为这更像是一种hack而不是解决方案，实际上应该有一种方法来自定义UISearchController的标准实现。 - nomadoda

Answer 3

Swift 5，iOS 15

考虑到searchController是您的类（vc最有可能）的属性，导航vc不为nil，“gradient”图像是具有一些颜色混合的渐变的资源。
将此代码放入您的viewDidLoad中，以实现带有渐变导航栏和白色背景颜色的搜索字段。

let appearance = UINavigationBarAppearance()
appearance.backgroundImage = UIImage(named: "gradient")?.resizableImage(withCapInsets: .zero,
                                                                        resizingMode: .stretch)
navigationController?.navigationBar.scrollEdgeAppearance = appearance
navigationController?.navigationBar.standardAppearance = appearance

searchController = UISearchController(searchResultsController: nil)

/// Trick to have a white searchTextField background color, weird but it works.
searchController?.searchBar.searchTextField.borderStyle = .none
searchController?.searchBar.searchTextField.layer.cornerRadius = 10
searchController?.searchBar.searchTextField.layer.cornerCurve = .continuous
searchController?.searchBar.searchTextField.backgroundColor = .white

navigationItem.searchController = searchController

结果：

从当前视图控制器返回时，您可能希望将导航栏重置为默认设置。为此，您可以尝试创建一个方便的函数UINavigationViewController扩展：

extension UINavigationController {

    func resetToDefaultAppearance() {
        let appearance = UINavigationBarAppearance()
        appearance.configureWithDefaultBackground()

        navigationBar.standardAppearance = appearance
        navigationBar.scrollEdgeAppearance = appearance
        navigationBar.standardAppearance = appearance
        navigationBar.compactScrollEdgeAppearance = appearance
    }
}

然后在你的viewWillDisappear中调用它：

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)

    navigationController?.resetToDefaultAppearance()
}

- Evgeny Karkan