如何在UIKit中让视图覆盖Navigation Controller全屏显示

问题分析 #

你需要实现点击导航栏按钮唤起的全屏暗背景弹窗，但遇到两个问题：

• 将视图添加到navigationController子视图时，框架布局异常
• 添加到当前ViewController时，导航栏变为透明
  且无法使用presentViewController方案，需要实现全屏覆盖效果

解决方案 #

核心思路是将暗背景视图添加到导航控制器的根视图层级，而非当前VC的视图，这样既能覆盖导航栏，又能保证布局正确。同时使用AutoLayout约束替代frame设置，适配屏幕旋转等场景。

修改后的完整代码 #

class ToDoViewContoller: UIViewController {

    private let toDoListView = ToDoListView()
    private let coreDataManager = CoreDataManager()
    private let dimmedView = DimmedView()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(toDoListView)
        setupNavigationBar()
        setupConstraints()
        // 初始化暗背景视图的AutoLayout属性
        dimmedView.translatesAutoresizingMaskIntoConstraints = false
    }

    private func setupNavigationBar() {
        let appearance = UINavigationBarAppearance()
        appearance.backgroundColor = .systemIndigo
        appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.systemBackground]
        appearance.titleTextAttributes = [.foregroundColor: UIColor.systemBackground]

        navigationController?.navigationBar.prefersLargeTitles = true
        navigationController?.navigationBar.standardAppearance = appearance
        navigationController?.navigationBar.compactAppearance = appearance
        navigationController?.navigationBar.scrollEdgeAppearance = appearance

        navigationItem.rightBarButtonItem = UIBarButtonItem(
            barButtonSystemItem: .add,
            target: self,
            action: #selector(addButtonTapped))
        navigationItem.rightBarButtonItem?.tintColor = .systemBackground
        navigationItem.title = "ToDos"
    }

    @objc private func addButtonTapped() {
        guard let navControllerView = navigationController?.view else { return }
        // 将暗背景视图添加到导航控制器的view层级
        navControllerView.addSubview(dimmedView)
        // 添加全屏约束
        NSLayoutConstraint.activate([
            dimmedView.topAnchor.constraint(equalTo: navControllerView.topAnchor),
            dimmedView.leadingAnchor.constraint(equalTo: navControllerView.leadingAnchor),
            dimmedView.trailingAnchor.constraint(equalTo: navControllerView.trailingAnchor),
            dimmedView.bottomAnchor.constraint(equalTo: navControllerView.bottomAnchor)
        ])
        // 可选：添加显示动画
        dimmedView.alpha = 0
        UIView.animate(withDuration: 0.3) {
            self.dimmedView.alpha = 1
        }
    }

    private func setupConstraints() {
        toDoListView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            toDoListView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            toDoListView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
            toDoListView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
            toDoListView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        ])
    }
}

// 确保DimmedView的实现正确，示例如下：
class DimmedView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

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

    private func setupView() {
        backgroundColor = UIColor.black.withAlphaComponent(0.5)
        // 可选：添加点击隐藏逻辑
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(hide))
        addGestureRecognizer(tapGesture)
    }

    @objc private func hide() {
        UIView.animate(withDuration: 0.3) {
            self.alpha = 0
        } completion: { _ in
            self.removeFromSuperview()
        }
    }
}

关键修改点说明 #

• 视图层级调整：将dimmedView添加到navigationController?.view，这样可以覆盖包括导航栏在内的整个屏幕区域
• AutoLayout替代Frame：移除viewDidLayoutSubviews中的frame设置，改用约束确保视图始终全屏适配
• 初始化配置：给dimmedView设置translatesAutoresizingMaskIntoConstraints = false，确保约束生效
• 动画优化：添加淡入淡出动画提升交互体验，同时实现点击暗背景隐藏的逻辑

内容的提问来源于stack exchange，提问作者Nikita Chechnev