如何实现scrollview内部label高度自适应且不出现约束冲突？

冲突原因 #

UIScrollView 的 contentSize 自动计算需要完整的约束闭环，仅给外层容器 View 设置>=高度约束、但没有把内部子控件的底部和容器底部做绑定的话，系统无法计算出容器的准确高度，就会触发约束冲突。

具体实现步骤 #

1. 配置 ScrollView 基础约束 #

给 ScrollView 添加和父视图的上下左右四周边距约束，先确定 ScrollView 本身的显示区域。

2. 配置内层容器 View 约束 #

你嵌套在 ScrollView 内部的父容器 View，按以下规则添加约束：

• 上下左右四个边全部约束到 ScrollView 的contentLayoutGuide对应边，边距按需设置
• 垂直滚动场景下，给容器 View 添加和 ScrollView 的frameLayoutGuide等宽的约束，避免出现横向滚动
• 不要给容器 View 添加固定高度或者 >= 高度的约束，容器高度会由内部子控件自动撑开

3. 配置两个 UILabel 约束 #

两个 Label 宽度固定的前提下，按以下设置：

• 两个 Label 都将numberOfLines属性设为0，开启自动折行
• 第一个 Label 顶部约束到容器 View 顶部，左右边距按需求设置，同时添加固定宽度约束
• 第二个 Label 顶部约束到第一个 Label 的底部，间距按需设置，左右约束、宽度约束和第一个 Label 保持一致
• 第二个 Label 的底部约束到容器 View 的底部，边距按需设置

4. 验证约束完整性 #

此时整个约束链完全闭环：容器 View 宽度由 ScrollView 的 frame 确定，高度由两个 Label 的高度+间距自动计算，ScrollView 的 contentSize 会自动匹配容器大小，不会出现约束冲突。

代码示例（Swift） #

// 开启Label自动折行
firstLabel.numberOfLines = 0
secondLabel.numberOfLines = 0

// 容器View约束
containerView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    containerView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
    containerView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
    containerView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
    containerView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
    containerView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor)
])

// Label约束
NSLayoutConstraint.activate([
    firstLabel.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 16),
    firstLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 16),
    firstLabel.widthAnchor.constraint(equalToConstant: 300), // 替换为你的固定宽度
    
    secondLabel.topAnchor.constraint(equalTo: firstLabel.bottomAnchor, constant: 12),
    secondLabel.leadingAnchor.constraint(equalTo: firstLabel.leadingAnchor),
    secondLabel.widthAnchor.constraint(equalTo: firstLabel.widthAnchor),
    secondLabel.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -16)
])

如果使用 Storyboard/XIB 实现，注意将容器的上下左右约束绑定到 ScrollView 的 Content Layout Guide，不要绑定到 Frame Layout Guide 的上下边即可。

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