ios - 在 iOS 10 中清晰和半透明的 UINavigationBar 状态之间的转换

Question

从 iOS 10 开始，联系人应用通过 UINavigationBar 的实现具有非常有趣的视觉效果。

在 Root View Controller 中，导航栏看起来很正常，但是在点击联系人时，播放的动画只会让导航栏的背景淡出到完全清晰，半透明效果也会缩减为零同时。

一旦转换完成，后退按钮和导航栏的其他控件仍然存在；这意味着它实际上并没有被隐藏。

当弹出接触 View Controller 时，动画会反向播放，甚至可以通过 UINavigationController 的“向后滑动”功能进行控制:

有谁知道如何实现这个功能？我想可以通过子类化 UINavigationBar 并手动控制背景 View 的状态来获得这种效果，但我真的希望避免这种情况，因为我发现让第三方导航栏与状态栏并不容易。我想知道是否有办法从系统中免费获取它。

Answer 1

您可以使用 UIGestureRecognizer 和 UIVisualEffect 实现从清晰到半透明的导航栏 View 转换。

在主VC中:

override func viewWillAppear(_ animated: Bool) {
    navigationController?.navigationBar.setBackgroundImage(nil, for: UIBarMetrics.default)
}

在详细VC中:

将 UIGestureRecognizerDelegate 实现到您的 Class 并使用以下代码。

override func viewDidLoad() {
    super.viewDidLoad()
    self.navigationController?.interactivePopGestureRecognizer?.delegate = self
}

override func viewWillAppear(_ animated: Bool) {
    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
}

func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldBeRequiredToFailBy otherGestureRecognizer: UIGestureRecognizer) -> Bool {
    let navigationBarBlurView = UIView(frame: CGRect(x:0, y:0, width:view.frame.size.width, height: UIApplication.shared.statusBarFrame.height + (navigationController?.navigationBar.frame.height)!))
    let blurEffect = UIBlurEffect(style: .light) // Set any style you want(.light or .dark) to achieve different effect.
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = navigationBarBlurView.bounds
    blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    navigationBarBlurView.addSubview(blurEffectView)
    view.addSubview(navigationBarBlurView)
    return true
}

输出: