导航栏颜色不在状态栏下

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了导航栏颜色不在状态栏下相关的知识,希望对你有一定的参考价值。

我正在尝试制作一个透明的导航栏,但是当我将它设置为透明它看起来像这样......:transparent

我希望它看起来像这个non-transparent

但在App Store中透明和模糊,但背景色。问题是导航控制器的背景颜色不像正常情况一样处于状态栏下。

我的代码:

 self.navigationItem.title = "label"
 self.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
 self.navigationBar.shadowImage = UIImage()
 self.navigationBar.isTranslucent = true
 self.navigationBar.backgroundColor = UIColor.init(red: 255/255, green: 0, blue: 0, alpha: 0.7)

编辑:我有一个UINavigationController的自定义类,视图控制器嵌入在UINavigationController

Swift 3,Xcode 8.0 beta 5。

答案

让我们把这个问题分解成几部分。首先,您需要使用使用UIVisualEffectView创建的UIBlurEffect来获得您想要的模糊/透明效果。然后,您需要弄清楚如何在导航栏中显示它,以便它填充整个导航栏和该状态栏。

第1部分

我创建了一个UIVisualEffectView的子类来添加渐变。我们可以使用此视图来创建所需的模糊/透明效果。

class GradientVisualEffectView: UIVisualEffectView {

    private let gradient: CAGradientLayer = {
        // You can tweak these colors and their alpha to get the desired gradient.
        // You can also mess with the gradient's locations.
        $0.colors = [
            UIColor.white.withAlphaComponent(0.3).cgColor, 
            UIColor(red: 1, green: 0, blue: 0, alpha: 0.7).cgColor
        ]
        return $0
    } (CAGradientLayer())


    override init(effect: UIVisualEffect?) {
        super.init(effect: effect)
        layer.addSublayer(gradient)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        // Make sure the gradient's frame always matches the blur effect.
        gradient.frame = bounds
    }

}

第2部分

现在我们需要在导航栏中使用此视图。我是在一个嵌入UIViewControllerUINavigationController中做到的。

override func viewDidLoad() {
    super.viewDidLoad()

    // Remove the nav bar's background
    let navBar = navigationController!.navigationBar
    navBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
    navBar.backgroundColor = .clear

    // Create the blur/transparent view. You can mess with styles here to get
    // different effects.
    let gradientBlur = GradientVisualEffectView(effect: UIBlurEffect(style: .light))
    gradientBlur.translatesAutoresizingMaskIntoConstraints = false
    navBar.addSubview(gradientBlur)

    // Constrain the view so that it always matches the nav bar.
    // The top constraint has a -20 constant so that it will extend above
    // the nav bar to the status bar.
    gradientBlur.leftAnchor.constraint(equalTo: navBar.leftAnchor).isActive = true
    gradientBlur.topAnchor.constraint(equalTo: navBar.topAnchor, constant: -20).isActive = true
    gradientBlur.rightAnchor.constraint(equalTo: navBar.rightAnchor).isActive = true
    gradientBlur.bottomAnchor.constraint(equalTo: navBar.bottomAnchor).isActive = true
}

下面是我的模拟器的结果图片。您可以在图片的左上角看到一些模糊文本,其中状态栏的白色部分看起来更暗。

blurred/transparent nav bar

以上是关于导航栏颜色不在状态栏下的主要内容,如果未能解决你的问题,请参考以下文章

iOS TableViewController 滚动离开状态栏下的内容和导航栏

在iOS 7中隐藏导航栏时,如何更改状态栏的颜色?

横向播放视频后状态栏下的导航栏

在导航和状态栏下使用 pagingEnabled 扩展垂直 UIScrollView

在 iOS 11 上,导航项中的搜索栏在导航弹出时折叠并卡在状态栏下

为什么在首次启动时我的导航栏位于状态栏下