如何通过代码给启用分页的UIScrollView添加布局子视图

你的问题出在UIScrollView的约束设置逻辑上：直接使用scrollView自身的anchor约束子视图，无法让scrollView正确计算内容尺寸，最终导致子视图无法显示。以下是修复后的完整代码：

import UIKit

final class ViewController: UIViewController {
 
    private lazy var scrollView: UIScrollView = {
        let view = UIScrollView()
        self.view.addSubview(view)
        view.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            view.leftAnchor.constraint(equalTo: self.view.leftAnchor),
            view.rightAnchor.constraint(equalTo: self.view.rightAnchor),
            view.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 46),
            view.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor)
        ])
      
        view.bounces = true
        view.showsHorizontalScrollIndicator = false
        view.showsVerticalScrollIndicator = false
        view.alwaysBounceHorizontal = true
        view.alwaysBounceVertical = false
        view.isPagingEnabled = true
        view.backgroundColor = UIColor(red: 0.97, green: 0.97, blue: 0.97, alpha: 1.0)
        return view
    }()
 
    let colors: [UIColor] = [.lightGray, .systemRed, .systemOrange, .systemBlue, .systemGreen]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white
 
        var previousView: UIView!
        let contentGuide = scrollView.contentLayoutGuide
        let frameGuide = scrollView.frameLayoutGuide
        
        for (i, color) in colors.enumerated() {
            let view = UIView()
            view.backgroundColor = color
            view.tag = i + 1
            
            scrollView.addSubview(view)
            view.translatesAutoresizingMaskIntoConstraints = false
            
            // 子视图高度与scrollView可视区域高度一致
            view.topAnchor.constraint(equalTo: contentGuide.topAnchor).isActive = true
            view.bottomAnchor.constraint(equalTo: contentGuide.bottomAnchor).isActive = true
            // 子视图宽度与scrollView可视区域宽度一致
            view.widthAnchor.constraint(equalTo: frameGuide.widthAnchor).isActive = true
            
            switch i {
            case 0:
                // 第一个子视图左边缘对齐内容区域左边缘
                view.leftAnchor.constraint(equalTo: contentGuide.leftAnchor).isActive = true
            case colors.count - 1:
                // 最后一个子视图右边缘对齐内容区域右边缘，同时连接前一个视图的右边缘
                view.rightAnchor.constraint(equalTo: contentGuide.rightAnchor).isActive = true
                view.leftAnchor.constraint(equalTo: previousView.rightAnchor).isActive = true
            default:
                // 中间视图左边缘对齐前一个视图的右边缘
                view.leftAnchor.constraint(equalTo: previousView.rightAnchor).isActive = true
            }
            
            previousView = view
        }
    }
}

关键修复点 #

• 使用UIScrollView专属LayoutGuide：
  • contentLayoutGuide：用于约束子视图的内容边界，让scrollView能自动计算正确的contentSize。
  • frameLayoutGuide：代表scrollView自身的可视区域，用来设置子视图宽度，保证每个分页视图和scrollView可视宽度完全一致。
• 移除错误的fallthrough逻辑：原代码的fallthrough会导致最后一个视图重复绑定约束，直接在对应case里同时设置右边缘对齐和左边缘连接即可。
• 明确约束链关系：首尾视图分别绑定contentLayoutGuide的左右边缘，中间视图依次连接前一个视图的右边缘，让scrollView自动推导横向内容总长度，确保分页功能正常工作。

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