如何实现UIScrollView内Label与Button的垂直空间自适应填充？

嘿，这个需求我之前也碰到过，用Auto Layout就能完美解决，不用写任何复杂的滚动逻辑，下面给你详细说怎么实现：

核心思路 #

我们需要借助一个contentView作为UIScrollView的内容容器（这是Apple官方推荐的做法，能避免ScrollView布局的常见坑），然后通过三个关键约束来实现需求：

• 让contentView的高度至少等于ScrollView的高度，保证内容不足时Button能固定在底部
• Label和ScrollView（contentView）顶部对齐，高度随文本动态变化
• Button和ScrollView（contentView）底部对齐，同时和Label之间设置大于等于的最小间距约束

Swift代码实现示例 #

// 假设你已经通过代码或Storyboard创建了scrollView实例
let contentView = UIView()
contentView.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(contentView)

// 创建动态高度的Label
let titleLabel = UILabel()
titleLabel.translatesAutoresizingMaskIntoConstraints = false
titleLabel.numberOfLines = 0 // 允许文本换行，高度动态变化
titleLabel.text = "这里是你的动态文本内容，当文本足够长时，按钮会被向下推动，需要滚动才能查看；当文本较短时，按钮会固定在滚动区域底部。"
contentView.addSubview(titleLabel)

// 创建底部固定的Button
let actionButton = UIButton(type: .system)
actionButton.translatesAutoresizingMaskIntoConstraints = false
actionButton.setTitle("确认操作", for: .normal)
contentView.addSubview(actionButton)

// 激活所有约束
NSLayoutConstraint.activate([
    // 1. 让contentView和ScrollView的内容引导完全对齐
    contentView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
    contentView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
    contentView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
    contentView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
    
    // 2. 固定contentView的宽度和ScrollView的可视宽度一致，避免横向滚动
    contentView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor),
    
    // 3. 确保contentView至少和ScrollView一样高，保证内容不足时按钮在底部
    contentView.heightAnchor.constraint(greaterThanOrEqualTo: scrollView.frameLayoutGuide.heightAnchor),
    
    // 4. Label的约束：顶部和左右边距与contentView对齐
    titleLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 16),
    titleLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
    titleLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
    
    // 5. Button的约束：底部和左右边距与contentView对齐
    actionButton.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -16),
    actionButton.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
    actionButton.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
    
    // 6. 关键约束：Label底部与Button顶部的间距≥16（最小间距可按需调整）
    titleLabel.bottomAnchor.constraint(greaterThanOrEqualTo: actionButton.topAnchor, constant: -16)
])

Storyboard可视化实现步骤 #

如果你习惯用Storyboard布局，也可以按以下步骤操作：

1. 拖入UIScrollView到ViewController，设置它的四边与父视图完全对齐
2. 拖入一个UIView作为contentView到ScrollView中，设置：
   • 顶部、左侧、右侧、底部与ScrollView的Content Layout Guide对齐
   • 宽度等于ScrollView的Frame Layout Guide宽度
   • 高度≥ScrollView的Frame Layout Guide高度
3. 拖入UILabel到contentView，设置：
   • 顶部、左侧、右侧与contentView添加边距约束（比如16）
   • Number of Lines设为0，允许文本动态换行
4. 拖入UIButton到contentView，设置：
   • 底部、左侧、右侧与contentView添加边距约束（比如16）
5. 给Label的底部和Button的顶部添加一个Greater Than or Equal约束，设置最小间距（比如16）

这样就能完美实现你要的效果：当Label文本较短时，Label和Button之间的间距自动扩大，Button固定在滚动区域底部；当Label文本变长时，间距保持最小，Button被向下推动，用户需要滚动页面才能查看按钮。

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