iOS布局约束问题：子控制器视图添加至UIView后重叠排查

核心问题分析 #

1. 父视图层级混乱：

   • parentView中已定义addHereView但未加入视图层级，也未设置约束；同时在childView()中重复创建新的addHereView，导致布局逻辑冲突。
   • scrollView被设置为占满整个父视图，未预留addHereView的位置，其内容会延伸到子控制器视图的区域，造成重叠。

2. 子控制器布局参考错误：

   • SmiliarMovieViewController使用view.safeAreaLayoutGuide作为布局锚点，但该视图是作为子视图添加到普通UIView中，safeArea的范围不符合预期，导致内部元素偏移。
   • collectionView高度依赖view.frame.width/2计算，视图未完成布局时frame值不准确，导致高度异常。

3. CollectionViewCell重复初始化：

   • SimilierMovieCell在configure()中调用commonInit()，每次复用cell都会重复创建视图层级和约束，引发布局冲突。

修复代码 #

1. 修改MovieDetailsDisplayViewController的parentView和childView()

final class MovieDetailsDisplayViewController: UIViewController {
    // ... 原有代码不变 ...
    
    override func viewDidLoad() {
        super.viewDidLoad()
        (view as? parentView)?.configure(movieDetails: movieDetails)
        childView()
    }
    
    private func childView() {
        // 直接使用parentView中已定义的addHereView，不再重复创建
        guard let parentView = view as? parentView,
              let addHereView = parentView.addHereView else { return }
        
        let similarVC = SmiliarMovieViewController(viewModel: viewModel)
        addChild(similarVC)
        
        guard let similarView = similarVC.view else { return }
        similarView.translatesAutoresizingMaskIntoConstraints = false
        addHereView.addSubview(similarView)
        
        NSLayoutConstraint.activate([
            // 让子控制器视图完全填充addHereView
            similarView.topAnchor.constraint(equalTo: addHereView.topAnchor),
            similarView.leadingAnchor.constraint(equalTo: addHereView.leadingAnchor),
            similarView.trailingAnchor.constraint(equalTo: addHereView.trailingAnchor),
            similarView.bottomAnchor.constraint(equalTo: addHereView.bottomAnchor),
        ])
        
        similarVC.didMove(toParent: self)
    }
    
    private class parentView: UIView {
        let scrollView = UIScrollView()
        let backdropImageView = UIImageView()
        let titleLabel = UILabel()
        let overviewLabel = UILabel()
        let addHereView = UIView()
                
        private lazy var contentStackView = UIStackView(arrangedSubviews: [backdropImageView, titleLabel, overviewLabel])
        
        // ... 原有init代码不变 ...

        private func commonInit() {
            backgroundColor = .white
            addHereView.backgroundColor = .systemBlue
            addHereView.translatesAutoresizingMaskIntoConstraints = false

            // ... 原有backdrop、titleLabel、overviewLabel配置不变 ...
            
            contentStackView.axis = .vertical
            contentStackView.spacing = 24
            contentStackView.setCustomSpacing(8, after: titleLabel)
            
            setupViewsHierarchy()
            setupConstraints()
        }
        
        private func setupViewsHierarchy() {
            addSubview(scrollView)
            scrollView.addSubview(contentStackView)
            // 将addHereView添加到父视图层级
            addSubview(addHereView)
        }

        private func setupConstraints() {
            scrollView.translatesAutoresizingMaskIntoConstraints = false
            backdropImageView.translatesAutoresizingMaskIntoConstraints = false
            contentStackView.translatesAutoresizingMaskIntoConstraints = false

            let g = safeAreaLayoutGuide
            NSLayoutConstraint.activate([
                // scrollView约束：顶部、左右与父视图对齐，底部与addHereView顶部对齐
                scrollView.topAnchor.constraint(equalTo: topAnchor),
                scrollView.leadingAnchor.constraint(equalTo: leadingAnchor),
                scrollView.trailingAnchor.constraint(equalTo: trailingAnchor),
                scrollView.bottomAnchor.constraint(equalTo: addHereView.topAnchor),
                
                backdropImageView.heightAnchor.constraint(equalTo: backdropImageView.widthAnchor, multiplier: 11 / 16),
                
                contentStackView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 24),
                contentStackView.leadingAnchor.constraint(equalTo: scrollView.layoutMarginsGuide.leadingAnchor),
                contentStackView.trailingAnchor.constraint(equalTo: scrollView.layoutMarginsGuide.trailingAnchor),
                contentStackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -24),
                // 确保contentStackView宽度与scrollView一致，避免横向滚动
                contentStackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: -32),
                
                // addHereView约束：左右、底部与safeArea对齐，高度固定
                addHereView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20),
                addHereView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20),
                addHereView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -20),
                addHereView.heightAnchor.constraint(equalToConstant: 170)
            ])
            
            scrollView.layoutMargins = UIEdgeInsets(top: 24, left: 16, bottom: 24, right: 16)
            preservesSuperviewLayoutMargins = false
        }
        
        // ... 原有configure代码不变 ...
    }
}

2. 修改SmiliarMovieViewController的布局逻辑

class SmiliarMovieViewController: UIViewController, UICollectionViewDelegate {
    // ... 原有init代码不变 ...
    
    private func setUpUI() {
        view.addSubview(titleLable)
        view.addSubview(collectionView)
        
        // 改用view本身的布局锚点，而非safeArea
        titleLable.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        titleLable.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10).isActive = true
        titleLable.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        
        collectionView.topAnchor.constraint(equalTo: titleLable.bottomAnchor, constant: 8).isActive = true
        collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        // 使用固定高度或基于内容的约束，避免依赖未布局完成的frame
        collectionView.heightAnchor.constraint(equalToConstant: 150).isActive = true
    }
    
    // ... 原有viewDidLoad代码不变 ...
}

3. 修复SimilierMovieCell的重复初始化问题

class SimilierMovieCell: UICollectionViewCell {
    static let identifier = "CompanyCell"
    let columnSpacing: CGFloat = 16
    let posterSize = CGSize(width: 92, height: 134)
    
    let coverImage = UIImageView()
    let tagView = TagView()
    let titleLabel = UILabel()
    
    let childStackView = UIStackView()
    let containerStackView = UIStackView()

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    
    private func commonInit() {
        layoutMargins = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
        titleLabel.font = UIFont.systemFont(ofSize: 15)
        titleLabel.textColor = UIColor.Text.charcoal
        titleLabel.numberOfLines = 0
        titleLabel.lineBreakMode = .byWordWrapping
        
        coverImage.contentMode = .scaleAspectFit
        coverImage.layer.cornerRadius = 8
        coverImage.layer.masksToBounds = true
        
        childStackView.spacing = 10
        childStackView.alignment = .leading
        childStackView.axis = .vertical
        
        containerStackView.spacing = columnSpacing
        containerStackView.alignment = .top
        containerStackView.translatesAutoresizingMaskIntoConstraints = false

        setupViewsHierarchy()
        setupConstraints()
    }
    
    // ... 原有setupViewsHierarchy、setupConstraints代码不变 ...
    
    func configure(movie: Movie) {
        titleLabel.text = movie.title
        tagView.configure(.rating(value: movie.voteAverage))
        
        if let path = movie.posterPath {
            coverImage.dm_setImage(posterPath: path)
        } else {
            coverImage.image = nil
        }
    }
    
    // ... 原有prepareForReuse代码不变 ...
}

修复说明 #

• 调整父视图层级，让scrollView和addHereView形成上下布局，彻底避免内容重叠。
• 子控制器布局改用自身视图锚点，确保布局参考准确。
• 修复CollectionViewCell的重复初始化问题，避免布局冲突。

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