ios - 用户离开 View Controller 后自定义导航栏标题被剪裁

Question

我需要扩展我的导航栏高度，但由于 Apple 很难在 iOS 11 中更改导航栏高度，我决定我需要使用自定义 View 来扩展导航栏，而不会引起用户注意。

我已经创建了一个自定义 View 来添加到导航栏的底部。我把它变成红色只是为了让这个问题更清楚。当用户离开 View Controller 然后返回时，标题 View 自定义 View 被红色 View “裁剪”。为什么？

我尝试在自定义标题 View 上将 clipsToBounds 设置为 false，但这没有帮助。如何确保自定义标题 View 始终位于所有内容之上？为什么它被小红 View (其主要目的是“扩展”导航栏)裁剪和重叠？

注意:“每月支出”标签是被剪裁的标题 View 的一部分。

class ViewController: UIViewController {
    let customTitleView = CustomTitleView()

    let navigationBarExtensionView: UIView = {
        let view = UIView()
        view.backgroundColor = .red
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        setupAdditionalGradientView()
        navigationItem.titleView = customTitleView
    }

    internal func setupAdditionalGradientView() {
        view.addSubview(navigationBarExtensionView)
        navigationBarExtensionView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        navigationBarExtensionView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        navigationBarExtensionView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        navigationBarExtensionView.heightAnchor.constraint(equalToConstant: 18).isActive = true

        // Hide pixel shadow between nav bar and red bar
        navigationController?.navigationBar.shadowImage = UIImage()
        navigationController?.navigationBar.layer.shadowRadius = 0
        navigationController?.navigationBar.layer.shadowOffset = CGSize(width: 0, height: 0)
    }
}

自定义标题 View :

import UIKit

class CustomTitleView: UIView {

    let primaryLabel: UILabel = {
        let label = UILabel()
        label.text = "$10,675.00"
        label.font = UIFont.systemFont(ofSize: 27.99, weight: .medium)
        label.textColor = .white
        label.textAlignment = .center
        return label
    }()

    let secondaryLabel: UILabel = {
        let label = UILabel()
        label.text = "Monthly Spending"
        label.textColor = .white
        label.textAlignment = .center
        label.font = UIFont.systemFont(ofSize: 10, weight: .medium)
        return label
    }()

    let stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.distribution = .fillProportionally
        stackView.alignment = .center
        stackView.translatesAutoresizingMaskIntoConstraints = false
        return stackView
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupStackView()
    }

    internal func setupStackView() {
        addSubview(stackView)
        stackView.addArrangedSubview(primaryLabel)
        stackView.addArrangedSubview(secondaryLabel)
        stackView.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
        stackView.centerYAnchor.constraint(equalTo: centerYAnchor, constant: 10).isActive = true
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
}

Answer 1

在 iOS 11 中，自定义条形按钮项目 View (例如 titleView)使用约束从内向外调整大小。因此，您需要约束才能正确调整 View 的大小。您没有提供任何约束，因此运行时不知道如何调整标题 View 的大小。

但是，我建议您放弃将 UINavigationItem 的自定义 View 向下扩展到导航栏外部下方的可疑想法，而只是在 View Controller 的 View 中显示“每月支出”一词。