在 UISearchController iOS 11 上使用背景图片

Posted

技术标签:

【中文标题】在 UISearchController iOS 11 上使用背景图片【英文标题】:Use background image on UISearchController iOS 11 【发布时间】:2018-01-22 08:53:25 【问题描述】:

我正在为我的UITableView 实现一个UISearchController,但我正在为 ios 11 的自定义而苦苦挣扎。我的导航栏正在使用我希望搜索控制器匹配的渐变图像背景,但我没有t 找到了为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
    


【问题讨论】:

什么是 Color.blue.gradient? 很久以前,但我相信我使用了自定义颜色类。我认为 Color.blue.gradient 的类型是 CAGradientLayer 【参考方案1】:

感谢Krunal's answer,经过一段时间的搜索,我终于找到了一个不错的解决方案。

这就是我为 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
    

【讨论】:

有没有办法将此方法应用于垂直渐变。在应用它时,它将作为搜索栏和导航栏的两个部分【参考方案2】:

您可以为此添加一个 CustomView。 使用 CustomView 将您的 searchBar 添加到其中,然后将此 customView 添加到您的 ViewController。 现在您可以轻松地将这个 customView 的背景设置为:

//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)

【讨论】:

谢谢!我认为这更像是一种 hack 而不是解决方案,确实应该有一种方法来自定义 UISearchController 的标准实现

以上是关于在 UISearchController iOS 11 上使用背景图片的主要内容,如果未能解决你的问题,请参考以下文章

iOS 13 UISearchController + UIRefreshControl 故障

iOS13 上的 UISearchController 崩溃

UISearchController iOS 11 自定义

iOS 12 上的 UISearchController 子类崩溃

如何在 iOS8 中实现 UISearchController?

IOS8 UISearchController 直接显示搜索栏