AutoLayout/Storyboard下非全屏UIScrollView布局问题求解

约束配置顺序（Storyboard 可视化布局） #

按从下到上、从外到内的顺序配置约束，避免依赖循环：

• 第一步：固定底部导航UIStackView
  • 将StackView的leading、trailing、bottom约束分别绑定到当前控制器根视图的对应边，底部约束优先绑定安全区（Safe Area）避免被Home Indicator遮挡
  • 给StackView配置确定的高度：固定高度场景直接设置height约束；动态高度场景保证内部子视图的尺寸、间距约束完整，系统可自动计算出StackView高度即可
• 第二步：配置UIScrollView自身位置尺寸
  • ScrollView的top、leading、trailing约束分别绑定到根视图的对应安全区边
  • ScrollView的bottom约束绑定到底部StackView的top边，按需求设置两者间距
  • 属性检查器里确认Bounces、Always Bounce Vertical勾选，前者是回弹基础开关，后者可以保证内容高度不足ScrollView可视高度时依然保留垂直回弹效果
• 第三步：配置ScrollView内部内容容器
  • 向ScrollView中拖入一个普通UIView作为专属内容容器（contentView），所有动态展示的内容都放在这个容器里，不要直接往ScrollView上加子控件
  • contentView的top、leading、trailing、bottom四边约束，全部绑定到ScrollView的Content Layout Guide对应边，间距设为0
  • 给contentView添加等宽约束，等宽对象为ScrollView的Frame Layout Guide，不要绑定到根视图或者安全区，避免宽度计算异常
• 第四步：闭合内容容器内部的垂直约束链
  • 向contentView中添加所有业务子控件
  • 最顶部控件的top绑定contentView的top，按需求设置边距
  • 从上到下依次给相邻子控件添加垂直间距约束，保证约束链连续无断裂
  • 最底部控件的bottom必须绑定contentView的bottom，按需求设置边距——这一步是ScrollView正确计算contentSize的核心，缺省会导致高度计算异常

常见异常原因 #

1. 无回弹效果：要么是ScrollView的bottom约束绑定错误，导致可视范围计算异常；要么是Bounces相关开关被手动关闭；如果内容高度小于ScrollView可视高度且未开启Always Bounce Vertical，也不会触发回弹
2. 无限滚动：本质是系统无法计算出确定的contentSize，90%以上情况是contentView内部垂直约束链没有从顶到底完全闭合，剩下的情况多是contentView的等宽约束绑定到了错误的对象

纯代码实现核心约束参考 #

// 关闭自动约束转换
scrollView.translatesAutoresizingMaskIntoConstraints = false
bottomStackView.translatesAutoresizingMaskIntoConstraints = false
scrollContentView.translatesAutoresizingMaskIntoConstraints = false

// 添加视图层级
view.addSubview(scrollView)
view.addSubview(bottomStackView)
scrollView.addSubview(scrollContentView)

// 底部StackView约束激活
NSLayoutConstraint.activate([
    bottomStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    bottomStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    bottomStackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
    bottomStackView.heightAnchor.constraint(equalToConstant: 56) // 按实际导航栏高度修改
])

// ScrollView自身约束激活
NSLayoutConstraint.activate([
    scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
    scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    scrollView.bottomAnchor.constraint(equalTo: bottomStackView.topAnchor)
])

// ScrollView内容容器约束激活
NSLayoutConstraint.activate([
    scrollContentView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
    scrollContentView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
    scrollContentView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
    scrollContentView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
    scrollContentView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor)
])

// 开启空内容回弹
scrollView.alwaysBounceVertical = true

// 后续往scrollContentView中添加业务子控件，补全从顶到底的完整垂直约束即可

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