この問題を部分的に解説しましょう。まず、UIBlurEffect
で作成したUIVisualEffectView
を使用して、必要なぼかし/透明効果を得る必要があります。次に、ナビゲーションバーに表示する方法を理解して、ナビゲーションバー全体とステータスバーを塗りつぶす必要があります。
パート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
今、私たちは、ナビゲーションバーで、このビューを使用する必要があります。私はこれをUIViewController
で行いました。これはUINavigationController
に埋め込まれています。
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
}
以下は、私のシミュレータの結果です。画像の左上には、ステータスバーの白い部分がより暗く見えるぼやけたテキストが見えます。
'UINavigationController'に埋め込まれているか、それは' UINavigationBar'がビューにサブビューとして追加していないで、あなたのビューコントローラですか? – keithbhunter
UINavigationControllerに埋め込まれています – Phyber
あなたは 'UINavigationController'にカスタム' UINavigationController'を埋め込んでいますか?どうして?カスタムUINavigationControllerのコードを見ることはできますか? – keithbhunter