如何用Storyboard设计UI使视图占据全部剩余空间？附相关疑问

问题1：垂直间距约束设为10px但预览显示+55.6的原因 #

• 你看到的+55.6是文本内容之间的视觉间距，而设置的10px约束是两个Label的布局框架（Frame）边界之间的距离。比如Data Label的文本是顶部对齐，Label本身的高度远大于文本高度，那么Data Label底部到New Label顶部的10px约束，加上Data文本到Label底部的空白，就会让文本间的视觉间距远大于10px。
• 单位混淆：如果在Storyboard里误将单位设为pt（iOS默认单位），而你以为是px，那么10pt在@3x设备上对应30px，再加上Label自身内边距、字体行高带来的空白，最终视觉间距会进一步变大。
• 自动布局优先级影响：如果Data Label的垂直压缩/抗压缩优先级设置不合理，当父视图尺寸变化时，自动布局可能调整Label高度，间接拉大了文本间的视觉间距。

问题2：更优的同UI设计方案 #

以下几种方案能更精准实现需求，减少误解：

方案1：使用UIStackView（推荐） #

把两个Label放入垂直方向的UIStackView：

• 给StackView设置约束：顶部、底部、左、右与父视图对齐（或按需留边距）。
• 调整优先级：给Data Label设置内容拥抱优先级为251、内容压缩抵抗优先级为750；给New Label设置这两个优先级为250、751。这样New Label会保持自身高度，Data Label自动占据剩余空间。
• 设置StackView的Spacing为10px，确保两个Label布局边界间距符合预期，若Label内容与边界对齐，文本间的视觉间距也会更贴近设置值。

方案2：精准手动约束 #

• 给New Label设置：底部对齐父视图、左右对齐父视图（或留边距）、高度固定（或根据内容自适应）。
• 给Data Label设置：顶部对齐父视图、左右对齐父视图、底部对齐New Label顶部且间距为10px。同时将Data Label的numberOfLines设为0，允许自动换行，确保它能扩展高度占据剩余空间。

方案3：代码动态布局（适合复杂场景） #

用Auto Layout代码或第三方库（如SnapKit）实现，灵活性更高：

// Swift + SnapKit 示例
let dataLabel = UILabel()
dataLabel.numberOfLines = 0 // 允许换行
let newLabel = UILabel()

view.addSubview(dataLabel)
view.addSubview(newLabel)

// 约束New Label在底部
newLabel.snp.makeConstraints { make in
    make.left.right.bottom.equalTo(view).inset(16) // 按需调整边距
    make.height.greaterThanOrEqualTo(21) // 保证最小高度
}

// 约束Data Label占据剩余空间
dataLabel.snp.makeConstraints { make in
    make.left.right.top.equalTo(view).inset(16)
    make.bottom.equalTo(newLabel.snp.top).offset(-10) // 间距10px
}

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