如何在UITableViewCell中实现可选图片头部布局？

核心思路 #

通过Auto Layout的约束优先级控制+视图显隐，实现两种布局状态的无缝切换，无需创建两个不同的单元格类。

具体实现步骤 #

1. 子视图定义 #

在自定义UITableViewCell中声明以下视图：

• headerImageView：可选头部图（设置contentMode = .scaleAspectFill，clipsToBounds = true）
• userAvatarStack：用户头像堆叠容器（UIStackView，设置axis = .horizontal、spacing = 8、alignment = .center）
• contentLabel：内容标签（按需设置字体、行数等样式）

2. 约束配置 #

给各视图添加以下Auto Layout约束：

• 头部图显示时的约束：

  • headerImageView顶部、左、右与contentView对齐，高度设为固定值（如120）
  • userAvatarStack顶部与headerImageView底部间距16，左、右与contentView间距16
  • contentLabel顶部与userAvatarStack底部间距12，左、右与contentView间距16，底部与contentView间距16

• 头部图隐藏时的适配约束：

  • 给userAvatarStack添加「顶部与contentView顶部间距16」的约束，设置优先级为750（UILayoutPriority.defaultHigh）
  • 将「userAvatarStack与headerImageView底部间距」的约束优先级设为250（UILayoutPriority.defaultLow）

3. 布局切换逻辑 #

在单元格的配置方法中处理显隐：

func setup(with data: CellData) {
    // 处理头部图
    if let headerImg = data.headerImage {
        headerImageView.image = headerImg
        headerImageView.isHidden = false
    } else {
        headerImageView.isHidden = true
    }
    
    // 填充用户头像
    userAvatarStack.arrangedSubviews.forEach { $0.removeFromSuperview() }
    data.avatars.forEach { avatar in
        let avatarView = UIImageView(image: avatar)
        avatarView.layer.cornerRadius = 20
        avatarView.clipsToBounds = true
        avatarView.frame.size = CGSize(width: 40, height: 40)
        userAvatarStack.addArrangedSubview(avatarView)
    }
    
    // 设置标签文本
    contentLabel.text = data.content
}

4. 细节优化 #

• 给headerImageView添加圆角或边框样式，匹配设计需求
• 若头像堆叠数量较多，可设置userAvatarStack的layoutMargins，避免边缘头像贴边
• 确保contentView的layoutMargins被正确设置，避免内容与单元格边缘过度贴合

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