ios11:导航栏中的 UISearchBar

Posted

技术标签:

【中文标题】ios11:导航栏中的 UISearchBar【英文标题】:ios11: UISearchBar in Navigation Bar 【发布时间】:2018-01-05 03:34:38 【问题描述】:

借助answer,我在导航栏中实现了渐变。但是,渐变不包括搜索栏。

但这就是我想要的:

知道问题出在哪里吗?非常感谢您提供的任何帮助。我将在下面分享我的代码。

extension UINavigationBar 

    func setGradientBackground(colors: [UIColor]) 

        var updatedFrame = bounds
        updatedFrame.size.height += 20
        let gradientLayer = CAGradientLayer(frame: updatedFrame, colors: colors)

        setBackgroundImage(gradientLayer.createGradientImage(), for: UIBarMetrics.default)
    



extension CAGradientLayer 

    convenience init(frame: CGRect, colors: [UIColor]) 
        self.init()
        self.frame = frame
        self.colors = []
        for color in colors 
            self.colors?.append(color.cgColor)
        
        startPoint = CGPoint(x: 0, y: 0)
        endPoint = CGPoint(x: 0, y: 1)
    

    func createGradientImage() -> UIImage? 

        var image: UIImage? = nil
        UIGraphicsBeginImageContext(bounds.size)
        if let context = UIGraphicsGetCurrentContext() 
            render(in: context)
            image = UIGraphicsGetImageFromCurrentImageContext()
        
        UIGraphicsEndImageContext()
        return image
    


我的视图控制器:

override func viewDidLoad() 
    super.viewDidLoad()

    self.navigationBarGradient(colors: [UIColor.init(hex: "0089FC" ), 
UIColor.init(hex: "56ACF5" )])

    if #available(ios 11.0, *) 
        navigationItem.searchController = searchController

    

  private func navigationBarGradient(colors: [UIColor]) 
        navigationController?.navigationBar.setGradientBackground(colors: colors)
    

【问题讨论】:

这只是一个技巧:使用带有 uiview 和标签的自定义导航栏。我曾经尝试过这样做,从那时起我就使用了这个 hack。 你能再解释一下吗?比如合并搜索栏 不使用默认导航栏,而是使用导航栏大小+搜索栏大小的uiview。将搜索栏放在视图和标题标签内。 你解决了吗?这让我发疯了! 是的!我标记了对我有帮助的答案 【参考方案1】:

我相信搜索栏和导航栏是两个独立的元素,所以你的渐变只会影响一个。您可以将它们都设置为清除,然后使用您正在寻找的渐变将另一个视图或标签元素放在后面(添加约束)。

对于 searchBar,您要使用以下代码同时设置 barTintColor 和 backgroundImage。

override func viewDidLoad() 
    self.searchBar.barTintColor = UIColor.clear
    self.searchBar.backgroundImage = UIImage()
    self.navBar.backgroundColor = UIColor.clear

【讨论】:

令人沮丧的是,当我设置导航的 barTintColor 时,它会影响状态栏和导航栏。但我会尝试这个建议。 这个问题可能有多种解决方案,但对我来说,这是阻力最小的路径。谢谢【参考方案2】:

请查看来自 Apple 的 Sample Code,了解如何执行此操作以及在导航栏上进行其他修改。

话虽如此,如果您不需要任何其他导航栏功能(例如左右按钮),只需在此特定视图中隐藏导航栏并在其中包含自定义视图会简单得多地点。

【讨论】:

【参考方案3】:

在我能想到的方法中,材质资源的使用是最简单的一种,如果让上层控制透明可能效果不是很好

【讨论】:

以上是关于ios11:导航栏中的 UISearchBar的主要内容,如果未能解决你的问题,请参考以下文章

iOS 11 在导航栏中自定义搜索栏

iOS 11 搜索栏中的搜索文本字段位置错误

iOS 11 在 leftBarButtonItem 旁边的导航栏中显示 searchBar

导航栏中的 iOS 搜索栏

IOS - 垂直对齐导航栏中的后退按钮

iOS 7 导航栏中的搜索栏