[英]Navigation bar color is not under status bar
I am trying to make a transparent navigation bar, but when I set it to transparent It looks like this... : 我正在尝试制作一个透明的导航栏,但是当我将它设置为透明它看起来像这样......:
I want it to look like this 我希望它看起来像这样
but transparent and blurred like in the App Store but with background color. 但在App Store中透明和模糊,但背景色。 The problem is that the background color of the navigation controller is not under status bar like normal.
问题是导航控制器的背景颜色不像正常情况一样处于状态栏下。
My code: 我的代码:
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)
EDIT: I have a custom class for UINavigationController
and the view controller is embedded in a UINavigationController
编辑:我有一个
UINavigationController
的自定义类,视图控制器嵌入在UINavigationController
Swift 3, Xcode 8.0 beta 5. Swift 3,Xcode 8.0 beta 5。
Let's break this problem into parts. 让我们把这个问题分解成几部分。 First, you will need to use a
UIVisualEffectView
created with a UIBlurEffect
to get the blurred/transparent effect that you want. 首先,您需要使用使用
UIVisualEffectView
创建的UIBlurEffect
来获得所需的模糊/透明效果。 Then you will need to figure out how to display that in the navigation bar so that it fills the whole nav bar and that status bar. 然后,您需要弄清楚如何在导航栏中显示它,以便它填充整个导航栏和该状态栏。
Part 1 第1部分
I created a subclass of UIVisualEffectView
in order to add a gradient. 我创建了一个
UIVisualEffectView
的子类来添加渐变。 We can use this view to create the desired blurred/transparent effect. 我们可以使用此视图来创建所需的模糊/透明效果。
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
}
}
Part 2 第2部分
Now we need to use this view in the nav bar. 现在我们需要在导航栏中使用此视图。 I did this in a
UIViewController
that is embedded in a UINavigationController
. 我是在嵌入
UINavigationController
的UIViewController
中完成的。
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
}
Below is a picture of the result from my simulator. 下面是我的模拟器的结果图片。 You can see some blurred text at the top left of the picture, where the white part of the status bar looks darker.
您可以在图片的左上角看到一些模糊文本,其中状态栏的白色部分看起来更暗。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.