Swift 如何用代码向Interface Builder的UIScrollView加自定义UIView并解决布局问题

问题本质定位 #

• ScrollView的Auto Layout内容大小警告：当前实现混用了手动计算frame、手动写死contentSize的老式布局逻辑，完全没有遵循ScrollView搭配Auto Layout的约束规范，Auto Layout引擎无法通过现有约束准确推导出可滚动区域的边界，因此抛出模糊警告。
• 自定义View内内容不居中：两个核心原因

1. 布局时机错误：在viewDidLoad阶段读取的scrollView.frame.size是Auto Layout流程未完成的临时值，计算出的子视图位置、尺寸本身存在偏差
2. 自定义View和ScrollView之间没有建立可靠的Auto Layout约束，完全靠偏移值手动摆放，一旦frame计算偏差，内部基于View自身边界设置的居中约束就会错位

修复实现 #

1. 替换为纯Auto Layout的ScrollView分页实现，从根源消除警告 #

不需要手动计算frame、手动设置contentSize，完全靠约束让Auto Layout自动推导滚动区域边界，警告会直接消失。核心逻辑是给两个分页的自定义View建立连续的约束链，让系统自动算出总滚动宽度。
修改后的MainVC完整代码：

import UIKit

class MainVC: UIViewController, UIScrollViewDelegate {

    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var pageControl: UIPageControl!
    
    private var customView1: CustomView1!
    private var customView2: CustomView2!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupScrollView()
        scrollView.delegate = self
    }
    
    func setupScrollView() {
        pageControl.numberOfPages = 2
        
        // 初始化两个自定义视图
        customView1 = CustomView1()
        customView2 = CustomView2()
        // 关键：*关闭自动约束转换*，使用纯Auto Layout布局
        customView1.translatesAutoresizingMaskIntoConstraints = false
        customView2.translatesAutoresizingMaskIntoConstraints = false
        
        scrollView.addSubview(customView1)
        scrollView.addSubview(customView2)
        
        // 建立完整约束链，让Auto Layout自动推导滚动内容尺寸
        NSLayoutConstraint.activate([
            // 第一个分页视图约束：贴滚动区域左侧、上下边界，宽度与滚动视口等宽
            customView1.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
            customView1.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
            customView1.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
            customView1.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor),
            customView1.heightAnchor.constraint(equalTo: scrollView.frameLayoutGuide.heightAnchor),
            
            // 第二个分页视图约束：紧贴第一个视图右侧，保持和第一个视图等宽、同上下位置
            customView2.leadingAnchor.constraint(equalTo: customView1.trailingAnchor),
            customView2.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
            customView2.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
            customView2.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
            customView2.widthAnchor.constraint(equalTo: customView1.widthAnchor),
            customView2.heightAnchor.constraint(equalTo: customView1.heightAnchor)
        ])
    }
    
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        let pageNumber = Int(scrollView.contentOffset.x / scrollView.frame.size.width)
        pageControl.currentPage = pageNumber
    }
}

2. 内容居中问题修正 #

只要两个自定义View的尺寸、位置通过约束正确确定（即实际宽度和ScrollView视口宽度完全一致），customView2内部现有的datePicker.centerXAnchor约束就会自然生效，不需要修改自定义View内部的布局逻辑。

小提醒：自定义类的命名要遵循Swift的大驼峰规范，把原来小写开头的customView2类名改为CustomView2，避免后续出现类型匹配的编译警告。

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