如何使嵌套视图内的一组标签相对于图片垂直居中？

嘿，这个布局问题我太熟了！你想要的是图片垂直居中，两个标签作为一个整体和它对齐，同时标签文本少的时候不会出现大片空白对吧？我来给你捋捋怎么解决～

核心问题分析 #

你之前降低第二个Label的content hugging优先级，反而让容器View有了被拉伸的空间，导致文本少的时候出现多余空白。咱们要做的是让标签容器紧紧包裹两个Label，同时保证它和图片垂直居中。

分步解决方案 #

1. 配置标签容器（TextContainerView）的优先级
   给容器View设置垂直方向的content hugging priority为最高（1000），同时垂直方向的content compression resistance priority也设为最高。这样容器会严格贴合内部标签的高度，不会被父视图拉伸或压缩变形。

2. 约束内部两个Label

   • 给两个Label设置固定的垂直间距（比如8pt），让第一个Label顶部对齐容器顶部，第二个Label底部对齐容器底部。
   • 给两个Label的垂直content hugging priority都设为最高（1000），确保它们的高度刚好适配自身文本内容，不会被拉伸。

3. 对齐容器与图片
   在父视图中，让图片和标签容器的centerY属性相等，实现整体垂直居中的效果。

代码示例（Swift Auto Layout） #

// 初始化视图组件
let imageView = UIImageView(image: UIImage(named: "your-image"))
let titleLabel = UILabel()
titleLabel.text = "主标题"
let subtitleLabel = UILabel()
subtitleLabel.text = "副标题（文本少的时候也不会有空白）"
let textContainerView = UIView()

// 将标签添加到容器中
textContainerView.addSubview(titleLabel)
textContainerView.addSubview(subtitleLabel)

// 禁用自动转换约束
[imageView, titleLabel, subtitleLabel, textContainerView].forEach {
    $0.translatesAutoresizingMaskIntoConstraints = false
}

// 配置容器的优先级
textContainerView.setContentHuggingPriority(.required, for: .vertical)
textContainerView.setContentCompressionResistancePriority(.required, for: .vertical)

// 约束内部标签
NSLayoutConstraint.activate([
    // 主标题约束
    titleLabel.topAnchor.constraint(equalTo: textContainerView.topAnchor),
    titleLabel.leadingAnchor.constraint(equalTo: textContainerView.leadingAnchor),
    titleLabel.trailingAnchor.constraint(equalTo: textContainerView.trailingAnchor),
    
    // 副标题约束，和主标题保持垂直间距
    subtitleLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 8),
    subtitleLabel.leadingAnchor.constraint(equalTo: textContainerView.leadingAnchor),
    subtitleLabel.trailingAnchor.constraint(equalTo: textContainerView.trailingAnchor),
    subtitleLabel.bottomAnchor.constraint(equalTo: textContainerView.bottomAnchor)
])

// 配置标签的优先级，确保它们不被拉伸
titleLabel.setContentHuggingPriority(.required, for: .vertical)
subtitleLabel.setContentHuggingPriority(.required, for: .vertical)

// 将图片和容器添加到父视图
let parentView = UIView()
parentView.addSubview(imageView)
parentView.addSubview(textContainerView)

// 整体布局约束
NSLayoutConstraint.activate([
    // 图片约束：固定大小+左对齐+垂直居中
    imageView.leadingAnchor.constraint(equalTo: parentView.leadingAnchor, constant: 16),
    imageView.centerYAnchor.constraint(equalTo: parentView.centerYAnchor),
    imageView.widthAnchor.constraint(equalToConstant: 48),
    imageView.heightAnchor.constraint(equalToConstant: 48),
    
    // 容器约束：和图片保持间距+右对齐+垂直居中
    textContainerView.leadingAnchor.constraint(equalTo: imageView.trailingAnchor, constant: 16),
    textContainerView.trailingAnchor.constraint(equalTo: parentView.trailingAnchor, constant: -16),
    textContainerView.centerYAnchor.constraint(equalTo: parentView.centerYAnchor)
])

为什么这样有效？ #

• 容器View的高优先级content hugging确保它只会包裹内部标签，不会产生多余空白；
• 两个Label的高优先级content hugging保证它们的高度完全适配文本，不会被拉伸；
• 垂直居中约束让图片和标签容器整体对齐，完美满足你的布局需求。

内容的提问来源于stack exchange，提问作者Toma Radu-Petrescu