你如何制作一个彩色和半透明的导航栏（iOS）？

Posted 2023-03-11

【中文标题】你如何制作一个彩色和半透明的导航栏（iOS）？

【英文标题】：How do you make a navigation bar colored and translucent (iOS)?

【发布时间】：2017-11-11 20:10:53

【问题描述】：

如何使导航栏既是半透明的，又是有色调的，如下图所示：

我还希望它保留半透明导航栏的默认模糊效果（所以我不希望它看起来与图片一模一样，因为我也想要模糊效果。） 我觉得这应该很容易，但我花了一个小时寻找解决方案，但没有什么能按我想要的方式工作。 另外，我更喜欢 Interface Builder 解决方案，但如果没有 swift 也可以。

【参考方案1】：

变色部分来from here。我刚刚添加了模糊部分from here。我不知道它是否是模糊的最佳解决方案，但它正在工作。您将需要对导航栏进行子类化，但没有什么痛苦的。发现如果模糊视图稍微降低 alpha 效果会更好，您将不得不稍微尝试一下。

extension UIColor 
    func toImage() -> UIImage? 
        return toImageWithSize(size: CGSize(width: 1, height: 1))
    
    func toImageWithSize(size: CGSize) -> UIImage? 
        UIGraphicsBeginImageContext(size)

        if let ctx = UIGraphicsGetCurrentContext() 
            let rectangle = CGRect(x: 0, y: 0, width: size.width, height: size.height)
            ctx.setFillColor(self.cgColor)
            ctx.addRect(rectangle)
            ctx.drawPath(using: .fill)
            let colorImage = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return colorImage
         else 
            return nil
        
    


extension UIImage 
    func imageWithAlpha(alpha: CGFloat) -> UIImage? 
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        draw(at: CGPoint.zero, blendMode: .normal, alpha: alpha)
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return newImage
    


class CustomNavBar: UINavigationBar 

    required init?(coder aDecoder: NSCoder) 
        super.init(coder: aDecoder)

        setBackgroundImage(UIColor.blue.toImage()?.imageWithAlpha(alpha: 0.5), for: .default)
        addBlurEffect()
    

    func addBlurEffect() 
        let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
        var frame = bounds
        frame.origin.y -= 20
        frame.size.height += 20
        visualEffectView.frame = frame
        visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        visualEffectView.alpha = 0.9
        insertSubview(visualEffectView, at: 0)
        sendSubview(toBack: visualEffectView)
    

【讨论】：

很好的解决方案。我唯一需要做的就是在addBlurEffect方法中将visualEffectView的z位置设置为-1（vi​​sualEffectView.layer.zPosition = -1），否则导航标题会出现在模糊效果后面，（我想这只是一个问题在 ios 11 中。我找到了这个解决方案 here)

【参考方案2】：

只需设置导航栏的颜色，然后设置透明度。

navigationController?.navigationBar.barTintColor = UIColor.green
navigationController?.navigationBar.alpha = 0.5

应该可以的。

【参考方案3】：

只需在界面生成器中选择 UINavigationController 的“导航栏”（不是其他 ViewController 的 NavigationItem）并更改“barTintColor”

【讨论】：

我试过了，但是当我设置条形颜色时，它会产生纯色背景色，而不是像我发布的图片中那样的半透明色。