导航栏过渡动画

Question

我有两个视图控制器，我正在使用 push segue 来显示它们。我的故事板如下所示：

但我想在第二个视图控制器上使用独立导航栏。为此，我编写了以下代码：

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    self.navigationController?.setNavigationBarHidden(true, animated: true)
    self.navigationController?.interactivePopGestureRecognizer?.delegate = nil
    placeNavigationBar()
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    self.navigationController?.setNavigationBarHidden(false, animated: true)
}


var normalButton: UIButton!
var counter = 0
let item = UINavigationItem()
let navigationBar = UINavigationBar()
private func placeNavigationBar() {



    let backButtonImage = UIImage(named: "backButton")
    normalButton = UIButton(frame: CGRect(x: 0, y: 0, width: backButtonImage!.size.width, height: backButtonImage!.size.height))
    normalButton.setImage(backButtonImage, for: .normal)

    normalButton.setTitleColor(.systemBlue, for: .normal)
    normalButton.contentHorizontalAlignment = .leading
    normalButton.contentVerticalAlignment = .center
    normalButton.titleEdgeInsets = UIEdgeInsets(top: 0, left: 3.0, bottom: 0.0, right: -3.0)
    normalButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: -10, bottom: 0, right: 0)

    let backBarButton = UIBarButtonItem(customView: normalButton)
    backBarButton.tintColor = .systemBlue


    let leftLabel = UILabel()
    leftLabel.text = "anony-12345678645"
    leftLabel.textColor = .black

    let profilePicture = UIImageView(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
    profilePicture.translatesAutoresizingMaskIntoConstraints = false
    profilePicture.image = #imageLiteral(resourceName: "test2")
    profilePicture.contentMode = .scaleAspectFill


    profilePicture.clipsToBounds = true

    profilePicture.widthAnchor.constraint(equalToConstant: 30).isActive = true
    profilePicture.heightAnchor.constraint(equalToConstant: 30).isActive = true
    profilePicture.layer.cornerRadius = 15


    item.leftBarButtonItems = [backBarButton, UIBarButtonItem(customView: profilePicture) ,UIBarButtonItem(customView: leftLabel)]


    navigationBar.isTranslucent = false
    navigationBar.barTintColor = .white

    self.view.addSubview(navigationBar)
    navigationBar.translatesAutoresizingMaskIntoConstraints = false

    navigationBar.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
    navigationBar.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
    navigationBar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true



    navigationBar.items = [item]
    navigationBar.delegate = self
}

它运行良好，但我对导航栏过渡动画不满意。该视频展示了它现在的样子：

https://www.youtube.com/watch?v=1wakUhA940c

我想要什么：

https://youtu.be/h3-HzKQsxWc

检查两个视频的导航栏转换，在第二个视频中，导航栏位于第一个视图控制器导航栏的顶部。但在第一个视频中，第二个导航栏只是将第一个导航栏推到屏幕外。

如何在第二个视频中实现相同的转换？

Answer 1

我做了类似的事情，初始控制器有一个看起来很相似的自定义导航栏，我所做的是在每个控制器的 viewWillAppear 方法上调用 navigationController.setNavigationBarHidden(_, animated: true)，在主控制器上调用 true 和 @ 987654324@ 其他。

您也可以这样做，并将一个单独的 UINavigationBar 添加到您的视图中。如果您正确设置了它的约束（基本上将其固定到控制器的 safeArea.top），它将扩展到安全区域。

您必须通过直接访问导航栏而不是控制器的navigationItem 来填充导航栏，但这没什么大不了的，您将获得所需的转换。

如果您希望在堆栈中的所有控制器之间发生这种情况，只需隐藏导航控制器上的导航栏并自己在每个视图上设置导航栏。

Answer 2

你不喜欢的其实是iOS的默认行为，动画。现在，做自己喜欢的事情的一种方法是制作自己的导航栏。

您可以使用以下方法在viewWillAppear 方法中隐藏或显示（切换）导航栏的可见性：

/// Shows the navigation bar.
public func showNavBar(animated: Bool) {
    self.navigationController?.setNavigationBarHidden(false, animated: animated)
}

/// Hides the navigation bar.
public func hideNavBar(animated: Bool) {
    self.navigationController?.setNavigationBarHidden(true, animated: animated)
}

然后开始在 Storyboard 中布局导航栏。

最后，利用 模拟指标，例如选择 NONE 到 Top Bar 将帮助您直观地看到自己在做什么。