如何在Interface Builder中通过约束最小化ScrollView尺寸并适配内容

前提准备 #

1. 确保层级结构正确：
   • 主视图（ViewController的View）
     • ContainerView（承载ScrollView和按钮的容器）
       • ContentScrollView（UIScrollView）
         • ScrollContentView（UIView，ScrollView的内容容器）
           • TitleLabel（UILabel，显示短文本）
           • DetailTextView（UITextView，显示长文本，需关闭滚动）
       • ActionButton（固定高度的按钮）
2. 给所有控件设置清晰命名，方便约束设置。

步骤1：设置ContainerView的约束 #

• 给ContainerView添加Top、Leading、Trailing约束，与主视图的Safe Area对应边缘对齐（优先级1000）。
• 添加Bottom约束，与主视图Safe Area的Bottom对齐，设置优先级为750（低优先级，允许内容不足时容器向上收缩）。
• 添加最大高度约束：设置ContainerView的Height ≤ 主视图Safe Area的Height（优先级1000），确保容器不会超出屏幕范围。

步骤2：设置ActionButton的约束 #

• ActionButton的Leading、Trailing、Bottom与ContainerView的对应边缘对齐（优先级1000）。
• 设置ActionButton的固定Height（比如44，优先级1000）。
• 添加Top约束，与ContentScrollView的Bottom对齐，间距设为固定值（比如8，优先级1000）。

步骤3：设置ContentScrollView的核心约束 #

• ContentScrollView的Leading、Trailing、Top与ContainerView的对应边缘对齐（优先级1000）。
• 添加Height ≥ 最小高度（比如44，可选，优先级1000），防止内容为空时ScrollView过矮。
• 关键：给ContentScrollView添加一个Height约束，设置优先级为250（极低优先级，允许被内容完全撑开）。

步骤4：设置ScrollContentView的约束（ScrollView自适应核心） #

• 选中ScrollContentView，在IB的Size Inspector里，将其布局约束关联到ScrollView的Content Layout Guide（而非Frame Layout Guide）。
• 添加Leading、Trailing、Top、Bottom约束，与ContentScrollView的Content Layout Guide对应边缘对齐，间距设为0（或按需调整，优先级1000）。
• 添加Width约束，让ScrollContentView的Width等于ContainerView的Width（减去ContainerView的左右内边距，如果有的话，优先级1000），确保ScrollView不会横向滚动。
• 添加Height约束，设置优先级为250（极低优先级，允许被内部控件撑开）。

步骤5：设置内部文本控件的约束 #

TitleLabel #

• Leading、Trailing、Top与ScrollContentView对齐，间距设为固定值（比如16，优先级1000）。
• 设置Label的Lines = 0，让其根据文本自动调整高度。

DetailTextView #

• Leading、Trailing、Bottom与ScrollContentView对齐，间距设为固定值（比如16，优先级1000）。
• Top与TitleLabel的Bottom对齐，间距设为固定值（比如8，优先级1000）。
• 关键设置：在IB的Attributes Inspector里，将TextView的Scroll Enabled设为NO，Editable设为NO，不要设置固定Height。

原理说明 #

• 内容较短时，ScrollContentView被内部控件撑开，ContentScrollView的低优先级Height约束被打破，跟随内容高度变化，ContainerView的低优先级Bottom约束也被打破，向上收缩到合适高度。
• 内容变长时，ContainerView先被撑大到最大高度约束（屏幕高度），此时ContentScrollView的Height无法继续扩大，ScrollView会自动启用滚动，承载超出的内容。
• 按钮始终固定在容器底部，高度不变，不会被内容挤压。

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